WordPress個別サポート

WordPressのデザインをカスタマイズするには子テーマのstyle.cssを使うのが定番ですが、ここに入力したCSSは管理画面には反映されません。管理画面ではテーマのstyle.cssが読み込まれていないからです。この記事では、オリジナルのCSSを管理画面で読み込んでデザインを変更する方法を紹介します。

スポンサーリンク

管理画面のCSSを設定できるAdd Admin CSS

Add Admin CSSプラグインを使うと、メニューで直接入力するか、外部のCSSファイルを読み込む形式で、オリジナルのCSSを管理画面に反映することができます。

Add Admin CSSプラグインを使うには、「プラグイン」‐「新規追加」メニューからプラグインをインストール、有効化して「外観」‐「Admin CSS」メニューを開きます。

管理画面に読み込むCSSの設定(Add Admin CSS設定メニュー)

管理画面に読み込むCSSの設定(Add Admin CSS設定メニュー)

管理画面で読み込みたいCSSファイル名を指定(1)するか、個別のCSSを直接入力(2)することができます。ファイル名は「http://」から始まる絶対パスでも相対パスでも大丈夫です。

外部ファイルを読み込む場合、あらかじめ任意のファイル(例:admin-style.css)を作成して指定フォルダ(例:wp-content/themes/テーマ名)にアップロードしておきます。

アップロードするCSSファイルには、管理画面に適用したいCSSを入力します。以下に例を紹介します。

.wrap h2 {
    color: red;
}

入力したスタイルが管理画面に反映されます。

管理画面の項目見出しを赤くする

管理画面の項目見出しを赤くする

ついでに管理画面の背景色を変える例も紹介しておきます。

/* ダッシュボードメニューの背景色 */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
    background-color: #006600;
}
管理画面の背景色を変える

管理画面の背景色を変える

あとは自由にオリジナルのCSSを作成してください。

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

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート