わかりやすいハウツーブログを目指して、ステップフローを実装する。手順を説明したブロックをグループ化し、その中の<h3>タグに連番をつけデザイン性を高める。
連番を自動挿入するために、counter-reset
、counter-increment
、content: counter(step-counter)
を使用している。
ステップフロー実装の手順
スタイルシートにCSSを追記する。
見出しの<h3>を連番にするので、28行目と37行目をh3
とする。
WordPressのブロックエディターで自由に執筆する。
画像を挿入しても良い。

ステップフロー化するブロックをすべてまとめてグループ化する。
グロック化するとdiv
で囲まれ、CSSの構造が変更になるので、上記①のスタイルシートを修正する必要がある。
また、見出しにデフォルトのCSSがあたっている場合、さらに修正が必要である。
グループ化したブロックを選択し、右パネルの「高度な設定」にクラス名を付与する。
付与するクラス名は、steps
とする。
完成したスタイルシート
個人環境にフィットさせたスタイルシートがこちら。
.steps
を.steps .wp-block-group__inner-container
と書き換えているのがポイント。
今回のポイント
- WordPressで複数ブロックのグループ化を行うときは、グループ化する最初のブロックをクリックし、そのまま最後のブロックを
Shift
を押しながらクリックする。 - グループ化した親ブロックにクラス名を付与するときは、リスト表示(Shift+Alt+O)から親ブロックを選択し、右パネルの
高度な設定
の追加CSSクラス
に、ドットを付けずにクラス名を入力する。
完成したデザイン見本はいまご覧になっているこのページです!
参考
https://qiita.com/suin/items/7ee3c8ae24a7d8e3ff33
Related Tags