ブロックエディタについて
ブロックエディタは、WordPressの標準的な編集機能で、ブロックと呼ばれるパーツを組み合わせてコンテンツを構築できます。
色やフォント、余白などをブロックごとに編集でき、HTMLやCSSを記述しなくてもWebページを作成できます。
ブロックエディタのスタイルを変更する
ブロックの見た目を変更するには、ブロックを選択した状態で右側のエリアから編集します。
ここはブロックによって内容が異なります。
例えば見出しブロックなら、フォントサイズや太さ・斜体などの外観、行高、文字間、余白、枠線などを設定することができます。
また、グループブロックなどのように、タブが分かれていて、内包する要素の幅を設定する項目と、スタイルを設定する項目に分かれています。
また、一部のブロックには「スタイル」と呼ばれるあらかじめ用意されたデザインがあり、選択するだけで見た目を変更できます。
※スタイルはテーマごとに異なります。
見出しのデザインを変えてみる
見出しブロックの見た目を変えてみます。
ここではテーマはWordPressをインストールした時点で入っているテーマ、Twenty Twenty-Fiveを使用しています。テーマによってはできない設定もあるのでご了承ください。
普通に見出しブロックを選択して配置すると以下のように太字のテキストになります。
これをこのブログで使用しているような右側に線を引いた装飾の見出しにしてみます。
スタイルの変更
スタイルの変更はブロックを選択したときに右側に出る設定項目から変更できます。
この項目は「設定」（歯車のアイコン）と「スタイル」（白黒の円のアイコン）があり、スタイルのほうを選択すると、色やフォント、余白などが設定できるようになっています。
右側に線を引いた装飾の見出しの設定方法
設定の仕方は以下の通り。
- 見出しブロックの枠線の左側にのみ、色とサイズを指定する。
- テキストとのバランスを見て左パディングを少し開ける。
※パディングや枠線の設定欄が表示されていない場合は、各項目の右側にある「+」アイコンをクリックすると追加できます。
帯のような見出しの設定方法
次に以下のような帯のような形の見出しに設定してみます。
設定の仕方は以下の通り。
- 見出しブロックに背景色を設定する。色によっては文字が見づらくなるのでその場合はテキストの色も変える
- このままだとテーマによって設定された余白になるので、好きなサイズにパディングを設定する。
まとめ
- ブロックエディタは、管理画面上でコンテンツのレイアウトやスタイルを直感的に調整できる。
- 変更可能な項目はテーマの設計やサポート状況に依存するため、導入前にはテーマがどこまでブロックエディタに最適化されているかを確認することが重要。
- プラグインを組み合わせればブロックの種類を拡張したり、高度なデザイン調整機能を追加できる。ただし、入れすぎると機能過多で使いづらくなったり、保守性が低下するため注意が必要。
テーマとプラグインの適切な組み合わせ、そして更新や保守を見据えた設計が、ブロックエディタを最大限に活用する鍵となります。
