管理画面の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変更方法を投稿してみました。その他スタイルも同様の方法で変更できますので、「管理画面のここのスタイル気になる」という場合は、変更してみてはいかがでしょうか。
また、こんなことしなくても管理画面のスタイルをカスタマイズするためのプラグインもあるようなので探してみてもいいかもしれません。

  • このエントリーをはてなブックマークに追加

関連記事

多言語化プラグイン「qTranslate」

ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang

Twenty Ten カスタマイズ

Twenty Tenのカスタマイズについてのまとめです。 目次 コンテンツナビゲーション 非表示 「投稿日」を非表示 「作成者(投稿者)」を非表示 "コメントをどうぞ"("leave a

RSS/Atomフィード カスタマイズ

RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿:投稿のフィード @全てのページ サイトのコメント:

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止

TwentyThirteenでは、テーマ用のフォントとして「Source Sans Pro」と「Bitter」というフォントをGoogleフォントから引っ張ってきて使用されるようです。 ちなみにどの

「All in One SEO Pack」を代替するための準備

「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ

Twenty Twelve サイトタイトルをテキストから画像に置き換え

ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの

Twenty Thirteen カスタマイズ

WordPress 3.6のデフォルトテーマである「Twenty thirteen」のカスタマイズをまとめて投稿します。 Twenty thirteenのカスタマイズネタがあまりないです。(それだけ

Twitterのツイートボタンの設置

Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

Comment

  1. テーマ下に空CSSファイルを作成し、そこに変更したい要素のスタイルを追加していきます。 このCSSは/wp-admin/css/下のCSSを読み込んだ後読み込まれるため、変更する部分だけ記述して下さい。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑