使用するブロック

※上記以外のブロックは非推奨

見出しの表示確認

グループの使い方

第一階層は必ずグループブロックを作成して、その中でコンテンツを作成すること。
各コンテンツをグループで囲うことによってグループとグループが隣接する場合、広めのマージンが発生するようになっています。

カラムの使い方

スマホ表示時にcolumn-reverseを付与する
追加CSSクラス　：　rev

左にテキストボックス、右に画像というレイアウトの場合、
一般的にスマホでは上にテキストボックス、下に画像が回り込みます。
しかし、画像を上に、テキストボックスを下に表示したい場合が多々あります。
その際にカラムにrevというクラスを付与してください。

カラム間の隙間をなくする
追加CSSクラス　：　nogap

テーブルの使い方

borderで囲う
追加CSSクラス　：　table-border

項目名1	項目名2
内容1-1	内容2-1
内容1-2	内容2-2

上下だけborderで囲う
追加CSSクラス　：　table-border2

項目名1	項目名2
内容1-1	内容2-1
内容1-2	内容2-2

borderをつけない
追加CSSクラス　：　table-noborder

項目名1	項目名2
内容1-1	内容2-1
内容1-2	内容2-2

borderで囲う+上段のセルに背景色をつける
追加CSSクラス　：　table-border th-top

項目名1	項目名2
内容1-1	内容2-1
内容1-2	内容2-2

borderで囲う+左列のセルに背景色をつける
追加CSSクラス　：　table-border th-left

項目名1	項目名2
内容1-1	内容2-1
内容1-2	内容2-2

borderで囲う+上段のセルに背景色をつける+左列のセルに背景色をつける
追加CSSクラス　：　table-border th-top th-left

項目名1	項目名2
内容1-1	内容2-1
内容1-2	内容2-2

borderで囲う+セル幅を指定する
追加CSSクラス　：　下記参照
※等分の場合はclassを付与しなくてもブロックエディターのデフォルト機能で実装可能

項目名1	項目名2	項目名3
内容1-1	内容2-1	内容3-1
内容1-2	内容2-2	内容3-2

borderで囲う+スマホ時は横スクロールにする+上段のセルに背景色をつける
追加CSSクラス　：　table-border table-scroll th-top

項目名1	項目名2	項目名3	項目名4	項目名5
内容1-1	内容2-1	内容3-1	内容4-1	内容5-1
内容1-2	内容2-2	内容3-2	内容4-2	内容5-2

リストの使い方

丸マークがついたリスト
追加CSSクラス　：　list-circle

• リストです
• リストですリストです
• リストですリストですリストです
• リストですリストですリストですリストです

チェックマークがついたリスト
追加CSSクラス　：　list-check

• リストです
• リストですリストです
• リストですリストですリストです
• リストですリストですリストですリストです

ナンバリングの使い方

追加CSSクラス　：　num01（num02,num03,num04…num20まで）
【注意】見出しブロックは使わないこと！段落ブロックを使用してください！

ご来院・受付

問診・カウンセリング

検査

治療計画の説明

メインテナンス・定期検診

Profileの使い方

追加CSSクラス（親要素）　：　profile
【注意】カラムブロックを使用すること！（2列のもの）

追加CSSクラス（子要素）　：　job-title（肩書）
追加CSSクラス（子要素）　：　name-ja（日本語の氏名）
追加CSSクラス（子要素）　：　name-en（英語の氏名）
【注意】見出しブロックは使わないこと！段落ブロックを使用してください！

※背景画像は/cms/wp-content/themes/bp_dental_clinic/assets/img/profile.png