配色

プライマリー（メインカラー）

セカンダリー

サーシアリー

アクセント

文字サイズ

ブロックエディタの追加CSSクラスに「fs-xxlやfs-xl」の様に、「fs-」の後ろにサイズ「xs,sm,md,lg,xl,xxl」をつけると、個別にフォントサイズが設定できます。

文字サイズXXLarge

文字サイズXLarge

文字サイズLarge

文字サイズMedium

文字サイズSmall

文字サイズXSmall

余白

余白のスタイル

ブロックエディタの追加CSSクラスに「mt-xxlやmb-xl」の様に設定すると個別に余白を設定できます。

marginの場合は、「m」から始まり、paddingの場合は、「p」から始まります。
margin-topの場合は、「mt」、padding-bottomの場合は、「pb」となります。
後は、後ろにサイズ「xs,sm,md,lg,xl,xxl」をつけるます。

例１． 要素の上に、小さい余白（margin）を追加したい。「mt-sm」
例２． 要素の下に、少し大きい余白（padding）を追加したい。「pb-lg」
例３． 要素の周りに、少し大きい余白（padding）を追加したい。「p-lg」

余白のサイズ

XSmallの余白

Smallの余白

Mediumの余白

Largeの余白

XLargeの余白

XXLargeの余白

文字装飾のスタイル

これはテキストシャドウ（黒）のスタイル見本です。

これはテキストシャドウ（メインカラー）のスタイル見本です。

これはテキストアウトライン（黒）のスタイル見本です。

テキストアウトライン（メインカラー）のスタイル見本です。

これはマーカー（メインカラー）のスタイル見本です。

これはマーカー（サブカラー）のスタイル見本です。

これはマーカー（アクセントカラー）のスタイル見本です。

見出しのスタイル

見出し１のスタイル

見出し2のスタイル

見出し3のスタイル

見出し4のスタイル

テーブルのスタイル

thththth	thththth	thththth
tdtdtdtdtdtdtd	tdtdtdtdtdtdtd	tdtdtdtdtdtdtd
tdtdtdtdtdtdtd	tdtdtdtdtdtdtd	tdtdtdtdtdtdtd
tdtdtdtdtdtdtd	tdtdtdtdtdtdtd	tdtdtdtdtdtdtd

ブロックエディタの追加CSSクラスに「bc-gray」と設定するとボーダーの色をグレイに設定できます。

thththth	thththth	thththth
tdtdtdtdtdtdtd	tdtdtdtdtdtdtd	tdtdtdtdtdtdtd
tdtdtdtdtdtdtd	tdtdtdtdtdtdtd	tdtdtdtdtdtdtd
tdtdtdtdtdtdtd	tdtdtdtdtdtdtd	tdtdtdtdtdtdtd

リストのスタイル

• リストスタイル
• リストスタイル
• リストスタイル
• リストスタイル

画像のスタイル

通常画像

画像ホバー

リンクCSSクラスに「img-hover」と設定すると、ホバー時の挙動を設定できます。

ボタンのスタイル

追加CSSクラスに「btn-reverse」と設定すると、ボタンの色が袢纏します。右下「ボタンスタイル（反転）」

追加CSSクラスに「change-accent」と設定すると、ボタンの色がアクセントに変更されます。
「change-accent」は、すべてではないですが、他のコンポーネントにも適応されます。

バッジのスタイル

バッジのスタイルは、カスタムＨＴＭＬブロックを使って、<span class=”badge badge-main”>テキスト</span>で表示されます。

バッジスタイル バッジスタイル バッジスタイル バッジスタイル

また、<span class=”badge badge-main radius-25px”>の様に、クラスを追加することで、形を調整することもできます。

バッジスタイル バッジスタイル バッジスタイル バッジスタイル

ページネーションのスタイル

検索のスタイル

「検索ラベル：非表示」「ボタンの位置内側」「アイコン付きボタンの使用」

検索

「検索ラベル：非表示」「ボタンの位置：外側」

検索

検索

フレームのスタイル

グループブロックに装飾するスタイルです。

追加CSSクラスに「balloon-right」を追加すると、吹き出しの位置が右側になります。

追加CSSクラスに「balloon-center」を追加すると、吹き出しの位置が中央になります。