当ブログではアフィリエイト広告を利用しています

ファンブログ

ファンブログにおけるオリジナルヘッダー画像の設定方法。設定のポイントとは？



ファンブログのスマホ用テンプレートを「シンプル」からオリジナルヘッダー画像設定用テンプレートに変更しました。私のファンブログを小さなスマホ画面で見ると寂しい感じがするため、ヘッダー画像を使用しで少しでも華やかな雰囲気にしたかったからです。

今回の記事では、ファンブログにおけるオリジナルヘッダー画像の設定方法とポイントをまとめました。

オリジナルヘッダー画像にするメリット

ファンブログを見ているとオリジナルのヘッダー画像にしている方は少ないように思われます。
オリジナルヘッダー画像にするメリットは、初めてサイトに訪れた方の「第一印象」が違うということです。
「第一印象」がよければ、それだけで記事を読んでもらうことができるかもしれません。逆に、「第一印象」が悪ければ、せっかく訪れてくれた方がサイトからすぐ離れていってしまうでしょう。

ファンブログのテンプレート

ファンブログのテンプレートは、スマートフォン用とＰＣ用にそれぞれテンプレートを選択する必要がありますが、オリジナルヘッダー画像を設定する為には、それぞれ次のテンプレートを選択する必要があります。

スマートフォン用テンプレート

スマートフォン用テンプレートとして使用するのは、「ヘッダー画像対応」テンプレートになります。

ＰＣ用テンプレート

ＰＣ用テンプレートとして使用するのは、「カスタム向け０１」テンプレートになります。

ヘッダー画像の設定

テンプレートを選択したら、ヘッダー画像を設定してみましょう。手順とポイントについて述べていきます。

設定手順

設定手順については、実は公式サイトに詳しく解説があります。ただ、その場所が分かりにくいだけです。
「ヘルプ」画面のサイドにある「ブログアフィリエイトのポイント教えます」のメニューを開くとそれぞれ設定方法があります。

スマホ用の設定

メニュー「６」の（３）の「スマートフォンでもオリジナルのデザインに」に手順がのっています。

ＰＣ用の設定

メニュー「５」の（２）の「ヘッダー画像を変えてみよう」に手順がのっています。
ＰＣ用テンプレートの「ＣＳＳの編集」について詳細をまとめた記事を作成しました。
もしよろしかったら、こちらも一読してみて下さい！
　　　　↓
【２０１９版】ファンブログのＰＣ用テンプレートのヘッダーのカスタマイズ！「オリジナル画像」「文字の大きさ」「文字の位置」！

設定のポイント

１．ＣＳＳの編集を行う際はバックアップを取りましょう。

過去に本テーマで運用し、ＣＳＳ編集を行ったことがある場合は、事前にバックアップを取りましょう。バックアップはＣＳＳを全選択コピーし、メモ帳などに貼り付けて保存しておきます。修正後、動作や表示がおかしかったら、バックアップからコピーして戻します。
（ＣＳＳの変更を特にしていないのであれば、「初期値に戻す」で戻してもＯＫです）

２．画像を挿入する位置を探す時には、「Ｃｔｒｌ」＋「Ｆ」キーを活用しましょう！

スマホ用の場合手順の中で、
スタイルシートの中から「ブログヘッダー画像」の見出しを探し、
という箇所があります。（ＰＣ用手順にも同様の部分が有ります）
なれないスタイルシートの中から探し出すのは大変です。
そこで、スタイルシートを開いたまま「Ｃｔｒｌ」＋「Ｆ」キーを押してみましょう。
すると画面左上に検索ボックスがでてきますので、ここに「ヘッダー」などと打ち込めば一瞬で該当行を見つけてくれます。また、これにより挿入する箇所のミスも低減できますので、是非活用してみて下さい。



３．画像の大きさに注意が必要です。

ヘッダー画像に使用する画像の大きさが決まっています。
・スマホ用・・・・幅８５０ｐｘ程度
・ＰＣ用・・・・・幅１０００ｐｘ程度
大きさがあまりに違うと、イメージと違う仕上がりになってしまうので、注意が必要です。

オリジナルヘッダー画像を使用した様子

下記は、「ヘッダー画像対応」テンプレートを使用した私のファンブログです。（サイト名などは、撮影用にサンプル名になっています）
「シンプル」テンプレートに比べると、華やかな雰囲気を出すことができたと思います。










最後に

ヘッダー画像はブログの顔であるとも言えます。ブログサイトのイメージを大きく変える可能性もあります。
人気ブロガーのサイトは、記事だけでなくヘッダー画像設定もとても参考になりますので、見逃さないようにしましょう。