Webデザインの入り口 
このサイトにはプロモーションが含まれています。
このサイトは以下のサーバーで運営しています。
WordPressは基本の機能のままでもWebサイトとして十分機能しますが、「タイトルや見出しのデザインをオリジナルなものに変えたい」「余白をもっととりたい」といった時にはテーマの機能のみでは十分に実現できないケースも少なくありません。
そういった時に使用するのが「CSS」という言語です。CSSを使用することでWordPressサイトの見た目は大幅に変更することが可能です。
しかし、WordPressにはCSSを入力できる場所が複数存在するため、慣れていない方からしてみれば「どこにCSSを書けばいいの？」となりがちです。
そこで今回はCSSが入力できる場所と、それぞれのメリット・デメリットについて解説します。
CSSが追加できる場所は4つ。それぞれにメリット、デメリットが存在
まず、WordPressでCSSが書ける場所は大きく分けて4つあります。
- WordPressの標準機能「追加CSS」
- テーマ内の機能「カスタムCSS」
- CSSカスタム機能のプラグイン
- 子テーマ
それぞれにメリット・デメリットが存在するため、一概に「こうすれば良い」とはいえませんが、知っておくことで適切に判断することが可能です。
WordPressの標準機能「追加CSS」
まずはWordPressに搭載されている標準機能「追加CSS」です。
- WordPressサイト全てに実装されている
- プレビュー画面で確認しながら作業ができる
- 入力エリアが狭い
追加CSS「外観」の「カスタマイズ」にあります。
全てのWordPressサイトに実装されているため、どのようなテーマを扱ったとしても必ず定位置にあるので扱いやすいのが最大の特徴です。
また、プレビュー画面が右側に出るので実行したら反映されているかが分かりやすいという点も大きなポイントです。
一方で入力領域は狭いため、複雑なCSSを書こうとすると頻繁にスクロールが必要になり、作業が多くなればなるほど不便に感じてしまいます。
簡単な変更をしたい、もしくはプラグインをあまり入れたくない方はこちらからの変更が最適でしょう。
あと、ごくごく稀にアップデートやテーマ、プラグインなどの影響により消えるというケースがあります。
本当にレアなケースなので気にしなくてよいのですが、たくさん書いている方は念のためメモ帳にコピーするなどしてバックアップを取っておいた方が無難かもしれません。
テーマ内の機能「カスタムCSS」
WordPressにはデザイン性と機能を兼ね備えた「テーマ」が存在し、どのサイトもなにがしかのテーマを使用しています。
そのテーマの中にCSSのカスタマイズ機能を備えている場合があります。
- 変えたい部分にピンポイントの設定がしやすい
- 全体を変更する設定がないことが多い
- そもそも実装しているテーマが少ない
特にブログ系テーマに見られますが、「そのページ限定」「そのブロック限定」でCSSを追加できる機能を備えているケースがあります。
ブロックごとに自由に設定できる反面、全体にCSSで設定しようとする項目があるケースは少ないので、その場合は追加CSSを使用するか、後述するプラグインを利用することになります。
CSSカスタム機能のプラグイン
追加CSS以外の選択肢として最も有力なのがプラグインによるCSSカスタマイズです。
テーマ制作者がテーマに直接実装せず、公式プラグインで実装しているケースはよく見かけます。
- テーマの変更などがあっても影響を受けない
- 入力幅が広い
- プレビュー画面が見れない
- 公式以外のプラグインの場合はテーマとの相性に注意が必要
WordPressテーマ「lightning」であれば「VK All in One Expansion Unit」、「Arkhe」であれば「Arkhe Blocks」のようにテーマ制作者が用意している公式プラグイン内にCSSのカスタム機能が入っていることも多いです。
この場合はプラグイン内にCSSのコードが格納されているので、テーマやWordPressの影響を受けにくいのが特徴です。
また、記入できる領域も広いことも特徴として挙げられます。
もしテーマ、プラグインで該当する機能がなかったときは「Simple Custom CSS and JS」のようなプラグインを使用することも可能ですが、その際にはテーマやほかに入れているプラグインに影響がないかの確認が必要になります。
また、プラグインの場合はプレビュー画面が見れないので、別タブで画面を表示して確認する必要があるでしょう。
子テーマ
通常、WordPress内でテーマを適用するときはテーマ本体、いわゆる「親テーマ」を入れるのですが、こちらは直接カスタマイズするとアップデートで消えてしまうので、「子テーマ」を作成して、そちらでカスタマイズを行うことができます。
- 画面が広く使用できる
- CSSのみだけでなく、JavaScriptやPHPなども操作可能
- 操作を間違えると大きなトラブルになる可能性がある
- カスタマイズ度合いによっては親テーマと齟齬が出てトラブルのもとになる
子テーマを使用すれば操作画面が一番広く使用できます。
また、設定次第ではJavaScriptなども利用できるのでカスタマイズの幅はかなり広がります。
しかし、子テーマに記述するための「テーマファイルエディター」はかなりデリケートな部分までカスタマイズ可能ですので、間違って親テーマに切り替えてしまって下手にいじると、最悪管理画面ごと使用不能になります。（サーバーから直接ファイルを操作すれば復旧することも可能です）
そのため、WordPressにかなり慣れてからでないとうかつに操作できない領域だと思っていただいた方がよいです。
CSSを書く場所は特に理由がなければ統一しよう！
ここまでCSSを変更できる４つの機能について解説しました。
冒頭でもふれたとおり、どれもメリット・デメリットが存在しますので、それを踏まえて操作していただけたらと思います。
最後に、保守管理の観点から考えると、CSSをバラバラの場所に書くのはお勧めしません。
特別な理由がない限り、記述する場所は統一しましょう！
