本記事では、WordPressの管理画面の背景にこのはちゃんの壁紙を設定する方法を紹介します。
具体的には上の画像みたいな感じです。
もちろん美雲このは以外の壁紙でもできます。
ただConoHa使ってる方は、せっかくですし「このはモード」にしてみませんか？
※このはの画像につき、(C)GMO Internet, Inc.
「このはモード」エディタ画面完成イメージ
通常画面は最初の画像を御参照ください。
エディタ画面はこんな感じになります。
どの画像を選んでも透明度を変えることで対処できます。
美雲このは壁紙のダウンロード先
美雲このは公式ページの壁紙コーナーからダウンロードできます。
https://conoha.mikumo.com/wallpaper/?btn_id=top–header_wallpaper
conoha.mikumo.com
色々ありますのでお好きなものを選んで下さい。
実装手順
子テーマを使っていることを前提に説明します。
子テーマ直下に画像ファイルをアップロードする
ここでは名前を「conohawall.jpg」とします。
画像ファイルは予め圧縮して軽量化しておくこと！
圧縮はTinyPNGで。
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Free online image compressor for faster websites! Reduce the file size of your W...
tinypng.com
なお、画像をアップロードし忘れると、とんでもないことになります。
美雲このはに去られた瞬間WordPressが動かなくなった
本記事は私のトラブルシューティング奮闘記。 釣り感満載なタイトルの意味は、お読みいただければわかります。 最初に断っておきますと、トラブルの原因は人災。 その点...
wordpress.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 を読み込ませたいときがあります。 そんなと...
digipress.info
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使ってるから、この記事読んでくれてるんじゃないの？
