WordPress管理画面の背景に任意の壁紙を設定する　～あなたも「このはモード」にしてみませんか？

by
ConoHaカスタマイズ＆プラグイン
（更新: 2026年5月1日）

本記事では、WordPressの管理画面の背景にこのはちゃんの壁紙を設定する方法を紹介します。
具体的には上の画像みたいな感じです。

もちろん美雲このは以外の壁紙でもできます。
ただConoHa使ってる方は、せっかくですし「このはモード」にしてみませんか？

※このはの画像につき、(C)GMO Internet, Inc.

天満川鈴 WRITTEN BY 天満川鈴
INDEX1,863 chars / 4 min

「このはモード」エディタ画面完成イメージ

通常画面は最初の画像を御参照ください。
エディタ画面はこんな感じになります。

どの画像を選んでも透明度を変えることで対処できます。

美雲このは壁紙のダウンロード先

美雲このは公式ページの壁紙コーナーからダウンロードできます。
https://conoha.mikumo.com/wallpaper/?btn_id=top–header_wallpaper
色々ありますのでお好きなものを選んで下さい。

実装手順

子テーマを使っていることを前提に説明します。

子テーマ直下に画像ファイルをアップロードする

ここでは名前を「conohawall.jpg」とします。

画像ファイルは予め圧縮して軽量化しておくこと！
圧縮はTinyPNGで。

TinyPNG – Compress AVIF, WebP, PNG and JPEG images
Free online image optimizer for faster websites! Reduce the file size of your AVIF, WEBP, JPEG and PNG images while preserving the image quality.
http://tinypng.com

なお、画像をアップロードし忘れると、とんでもないことになります。

美雲このはに去られた瞬間WordPressが動かなくなった | きもおた・わーどぷれす。
http://kimoota.net

functions.phpにコードを追記する

以下のコードを追記してください。

/*このは管理画面*/
// フックする関数
function custom_enqueue($hook_suffix) {
 if( 'post.php' == $hook_suffix ||
 'post-new.php' == $hook_suffix ||
 'edit.php' == $hook_suffix ||
 'index.php' == $hook_suffix) {
 // 読み込むCSSファイル
 wp_enqueue_style('custom_css', get_stylesheet_directory_uri() . '/custom.css');
 }
}
// "custom_enqueue" 関数を管理画面のキューアクションにフック
add_action( 'admin_enqueue_scripts', 'custom_enqueue' );

DigiPress様の参考記事

特定のWordPress管理画面でのみ独自のCSSやJavaScriptを読み込む方法
自作で WordPress のテーマやプラグインをつくる場合、管理画面だけに自前の CSS や JavaScript を読み込ませたいときがあります。 そんなときは WordPress のアクションフックを使って色々と方法がありますが、ここでは1回のアクション関数で CSS もスクリプトも読み込んで、さらに対象の管理画面も指定する方法をご紹介します。 テーマ制作時やカスタマイズするときのTipsにどうぞ。 WordPress の管理画面に独自の CSS や JavaScript を読み込む まずは基本。以下のようなコードをテーマの場合は　"function.php" に追記して管理画面に自前の…
http://digipress.digi-state.com

cssファイルを作成して子テーマ直下にアップロードする

「custom.css」という名前でcssファイルを作成。
以下のコードをコピペします。

.wrap {
 opacity: 0.9;
}
#edit-slug-box.hide-if-no-js {
 background-color: #FFF;
}
#wpwrap {
 background-image: url("conohawall.jpg") !important;
 background-position: center center !important;
 background-repeat: no-repeat !important;
 background-attachment: fixed !important;
 background-size: cover !important;
}

完成

ブラウザをリロードすると、このはモードになっているはずです。

  • エディタの文字が読みづらい
  • もっとこのはをくっきり見たい

などの場合は、CSSの以下の数値を調整してください。

 opacity: 0.9;

まとめ

美雲このは
美雲このは

簡単でしょ？
速い、安い、応援団長がかわいい♪
これであなたもConoHaを使いたくなぁ～る

もうConoHa使ってるから、この記事読んでくれてるんじゃないの？

天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X 🦋 CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa WING 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる