WordPress小技集

ブロックエディタ(Gutenberg)でページを作っていると、「このブロックだけ少し余白を広げたい」「見出しの下に装飾的な線を入れたい」といった、標準の機能だけでは実現できない細かいデザイン調整をしたい場面が出てきます。

こうした場合に役立つのが、ブロックに独自のCSSを当てるという方法です。この記事では、ブロックエディタに独自CSSを適用するいくつかの方法と、それぞれの特徴、デザインにこだわりたい担当者が押さえておきたいポイントを解説します。

ブロックエディタにCSSを当てる方法は複数ある

WordPressでCSSを追加する方法として、「外観」→「カスタマイズ」→「追加CSS」を使う方法は広く知られていますが、これは**公開後のページ(フロント側)**にのみ反映される仕組みです。

ブロックエディタを使ったデザイン調整には、これ以外にも目的に応じていくつかの方法があります。

目的によって適切な方法が異なるため、それぞれの特徴を押さえておきましょう。

方法1:ブロックごとに「追加CSSクラス」を設定する

特定のブロックだけに独自のデザインを当てたい場合、最も手軽なのが「追加CSSクラス」という機能です。

手順

1. スタイルを当てたいブロックを選択する
2. 画面右側の設定パネルを開き、「高度な設定」の項目を探す
3. 「追加CSSクラス」という入力欄に、任意のクラス名を入力する(例:my-highlight-box)
4. このクラス名を対象にしたCSSを、「追加CSS」などの場所に記述する

.my-highlight-box {
    background-color: #fff7e6;
    border-left: 4px solid #f5a623;
    padding: 16px;
}

この方法のメリットは、同じ種類のブロックであっても、個別にデザインを変えられる点です。例えば、同じ「段落」ブロックでも、通常の文章と、注意書きとして目立たせたい文章とで、異なるクラス名を付けて見た目を使い分けることができます。

方法2:編集画面の見た目を、公開後の見た目に近づける(エディタスタイル)

ブロックエディタ上での見た目と、実際に公開されたページの見た目が異なっていると、担当者が編集中にイメージしづらく、公開してみて初めて「思っていたデザインと違った」と気づくことがあります。

WordPressには、編集画面にも独自のCSSを適用し、公開後の見た目に近づける(WYSIWYGに近づける)仕組みが用意されています。これは「エディタスタイル」と呼ばれ、テーマ側の設定として組み込まれます。

エディタスタイルが正しく設定されているテーマであれば、編集画面上でも、実際のフォントや文字サイズ、余白などに近い見た目で記事を作成できるため、「公開して初めて見た目のズレに気づく」という手戻りを減らせます。

この設定自体はテーマ側のプログラム(functions.php など)で行うものであり、担当者が日常的に操作する項目ではありませんが、「編集画面と公開後の見た目がなぜ違うのか」を理解しておくと、制作会社とのやり取りの際にも役立ちます。もし編集画面と実際の表示に大きな差があり、作業しづらいと感じている場合は、この設定が行われているかどうかを制作会社に確認してみるとよいでしょう。

方法3:子テーマのCSSファイルにまとめて記述する

サイト全体にわたる、まとまった量のデザインカスタマイズを行いたい場合は、「追加CSS」の欄に少しずつ書き足していくよりも、子テーマのスタイルシート(style.css)にCSSを整理して記述する方法が適しています。

子テーマを使うメリット

• CSSの量が増えても、ファイルとして整理しやすい
• バージョン管理(変更履歴の記録)がしやすい
• テーマのアップデートによってカスタマイズが消えてしまう心配がない

デザインにこだわって作り込んでいくほど、CSSの記述量は増えていく傾向があるため、ある程度の規模のカスタマイズを行う場合は、追加CSSではなく子テーマでの管理に切り替えることをおすすめします。

ブロックの種類によって対象(セレクタ)が異なる点に注意する

ブロックエディタで作成された要素には、ブロックの種類ごとに、あらかじめ決まったクラス名が付けられています。例えば、ボタンブロックには wp-block-button__link、グループブロックには wp-block-group といった名前が付けられており、これらを対象にCSSを指定することで、特定の種類のブロック全体にスタイルを当てることができます。

ただし、使用しているテーマによって、実際に付けられているクラス名が異なる場合があるため、CSSを書く前に、ブラウザの「検証(開発者ツール)」機能を使って、対象のクラス名を確認する習慣をつけておくと確実です。

デザインにこだわる際に気をつけたいポイント

CSSが増えすぎると管理が煩雑になる

ブロックごとに個別のクラス名とCSSを増やしていくと、サイトの規模が大きくなるにつれて、どのCSSがどこで使われているかが分かりにくくなっていきます。命名のルール(接頭辞をそろえる、用途ごとに整理するなど)をあらかじめ決めておくと、後から見返した際にも管理しやすくなります。

スマートフォン表示への影響も必ず確認する

パソコンの画面で見栄えよく調整したつもりでも、スマートフォンで見ると余白が狭すぎる、文字が小さすぎるといったことが起こり得ます。独自CSSを追加した際は、プレビュー機能などを使って、スマートフォン表示でも必ず確認しましょう。

テーマ標準のデザインとの統一感を保つ

独自CSSで部分的に装飾を加えすぎると、サイト全体でデザインの統一感が崩れてしまうことがあります。色味やフォント、余白の取り方など、サイト全体のトーンから大きく外れないよう意識することが、見た目の完成度を保つポイントです。

変更前にバックアップ・記録を残す

CSSの変更自体は元に戻しやすい作業ですが、特に子テーマのファイルを直接編集する場合は、変更前の内容を控えておく、もしくはバックアップを取得しておくと、万が一の際に安心です。

まとめ

ブロックエディタへの独自CSSの適用は、目的に応じていくつかの方法を使い分けることがポイントです。

• 特定のブロックだけを装飾したい場合は「追加CSSクラス」が手軽
• 編集画面と公開後の見た目を近づけたい場合は「エディタスタイル」の仕組みを確認する
• まとまった量のカスタマイズは、子テーマのCSSファイルで整理して管理する
• クラス名の命名ルールを決め、スマートフォン表示も必ず確認する

標準のデザインだけでは物足りないと感じたときこそ、独自CSSを活用して、自社サイトならではの細やかな表現を加えていくチャンスです。

「デザインを細部までこだわって作り込みたい」「編集画面も含めた使いやすさを改善したい」という場合は、お気軽にお問い合わせください。