素材集

サイト内で使えるカスタムGutenberg要素-Class名一覧(ブログ記事内でも使用できます)

見出しH2

見出しH3

見出しH4

見出しH5

強調見出し/emphasize

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

吹き出しつき強調見出し/emphasize baloon

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

疑問符つき強調見出し/emphasize qestion

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

疑問符&吹き出し付き強調見出し/emphasize baloon question

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

チェックリスト/checklist

  1. チェックリスト項目
  2. チェックリスト項目
  3. チェックリスト項目

クリックできるボックス/clickablebox

リンク要素

ここにてきすとがはいりますここにてきすとがはいりますここにてきすとがはいります

リンク要素

ここにてきすとがはいりますここにてきすとがはいりますここにてきすとがはいります

リンク要素

ここにてきすとがはいりますここにてきすとがはいりますここにてきすとがはいります

フロー図

流れ①/h4.flow

流れ①説明文がはいります流れ①説明文がはいります流れ①説明文がはいります/h4.flow + p

流れ②/h4.flow

流れ②説明文がはいります流れ②説明文がはいります流れ②説明文がはいります/h4.flow + p

流れLast/h4.flow.end

流れLast説明文がはいります流れLast説明文がはいります/h4.flow + p

四角いボタン/square_button

Gutenbergのボタン要素を使用。

2カラムに収めた場合

サブテキスト付き見出し/withsubtext

メインになる文字列は太字に設定、斜体にした文字は色がつきます

アイコン&サブテキスト付き見出し/withsubtext icon

メインになる文字列は太字 アイコン画像はstyle.cssから設定する

枠線の入れ子

入れ子を実現する場合はカスタムHTMLの助けを借りる
「div.waku」で色つきの枠線。「div.waku > div」で白抜きインナー枠

なんか文字列とか画像とかいろいろ

「div.waku.waku_orange」でオレンジ色の枠

何かテキストとか画像

ご相談、お問い合わせはこちらまで