基本のカラム

基本のカラム

サイト全体は画面幅いっぱいに幅設定されていますが、パソコン時に最大幅980pxのセンター配置にするためのカラムです。

カラムのクラスに「conts__cell」、カラム詳細のクラスに「conts__inner 」とセットで指定します。

この「conts__cell」には下の余白も設定されていますので、大見出しごとに分けて使ってください。


見出しのデザイン

見出しパターン
デザイン用にspanタグが入っていますので、崩さないように気を付けてください。

h1~h6はどれを指定してもデザインには影響ありません。
デザインはclassで決まります。ですので、SEO的にhタグの調整が可能です。

■カテゴリー見出し
 class="title-style04"

Educational Ideal
教育理念

■ページタイトル
 class="title-style05"

教育理念
ロゴ

■大見出し
 class="title-style06"

名 称

■中見出し
 class="title-style07"

中見出し

■小見出し
 class="title-style08"

小見出し

■小見出しその2
 class="title-style09"

小見出し

カラムのデザイン

カラムのデザイン




カテゴリートップのナビ用カラム

カテゴリートップのナビ用カラム設定です。
2個の場合は、ビズアシストのボックスは2カラムを選びますが、詳細設定のクラスは3つと同じものになります。



■カテゴリー内ナビ用
4個横並びと、3個横並びではクラス設定が異なります。
4個並びの場合 column-box-ib-4c になります。

5個の場合


ボタンのデザイン


表のデザイン

■表のデザイン
thタグを使うと背景グレーになります。

9:00~10:30 モンテッソーリ
おやつ
10:30~10:40 英語(絵本・知育)
10:40~11:30 体育プログラム 集団遊び・戸外遊び 屋外散策
11:30~12:20 お給食

■表のデザイン2
1行ごとに背景グレーになります。

9:00~10:30 モンテッソーリ
おやつ
10:30~10:40 英語(絵本・知育)
10:40~11:30 体育プログラム 集団遊び・戸外遊び 屋外散策
11:30~12:20 お給食

ボーダーのデザイン

ボーダーのデザイン

ボーダーのスタイル1
ボーダーのスタイル2
ボーダーのスタイル3

余白のクラス

テキストエディタの書式からも選択できます。
余白下に30pxの場合 marginBottom30 数字の部分は10、20、30、40、50、60が指定できます。

marginTop10 としますと上のマージンも設定できますが、上のマージンには条件によっては反映されない場合がありますので、余白は基本下のみを使うようにしていただいたほうが調整しやすいです。