この記事を要約すると・・。
![【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法](https://syopura.com/wp-content/uploads/2020/04/image-51-1024x595.jpg)
普通の記事ではいつものヘッダーロゴ画像ですが・・・。
![【簡単4ステップ】カテゴリーごと・記事ごとにヘッダーロゴ画像を変える方法](https://syopura.com/wp-content/uploads/2020/04/image-41-1024x608.jpg)
特定のカテゴリのみ、ヘッダーの画像を変更します。
カテゴリーごとにヘッダーロゴ画像を変更したい!
![カテゴリーごとにヘッダーロゴ画像を変更したい!](https://syopura.com/wp-content/uploads/2020/04/image-28.png)
これがショープラのヘッダーです。とっても気に入っています。
ただ、あまりに雑記ブログのため「シゲキとオシャレとオカネのこと」というサブテーマにそぐわない記事も出てきています。
例えば、私はうつ病についての記事も書いています。
ただ、そこに来た人が仮にいい記事だったとしても
![](http://syopura.com/wp-content/themes/cocoon-master/images/obasan.png)
う~ん、お金やおしゃれ?
本当にうつのことわかっているのかしら?
と思ってしまっても仕方ありません。というわけで、この悩みを解決するために、
【カテゴリごとでヘッダーを変える】チャレンジをしたいと思います。
![ミッツ](https://syopura.com/wp-content/uploads/2020/02/コメント-2019-11-10-003625.png)
調べるのはすごく時間がかかったけど、意外と簡単だからみんなやってみよう!
カテゴリごとにヘッダーを変える方法
![](https://syopura.com/wp-content/uploads/cocoon-resources/blog-card-cache/329324bbf1e458ba47aff45ab90c81a4.png)
こちらのサイトを参考にさせてもらいました。
工程1 ヘッダーを作る
私はここで作成しています。(もちろん別の方法で作っても構いませんよ。)
![ヘッダーロゴ画像を変える方法 工程1 ヘッダーを作る](https://syopura.com/wp-content/uploads/2020/04/image-40-1024x427.jpg)
うんうん、いい感じでできました。サイトにアップロードしましょう。
![ヘッダーロゴ画像を変える方法 工程1 ヘッダーを作る](https://syopura.com/wp-content/uploads/2020/04/image-47-1024x226.png)
工程2 アップロードしたURLをコピー
ワードプレスに戻って、【メディア】➡【新規追加】➡【ファイルを選択】でアップロードします。
![カテゴリごとにヘッダーを変える方法 工程2 アップロードしたURLをコピー](https://syopura.com/wp-content/uploads/2020/04/image-48.png)
編集をクリックして
![カテゴリごとにヘッダーを変える方法 工程2 アップロードしたURLをコピー](https://syopura.com/wp-content/uploads/2020/04/image-50.png)
【ファイルのURL】をどこかにコピペしておきましょう。これで下準備は完成です。
![](https://syopura.com/wp-content/uploads/2020/05/image-45.png)
![](https://syopura.com/wp-content/uploads/2020/05/image-44.png)
工程3 Header Footer Code Manager ダウンロード
詳しい人は元のPHPをいじって編集できると思いますが、ほぼPHPのことが分からないので、プラグインを利用します。
【プラグイン】 ➡ 【新規追加】で 「Header Footer Code Manager」を検索。
![Header Footer Code Manager ダウンロード 使い方](https://syopura.com/wp-content/uploads/2020/04/image-43.png)
カテゴリや記事ごとにスクリプトを変更するためのプラグインです。
見つかったのでダウンロード・有効化しましょう。
![](https://syopura.com/wp-content/uploads/2020/04/image-38.png)
ダウンロード・有効化が完了すると、左のところに【HFCM】というところが出てきます。「Add New Script」をクリックします。
![Header Footer Code Manager ダウンロード 使い方](https://syopura.com/wp-content/uploads/2020/04/image-39.png)
工程4 スクリプトを打ち込む
すると設定画面がでてきます。Site Displayの欄を【Specific Categories】に。私はカテゴリごとに変更しましたが、特定の記事で画像を変えたいときには【Specific Post】を選択しましょう。
そして Category List で自分の記事の中でヘッダー画像を変更したいカテゴリを選択します。
![Header Footer Code Manager ダウンロード 使い方](https://syopura.com/wp-content/uploads/2020/04/image-46.png)
その下にスクリプトを入力する欄があるので、こんな感じで入れていきます。
(素人に毛が生えたようなものなので、すごく汚いコードだと思います。もっとよくできる人いたらコメントください・・。)
![Header Footer Code Manager ダウンロード 使い方](https://syopura.com/wp-content/uploads/2020/04/image-45.png)
以下コードですが、【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>
ヘッダーロゴの画像が変わった!
![ヘッダーロゴの画像が変わった!](https://syopura.com/wp-content/uploads/2020/04/image-41-1024x608.jpg)
![ミッツ](https://syopura.com/wp-content/uploads/2020/02/コメント-2019-11-10-003625.png)
やったぞー!
苦節10時間・・・。長かった・・・。
ブログ人気関連記事はこちら