管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。
「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くなってしまって、逆にテキスト多のカラムが短いままで全体的に縦長になってしまうことありますよね。そこで、ここのスタイルを変更しようと思い立ちました。
変更内容
対象の「投稿一覧」のテーブルのカラム幅ですが、/wp-admin/css/admin.css内に記載されています。table-layout: fixedとなっているため、カラムが追加されると狭いままになってしまいます。そこで、autoに変更しました。
/* wp-content/theme/[テーマ名]/styles/wp-admin.css*/ table.fixed { table-layout: auto; }
プラグイン「Add Admin CSS」を使用して変更する
Add Admin CSSを使用すると管理画面に対して使用するCSSファイルもしくはCSSスタイルを追加することができます。Add Admin CSS
管理画面のCSSファイル(子テーマ)を作成して変更する
管理画面のCSSファイルは【/wp-admin/css】下に配置されています。ここのファイルはWordpress自体がアップグレードされる時に上書きされてしまうので、これも子テーマフォルダ下で管理するようにします。
テーマ下に空CSSファイルを作成し、そこに変更したい要素のスタイルを追加していきます。
このCSSは/wp-admin/css/下のCSSを読み込んだ後読み込まれるため、変更する部分だけ記述して下さい。
あとは、このCSSを読み込みなさいという処理を追加するだけです。
functions.phpへ以下を追記して下さい。
[php][/php]
// wp-content/theme/[テーマ名]/functions.php function wp_custom_admin_css() { $url = get_settings( 'siteurl'); $url = $url . '/wp-content/themes/[テーマ名]/styles/wp-admin.css'; echo '<!-- custom admin css --> <!-- /end custom adming css -->'; } add_action( 'admin_head', 'wp_custom_admin_css', 100);
**[テーマ名]は置き換えてください。
CSSファイル名は何でもいいですが変更対象CSSを対応させるため同じにしています。(変える場合は$urlで定義しているcssファイル名を変えて下さい。)
これで少しスッキリすると思います。
今回、一例を挙げてWordpress管理画面のCSS変更方法を投稿してみました。その他スタイルも同様の方法で変更できますので、「管理画面のここのスタイル気になる」という場合は、変更してみてはいかがでしょうか。
また、こんなことしなくても管理画面のスタイルをカスタマイズするためのプラグインもあるようなので探してみてもいいかもしれません。
関連記事
-
-
titleタグ(wp_title) カスタマイズ
SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが
-
-
Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止
TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの
-
-
アバターサイズの変更など Twenty Twelve 1.3での変更点
Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel
-
-
折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」
「Arconix Shortcodes」は、投稿内にショートコードでいろいろな要素を実装できるプラグインです。ダウンロードはこちらからできます。ダウンロード・解凍してpluginsディレクトリにアップ
-
-
「All in One SEO Pack」を代替するための準備
「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ
-
-
「最近の投稿」ウィジェット カスタマイズ
目次 ウィジェットを削除 標準の設定 特定のカテゴリーに属する投稿を除外 カスタマイズ プラグイン 「最近の投稿」ウィジェットを削除 「最近の投稿」ウィジェット
-
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
-
ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ
プレビューはこちら ダウンロード 目次 ヘッダー画像の高さを変更 アイキャッチをアップロード h1タグがやたら多いので最適化 画像をレスポンシブ対応 フォント「Sorts Mill
-
-
テーマ ブックマーク 2013
2012 フリーテーマ トップ 20 Top 20 Free WordPress Themes of 2012 http://ow.ly/wMGjZ ハイクオリティフリーテーマ 3月 20 Top
-
-
ウィジェット関連のカスタマイズ・プラグイン
リンクマネージャー WordPress 3.5バージョンアップ以降にリンクマネージャーを追加するには以下のフィルタを設定もしくはプラグインをインストールして下さい。 プラグイン Link M
Comment
wp管理画面
https://t.co/eGysK1jqmm
管理画面のCSSをカスタマイズ https://t.co/cfHIJq36ZZ #pocket2twitter
レスポンシブの管理画面を無効化したい https://ja.forums.wordpress.org/topic/137463
1件のコメント http://t.co/MwHDsboBvR “WordPress | 管理画面のCSSをカスタマイズ | Think deeply, Do less, More effective” http://t.co/3USvD1YnGh
管理画面
テーマ下に空CSSファイルを作成し、そこに変更したい要素のスタイルを追加していきます。 このCSSは/wp-admin/css/下のCSSを読み込んだ後読み込まれるため、変更する部分だけ記述して下さい。