ログイン画面のロゴを変更する

WordPress

デフォルトではWordpressのロゴ「W」は「.login h1 a」に背景画像で読み込まれています。

ログイン画面用のCSSをfunctions.phpに読み込む設定を入れて、CSSで差し替えたいロゴを指定します。

コード例

/* ログイン画面のロゴを変更 */
.login h1 a {
  background-image: url(ここに差し替えたい画像);
  background-size: 100% auto;
  width: 200px;
  height: 40px;
  pointer-events: none; /* リンクを無効に */
}

ロゴのサイズに合わせて、横幅・高さ・背景画像のサイズを変更してください。

元の指定

ちなみにデフォルトの指定では、84pxの正方形です。

.login h1 a {
  background-image: none, url(../images/wordpress-logo.svg);
  background-size: 84px;
  width: 84px;
  height: 84px;

  /* ここは好みで上書き */
  background-position: center top;
  margin: 0 auto 25px;
}

この記事の執筆・検証

シゴトノコバコ編集部

Web制作10年以上。コーポレートサイト、大手企業LPなど構築をメインに実務経験あり。デザイン/印刷の実務経験も多少あり