配色

プライマリー(メインカラー)

セカンダリー

サーシアリー

アクセント

文字サイズ

ブロックエディタの追加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」をつけるます。

例1. 要素の上に、小さい余白(margin)を追加したい。「mt-sm」
例2. 要素の下に、少し大きい余白(padding)を追加したい。「pb-lg」
例3. 要素の周りに、少し大きい余白(padding)を追加したい。「p-lg」

余白のサイズ

XSmallの余白

Smallの余白

Mediumの余白

Largeの余白

XLargeの余白

XXLargeの余白

文字装飾のスタイル

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

これはテキストシャドウ(白)のスタイル見本です。

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

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

これはテキストアウトライン(白)のスタイル見本です。

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

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

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

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

見出しのスタイル

見出し1のスタイル

見出し2のスタイル

見出し3のスタイル

見出し4のスタイル

テーブルのスタイル

thththththththththththth
tdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
tdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
tdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtd

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

thththththththththththth
tdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
tdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtd
tdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtd

リストのスタイル

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

画像のスタイル

通常画像

画像ホバー

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

看護師の写真

ボタンのスタイル

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

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

バッジのスタイル

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

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

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

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

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

検索のスタイル

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

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

フレームのスタイル

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

フレームボーダーのスタイル

フレームダッシュのスタイル

フレームダブルのスタイル

フレームダブルのスタイル

フレームカッコのスタイル

フレームカッコのスタイル

フレームカッコのスタイル

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

フレームカッコのスタイル

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

フレームカッコのスタイル