2024.03.01 2024.03.19

WordPressで特定ページだけヘッダーのロゴを変える方法【CSSだけ、コピペOK】

にゃん花子

[chat face=”3fukidashi.png” name=”にゃん花子” align=”right” border=”none” bg=”red”] 簡単にヘッダーのロゴを変えたいにゃん[/chat]

特定の固定ページだけ、スポットでロゴを変更したい場合に、CSSでちょこっと変更できる小技です。

header.phpやfunction.phpを変更する必要がないので、「phpファイルは変更したくない」方には、おすすめです。

このブログで知れること

cssだけで、ヘッダーのロゴを変更する方法

※今回のデモサイトでは、Wordpressテーマ jinを使用しています

出来上がりのイメージ
ロゴを変更するステップ

出来上がりのイメージ

ヘッダーのにゃん花子画像が、1ページだけ帽子を被ったロゴに変更されます。

ロゴを変更するステップ

ステップ全部で3つです

変更後に表示したいロゴ画像を準備する
変更したいページを作成する
CSSでページIDを指定し、ロゴを差し替える

変更したい画像を準備する

ロゴとして表示したい画像を準備し、メディアライブラリにアップロードしておきましょう。

Step３のCSSファイルで、メディアのURLが必要ですので、URLをクリップボードにコピーしておきます。

ロゴを変更したいページを作成する

続いて、ロゴを変更したいページを作成します。ページ作成後、ページidが必要になるため、チェックしておきましょう。

ページIDの確認方法は、「固定ページ一覧」からIDを確認するか、「編集ページのURL」でも確認することができます。

「固定ページ一覧」からIDを確認 ↓

「編集ページのURL」からページIDを確認 ↓

CSSでページIDを指定し、ロゴを変更する

最後に、CSS表記でロゴを変更しましょう。JINであれば、カスタムCSSを追記できますので、そちらを利用します。

ダッシュボード > 外観 > カスタマイズ > 追加CSS を選択し、下記CSSを表記しましょう。

※ページIDを4箇所、画像URLを1箇所変更してください。

/***ロゴを変える****/
.page-id-ページID #site-info .tn-logo-size > a img ,.page-id-ページID #site-info .sp-logo-size > a img{
visibility: hidden;
}
.page-id-ページID #site-info .tn-logo-size > a ,.page-id-ページID #site-info .sp-logo-size > a{
display: inline-block;
background: url("変更後に差し替えたいロゴ画像のURL") no-repeat;
background-size: contain;
background-position: center;
}

CSSについて少し補足していきます。

Jinでは、PCとSPでそれぞれロゴのcssクラスがあります。まずは、そちらのクラスを利用して、全体で指定しているデフォルトのロゴ画像を「visibility:hidden;」で非表示にします。
※PC・SPでそれぞれclassがあるため、非表示時に2箇所ページIDを変更します。
続いて、先ほど非表示で使用したclassに、差し替えたいロゴ画像を指定して、表示させています。
※PC・SPでそれぞれclassがあるため、再表示時に2箇所ページIDを変更します。

これで終了です！対象ページが多くなると面倒なので、phpファイルの編集もお試しくださいね。

#Jin

ABOUT ME