開智望小学校 > デザインガイド デザインガイド 見出しは [内容] の [HTMLタグ] から [H1〜H6] を選ぶだけで、以下の様なデザインが反映されます。 H1 見出しテキスト H2 見出しテキスト H3 見出しテキスト H4 見出しテキスト H5 見出しテキスト H6 見出しテキスト さらに、H3以下の見出しは、[高度な設定] のCSSクラスに [style1] [style2] [style3] [style4]を設定いただくと見出しのデザインを変更することができます。例:H3の場合 H3 見出しテキスト CSSクラス style1 H3 見出しテキスト CSSクラス style2 H3 見出しテキスト CSSクラス style3 ここに見出しテキストを追加 ボタンとカラーコード ボタンの色設定とHP内での使用色については以下のコードを参考に設定してください。ボタンの色を変える場合は [スタイル] から背景色を選びます。文字の色を変更する場合は、2通りの方法があり、部分的に変更する場合は、画面左に表示されているテキストエディター内のテキスト色変更ボタンから、ボックス内(要素内)全体の色味を変える場合は [スタイル] > [文字色]で色の指定をします。 ボタン基本 #00A3E5 ここをクリック #008000 ここをクリック #023491 ここをクリック #C23441 ここをクリック #F3EAC4 ここをクリック ▼配置している要素の間隔を開けたいときには [スペーサー] を使うと便利です。実はこの文章の上下にスペーサーが入ってます ▼区切り線はこんな風に入ります [画像] 1枚ずつ画像を配置する クリックして拡大表示設定をするためには[内容] >リンク:メディアファイルLightBox:デフォルトに設定する必要があります。 画像のキャプションを使って説明文を追加することもできます。 [Gallery] 複数の画像を配置 複数の画像配置には [Gallery] を使うと便利です。ポップアップ(クリックすると拡大してみれる)の設定まで自動で設定してくれます。※IEでは表示されません アコーディオンメニュー アコーディオン #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. アコーディオン #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. タブ タブ #1 タブ #2 タブ #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. タブ #2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.