Wordpress
PR

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

にゃん花子
記事内に商品プロモーションを含む場合があります

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

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

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

このブログで知れること

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

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

Google広告

出来上がりのイメージ

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

ロゴを変更するステップ

ステップ全部で3つです

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

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

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

Step3の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について少し補足していきます。

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

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

Google広告
ABOUT ME
にゃん花子
にゃん花子
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め|文系から独学でWeb屋さんになった人|インフラ分野のわかるWebディレクター|主にWordpressのサイト立ち上げ、リプレイス、運用をしています|Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中|小学1年生の壁に負けじと2024年も奮闘します
Google検索
記事URLをコピーしました