【WordPressブログ】CSSカスタムプロパティ（CSS変数）で、テーマを快適カスタマイズ

Webサイトやブログの見栄えを調整する言語である「CSS」の知識は、WordPressブログを書く上で必須ではありません。

ですが、CSSが書けることで、テーマのカスタマイズなどを柔軟に行えたり、有利な場面は多々あります。

そして、度々使うブログのメインカラーの値などを「あれ、なんだったっけ…？🤔」と迷いながら、値を毎回 直接入力するより、良い方法があります。

それが、「CSSカスタムプロパティ（CSS変数）」を活用する方法です。

CSSカスタムプロパティ（CSS変数）とは

そもそも「変数」とは何なのでしょうか？

まめお

変数とは、いわば便利な「箱」のようなもので、プログラミングにおいては絶対に欠かせない機能です。

最初に変数を宣言（定義）し、値を代入することによって、様々な場所からその値を参照できるようになります。

まめこ

それが出来ると、何がいいの？

CSSでも変数が使えるようになると、例えばcolorやwidthといった、色々な場所で繰り返し使うプロパティの値を、1つの箇所で定義・管理し、再利用しやすくなります。

変数が使えない場合、共通の値を変更する際にはエディタの置換機能等を使ってある意味“アナログな”方法でCSSファイル全体を修正する必要がありました。

しかし、変数によって同じ値を一元管理している場合は、修正が必要になっても一か所書き換えるだけで済みます。

まめお

あるいは、あなたのブログのメインカラーが赤 #ff3300 だったとして、微妙に違う #ff5500 などを指定してしまい、統一感がなくなってしまうことも防げます…！

CSSカスタムプロパティの使い方、出来ること

実際に使い方を見てみましょう。

まず、CSSを記述する.cssファイルや、あなたのWordPressブログのCSS編集エリアの内側などに、

「:root {}」という記述をし、その中に「–」で始まる任意の変数名を宣言します。（変数宣言）

下記の例のように、「–変数名: 値;」という形式で宣言し、次に実際に、HTMLのclassに「プロパティ: var(–変数名);」という形式で変数を適用します。

:root {
  --main-color: #fb0;
  --sub-color: #ea0;
}

.box-A {
  color: var(--main-color);
}
.box-B {
  color: var(--sub-color);
}

/*
  注）変数名:の後の半角スペースは、あっても無くてもOK。CSSと同じです
*/

例えばこの後、「.box-C」を作成して、そのcolorプロパティで「#fb0」の値を設定したい場合も、「.box-A」同様に指定してあげればOKです。

指定方法は、慣れれば難しいものではありませんし、WordPressテーマを自分で積極的にカスタマイズしたい方は、覚えておくと良いと思ます。

まとめ

CSSカスタムプロパティ（CSS変数）を理解し実際にテーマ編集に取り入れることで、ブログのデザインを効率的に編集することが出来ます。

覚えておくことで結果的に、一番大切な記事の執筆に時間をかけることも可能になるので、習得してみてはいかがでしょうか。

最後までお読みいただき、ありがとうございました！

【みんな使ってる!】業界最高水準、Pすぐ貯まる