WordPress個別サポート
スポンサーリンク

WordPressの「追加CSS」メニューとは

「外観」-「カスタマイズ」メニューの「追加CSS」とは文字通り、サイトにCSSを追加するメニューで、用途はデザイン修正です。たとえば、グローバルメニューのフォントサイズを大きくしたい場合など、追加CSSのエディタにCSSを入力して解決することができます。

CSSを入力してデザインをカスタマイズできる「追加CSS」メニュー

CSSを入力してデザインをカスタマイズできる「追加CSS」メニュー

追加CSSが役立つケース

なぜデザイン修正するのに追加CSSが必要なのか、それは親テーマを直接修正しないことが重要だからです。

サイトのデザインをカスタマイズする場合、親テーマを直接修正するのは問題が起きるので子テーマを使うのが一般的です。

ただし、ちょっとした修正のために子テーマを作るのは面倒なこともあります。

WordPressで子テーマを作るメリットとデメリット

そんなときに、わざわざ子テーマを作らなくてもデザインをカスタマイズできる「追加CSS」メニューが役立ちます。

エディタにCSSを入力すればよく、子テーマも作らず親テーマも編集せずにデザインを修正することができます。

追加CSSが不要なケース

すでに子テーマでカスタマイズしている場合や、「CSSカスタマイズ」など同じようなメニューが存在する場合は「追加CSS」メニューを使う必要はありません。

とはいえ子テーマを使っている状況で追加CSSを使っても問題が起きるわけではないので、無理に1つにまとめる必要もありません。

追加CSSの使い方

「追加CSS」メニューの使い方は簡単です。メニューを開いてCSSを入力するだけなので、子テーマのstyle.cssにコードを入力するのと同じイメージです。結果をプレビューすることもできます。

入力したCSSの結果をプレビュー

入力したCSSの結果をプレビュー

「公開」ボタンをクリックすると完了です。サイトを表示して実際の画面を確認しましょう。

入力支援機能の活用

途中までCSSを入力すれば、候補を表示してくれるので便利です。フォントサイズを修正したいときに「fo」と入力すると、候補のCSSプロパティが表示され、リストから選ぶことができます。

入力候補が表示される

入力候補が表示される

入力ミスの指摘

入力したCSSが間違っていると、エラーメッセージが表示されたり、「保存する前に1個のエラーを修正してください」などの警告が表示される場合があります。すべて今すぐ修正する必要はありませんが、追加CSSエラーのアイコンが付いたエラーは明らかな間違いなので保存する前に修正した方が良いでしょう。

追加CSSがエラーで保存できない

CSSの間違いを指摘してくれる

追加CSSの注意レベルのエラーでも文法ミスの場合があるので、可能な範囲で修正しましょう。

よくわからなければWordPressメールサポートにご相談ください。

どのようなCSSを記述すれば良いか

「追加CSS」メニューはエディタなので、どのようなCSSを入力すれば良いかまでは教えてくれません。記述するCSSを組み立てるにはインスペクタのようなツールの使い方も合わせて理解しておいた方がよいでしょう。詳しくは以下のページも参考にしてください。

BizVektorのCSSの直し方(インスペクタの使い方から説明)

追加CSSの注意点

追加CSSを使う際の注意点をいくつか紹介します。

入力したCSSはテーマ依存

入力したCSSは現在のテーマに紐付いています。別のテーマに切り替えるとCSSは空になり、反映されません。

テーマを切り替えると追加CSSが空に

テーマを切り替えると追加CSSが空に

ただし、前のテーマで入力したCSSは消えたわけではなく、元のテーマに戻せば復活します。

入力したCSSの保存場所はデータベース

追加CSSで入力したCSSはデータベースに保存されます。子テーマのstyle.cssのようなファイルは存在しないのでFTPでダウンロードできません。注意してください。

余裕があればWordPressデータベースのwp_postsテーブルを開いてみてください。入力したCSSはcustom_cssというカスタム投稿タイプのデータとして保存されています。

追加CSSはデータベースに保存される

追加CSSはデータベースに保存される

データベースには過去のバージョン(リビジョン)も保存されているので昔のバージョンに戻したいときはデータベース内を探してみると良いかもしれません。

入力したCSSを保存できない

「公開」ボタンをクリックすると保存に失敗する場合はレンタルサーバーのセキュリティ機能のせいかもしれません。たとえば、ロリポップでは全ドメインでWAF(ウェブアプリケーションファイアウォール)が有効になっています。これを無効にしてみてください。

WAFを無効に

WAFを無効に

有効/無効の切り替えが反映されるまで5分くらいかかります。

エディタが使いづらいとき

コードを強調表示(シンタックスハイライト)するエディタが使いづらいときは、シンプルなエディタに切り替えることができます。

「ユーザー」‐「あなたのプロフィール」メニューで「コード編集中のシンタックスハイライトを無効化」をチェックします。

コード編集中のシンタックスハイライトを無効化

コード編集中のシンタックスハイライトを無効化

これにより、コードがハイライトされないシンプルなエディタになります。

追加CSSをシンプルなエディタに

追加CSSをシンプルなエディタに

CSSが反映されない

入力したCSSが反映されないのは追加CSSが原因というより、記述したCSSの問題です。主に文法ミスかCSSセレクタの優先順位の問題です。

詳しくは以下のページも参考にしてください。

WordPressでCSSが反映されないときのチェックポイント

まとめ

子テーマを作らずにデザインをカスタマイズできる「追加CSS」メニューは便利ですね。「テーマに紐付く」とか「ファイルに保存されない」などの特徴をおさえて活用しましょう。

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・ログインできない・サーバー移転 ... )
マンツーマンなので相談内容は自由です。いただいた課題を迅速に解決、CSSやPHPの修正にも対応します。気軽にご相談ください。
現在までの対応件数:1806件
WordPress講座の問い合わせ先
wordpress講座受講予約

関連記事

スポンサーリンク