素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日:

【使いやすさ向上】WordPressの管理画面のCSSを変える方法

「Abel ツ Channel」開設!٩(ツ)و

この度、YouTubeチャンネルを開設しました!

ブログと並行してのんびりゲーム実況やら色々な動画を投稿していこうと思うので、よろしければ、
ポチィ〜!
して頂けるとこれ幸いです!٩(ツ)و

スポンサーリンク

336×280




管理画面のCSSを変更したい

基本的にはいじる事は無い

WordPressを使っている方は、基本的にサイト側のCSSを調整するためにテーマ内のstyle.cssを編集することがあると思います。

一方で管理画面側はほとんど完成しているのでそちらのCSSを修正したい、というケースはあまり無いと思います。

もちろんカスタマイズ可能

しかし、たまに管理画面の使いやすさを向上するために管理画面側のCSSを調整したくなることもあります。

例えば、以前紹介したSVG画像のアップロード対応の際に管理画面側でSVG画像が表示されない問題を解決するためにCSSをいじる必要があります。

ただ、テーマのstyle.cssのように管理画面上からいじることは出来ないので、ちょっと準備をする必要があります。

しかし、その作業もそんなに大変でも無いのでご紹介します♪

手順

管理画面用cssファイルの用意

まずは、管理画面用cssファイルを用意しましょう。
自分で追加したCSSを把握しやすくするためにファイルを分けて管理した方が今後幸せになるはずです。

今回はadmin-style.cssという名前で作成しました。

サーバーに転送

次に上記のCSSファイルをサーバーに転送しましょう。
転送先は以下のディレクトリです。
{Wordpressインストールディレクトリ}/wp-content/admin-style.css

テーマフォルダに配置しても良いですが、管理画面は全テーマ共通なのでwp-contentディレクトリに配置しました。br />この辺は好みなのでよしなにしちゃってください。

転送については、FTPソフトやSCPコマンドなどなんでも良いので、使い慣れているツールで配置してください。

こんな形になっていれば良いです。

functions.phpに追記

次に、functions.phpに上記のCSSファイルを読み込むような追記を行います。
以下のコードを追記してください。

これで準備は完了です。

確認

では、ブラウザでcssファイルが読み込まれているか確認してみましょう。

正常にCSSファイルが読み込まれるようになっていますね。
あとはこのCSSファイルに管理画面向けのCSSを記述していけば良いです。

終わりに

以上のように、簡単にWordPressの管理画面のCSSを調整出来るようになりました。
細かい部分を変えるだけでも記事の書きやすさや管理のしやすさが変わるので、こちらを参考にCSSを調整してみてください。

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , ,

blogenist

Author: blogenist