【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法

【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法Wordpress

この記事を要約すると・・。

 

【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法

 普通の記事ではいつものヘッダーロゴ画像ですが・・・。

 

【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法

 

特定のカテゴリのみ、ヘッダーの画像を変更します。

 

カテゴリーごとにヘッダーロゴ画像を変更したい!

  

カテゴリーごとにヘッダーロゴ画像を変更したい!

 

これがショープラのヘッダーです。とっても気に入っています。

 

ただ、あまりに雑記ブログのため「シゲキとオシャレとオカネのこと」というサブテーマにそぐわない記事も出てきています。

 

例えば、私はうつ病についての記事も書いています。

ただ、そこに来た人が仮にいい記事だったとしても

 

う~ん、お金やおしゃれ?

本当にうつのことわかっているのかしら?

 

と思ってしまっても仕方ありません。というわけで、この悩みを解決するために、

カテゴリごとでヘッダーを変える】チャレンジをしたいと思います。

 

ミッツ
ミッツ

調べるのはすごく時間がかかったけど、意外と簡単だからみんなやってみよう!

 

カテゴリごとにヘッダーを変える方法

  

特定の記事やページのヘッダやフッターにコードを挿入!プラグインを使えば簡単にできる | ネットビジネスで自由に生きる!会社を辞めて海外にいながらブログで稼ぐJINのサイト
この記事このページのヘッダーだけにコードを入れたい、という場合、PHPで実現しなくてもプラグインを使えば一瞬でできる。「Header Footer Code Manager」というプラグインが便利で、javascriptやWebフォントなど、この記事だけに入れたい、なんてことは簡単。ここではその詳細を具体的に解説。

 

こちらのサイトを参考にさせてもらいました。

 

工程1 ヘッダーを作る

 

Attention Required! | Cloudflare

 

私はここで作成しています。(もちろん別の方法で作っても構いませんよ。)

 

ヘッダーロゴ画像を変える方法 工程1 ヘッダーを作る

  

うんうん、いい感じでできました。サイトにアップロードしましょう。

 

ヘッダーロゴ画像を変える方法 工程1 ヘッダーを作る

 

工程2 アップロードしたURLをコピー

 

ワードプレスに戻って、【メディア】➡【新規追加】➡【ファイルを選択】でアップロードします。

 

カテゴリごとにヘッダーを変える方法 工程2 アップロードしたURLをコピー

  

編集をクリックして

 

カテゴリごとにヘッダーを変える方法 工程2 アップロードしたURLをコピー

 

【ファイルのURL】をどこかにコピペしておきましょう。これで下準備は完成です。

  

工程3 Header Footer Code Manager ダウンロード

   

詳しい人は元のPHPをいじって編集できると思いますが、ほぼPHPのことが分からないので、プラグインを利用します。

 

【プラグイン】 ➡ 【新規追加】で 「Header Footer Code Manager」を検索。

  

Header Footer Code Manager ダウンロード 使い方

 

カテゴリや記事ごとにスクリプトを変更するためのプラグインです。

見つかったのでダウンロード・有効化しましょう。

 

 

ダウンロード・有効化が完了すると、左のところに【HFCM】というところが出てきます。「Add New Script」をクリックします。

 

Header Footer Code Manager ダウンロード 使い方

 

工程4 スクリプトを打ち込む

 

すると設定画面がでてきます。Site Displayの欄を【Specific Categories】に。私はカテゴリごとに変更しましたが、特定の記事で画像を変えたいときには【Specific Post】を選択しましょう。

 

そして Category List で自分の記事の中でヘッダー画像を変更したいカテゴリを選択します。

 

Header Footer Code Manager ダウンロード 使い方

 

その下にスクリプトを入力する欄があるので、こんな感じで入れていきます。

(素人に毛が生えたようなものなので、すごく汚いコードだと思います。もっとよくできる人いたらコメントください・・。)

 

Header Footer Code Manager ダウンロード 使い方

 

以下コードですが、【img src】以降は先ほど作った画像のURL

【alt】以降は適当に打ち込んでください。

” ”(ダブルコーテーション)は2つとも消しちゃだめですよ。

 

<style type="text/css">
.logo-header {
display: none;
}
</style>
<header>
<div class="head-logo"><img src="https://〇〇〇.png" alt=" ショープラ うつ病との付き合い方(ここはヘッダー画像のタイトル的なものだと思ってください。)"></div>
</header>

<style type="text/css">
.head-logo{
text-align: center;
}
</style>

 

ヘッダーロゴの画像が変わった!

 

 

ヘッダーロゴの画像が変わった!

  

ミッツ
ミッツ

やったぞー!
苦節10時間・・・。長かった・・・。

 

ブログ人気関連記事はこちら

 

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