WordPress小技集

「もう少し文字を大きくしたい」「ボタンの色を変えたい」「余白を少し広げたい」——WordPressでサイトを運用していると、こうしたちょっとしたデザインの調整をしたい場面が出てきます。

「デザインを変える=プログラミングの知識が必要」というイメージを持たれがちですが、実は**CSS(Cascading Style Sheets)**という、装飾専用の仕組みを少し使うだけで、多くの「ちょい足し」カスタマイズは実現できます。この記事では、プログラミング未経験の方でも扱える範囲を中心に、CSSカスタマイズの基本を紹介します。

CSSとは何か(ざっくりとしたイメージ)

CSSとは、Webページの「見た目」を指定するための言語です。文章の内容(何を書くか)を決めるのがHTMLだとすると、その文章を「何色で」「どのくらいの大きさで」「どのくらいの余白で」表示するかを決めるのがCSSの役割です。

CSSは、次のような非常にシンプルな書き方が基本になります。

対象 {
    調整したい項目: 値;
}

例えば、「見出し(h2)の文字色を青にする」という指定であれば、以下のようになります。

h2 {
    color: blue;
}

複雑なプログラムのように条件分岐や計算式が出てくるわけではなく、「この部分を、こう見せたい」という指定を並べていくだけのシンプルな仕組みだと捉えると、心理的なハードルが下がるはずです。

WordPressでCSSを追加する場所

WordPressでCSSを追加する場合、多くのテーマでは管理画面から以下の手順でアクセスできる「追加CSS」という機能を使います。

1. 管理画面の「外観」→「カスタマイズ」を開く
2. 「追加CSS」という項目を選択する
3. 表示された入力欄にCSSを記述する
4. プレビューで見た目を確認しながら「公開」する

この方法の大きな利点は、テーマ本体のファイルを直接編集する必要がないという点です。記述したCSSは自動的にテーマに適用され、なおかつテーマをアップデートしても消えることがありません(子テーマを使っている場合と同様の安全性があります)。

よく使う「ちょい足し」カスタマイズの例

ここでは、非エンジニアの方でも比較的扱いやすい、よくある調整例を紹介します。実際に使う際は、対象の書き方(セレクタ)がサイトの構造によって異なる場合があるため、後述する確認方法とあわせて参考にしてください。

文字の色を変える

p {
    color: #333333;
}

color の後ろに指定する部分を、変更したい色のコード(カラーコード)に置き換えます。

文字の大きさを変える

p {
    font-size: 16px;
}

数値を大きくすれば文字は大きく、小さくすれば文字は小さくなります。

ボタンの背景色を変える

.wp-block-button__link {
    background-color: #ff6600;
}

WordPressのブロックエディタで作成したボタンは、多くの場合 .wp-block-button__link という名前がついています(テーマによって異なる場合があります)。

余白(スペース)を広げる

.wp-block-group {
    margin-bottom: 40px;
}

要素の下に余白を追加したい場合は margin-bottom、上に追加したい場合は margin-top を使います。

文字を太くする

strong {
    font-weight: bold;
}

「対象(セレクタ)」を調べる方法

CSSを書くうえで一番のハードルになりやすいのが、「どの部分を対象に指定すればいいのか」という点です。これは、パソコンのブラウザに搭載されている**「検証(開発者ツール)」**という機能を使うことで調べられます。

調べ方の手順

1. 色や大きさを変えたい部分の上で右クリックし、「検証」(ブラウザによっては「要素を検査」)を選択する
2. 画面の一部に、専門的な表示(HTMLやCSSの情報)が現れる
3. その中から、対象の部分に対応する記述(クラス名など、class="◯◯◯" のような表記)を探す

この画面は一見難しく見えますが、**「その部分の名前を調べるためだけに使う」**と割り切ってしまえば、必要な情報だけを拾うことができます。慣れないうちは、変更したい箇所を右クリックして表示された名前を、そのままCSSの対象としてコピーして使ってみる、という進め方で問題ありません。