ログイン画面でオリジナルのロゴを表示する方法【初心者向け】

web

皆さんこんばんわ!バジラです!

今回はちょっとした小技ですね!wordpressのログイン時に自前のロゴを表示する方法をご紹介します!めちゃくちゃサクッとできますので、ぜひ実装しましょう!

これがあると自分のHPだ!感が非常に強くなってログイン時のテンションが上がります!モチベーションって大事ですからね!

クライアント関連の作業にしても、こういう小さな気遣いが次につながるんじゃないかと僕は信じていますし、少なくとも僕はこういう心遣いをされると嬉しいですね!

作業量の割に、見た目的な派手さがあるというか、華やかさがを感じます。ブログ・HP管理者は必ず見る部分ですし、記事冒頭にも書いた、自分(クライアント)のHP感を強く印象付けられますね!

それでは記事へ参りましょう!

こうなります!

まずは結果を見てみます!

はい!このブログの左上にあります、buzzilla.netのロゴをログイン画面に設定してみました!いいでしょう!格好いいでしょう!モチベーションが上がるでしょう!

んで、実装は下記!

これがコードだ!

function.php

function custom_login_logo() {
  echo '
   <style type="text/css">
    h1 a {
     background: url("画像のパス(URL)") 50% 50% no-repeat !important;
     background-size: 320px 41px !important;
     width: 320px !important;
     height: 41px !important;
    }
   </style>
  ';
}
add_action( 'login_head', 'custom_login_logo' );

こんな感じですね!
管理画面内の設定と考えるとなにやら難しく捉えられがちですが、そんなことは全然ないんですよね!めちゃくちゃ簡単です!

ログイン画面で表示されるロゴは、div id=”login“っていうので包まれているのですが、それが320pxなんですよね!

大きくしてもいいんでしょうが、ごちゃごちゃいじって失敗するよりは、widthは320pxにした方が安牌!すぐ下にある入力フォームと横幅も揃って、見た目も綺麗ですしね!
んで、比率は変えない方がかっこいいので、heightはwidth:320px時の数値に合わせる!background-sizeのwidth,heightは先のサイズを同じに設定!

これを外観→テーマファイルエディタから、使用しているテーマのfunctions.phpに張り付けます!メディアライブラリに画像を登録している方は、ロゴ画像をクリックしたら「URLをクリップボードにコピー」ボタンで、画像のパス(URL)が取得できますyo!

ロゴ画像のwidthは320pxに!
heightはwidth:320pxの時のものに合わせよう!(今回は41px)

まとめ

はい!どうでしょう!

僕は他のブログも併せて、かれこれ計10年くらいブログ運営を行っているのですが、ブログ運営を長く続けるために必要なのは、紛れもなく続ける力!継続力ってやつですね!

その継続する力ですが、どれだけ忍耐力や意欲がある人でも必ず波があります。ぎゃんぎゃんにブログ運営を続けるためにも、こうした細かい所でのモチベーションアップはするべきだと思うんですよね!僕がちょこちょこグラドルの画像を使ったりするのは、皆さんに楽しんでもらいたいってのもありますが、もちろん僕自身が楽しみたいってところもありますから!

それでは!今回はこの辺で終わりにしようと思います!それではー(^q^)ノシ

タイトルとURLをコピーしました