ブログカスタマイズでブログ愛を高めよう！ヘッダーの背景画像変更方法

まずは背景に使う画像を用意します。
とっておきの画像を用意してください。
ただ、注意が必要なのはこのテンプレートはPC画面で見ると背景画像がブラウザの画面左右いっぱいに広がります。
なのであまり小さい画像を使うとぼやけてしまいます。
大きい画像を用意しましょう。
1,920pxもあれば大丈夫。(ナチュログの画像アップロード最大サイズは2,040px)

用意した画像はナチュログの画像一覧にアップロードしておいてください。

PCでのヘッダー画像の見え方なんですが、画面左右いっぱいに写真が広がるので写真全体を表示しようとすると↑の画像のように画面いっぱいが背景画像に占領されてしまいます。
トップの画像が大きすぎてあまり見た目的にもよくないですね。

なので画像の上下を隠して（トリミングして）見える部分を小さくしています。
画像を用意する時は、こういった見え方になるということをちょっと覚えていてください。

それでは用意した画像を表示されるようにテンプレートを変更していきます。スタイルシートに画像urlを貼り付けて高さを指定するだけですので、そんなに難しいことではないです。

1. スタイルシートの該当部分を探します。
   • 97行目あたり(スマートフォン・タブレット共通の設定)
     /*ブログタイトル*/
     #header_top{
     height: 0;
     padding-top: 44.5%;/*ヘッダー画像の高さ→画像の高さ÷横幅×％を指定*/
     background: url(http://◯◯◯.jpg) 0 0 no-repeat;/*背景画像ｕrlをｕrl（）の中に入力*/
     background-size: cover;
     }
   • 967行目あたり(PC用の設定)
     #top_d {
     height: 0;
     background: url(http://◯◯◯.jpg) no-repeat 50% 80%/*2番めの80%で高さを調整*/
     background-size: cover;
     padding-top:350px;
     max-width:100%;
     }
2. スタイルシートの探し出した箇所にある（http://◯◯◯.jpg）と書かれている所にアップロードしておいた画像のurlを入力します。
   ※（）は消さないで！
3. 続いて画像の高さを指定します。
   スマートフォン・タブレットの設定にはpadding-top: 44.5%;の44.5%という数値を用意した画像の（高さ÷横幅×100）％の数値を入力してください。
   PCの設定は単純に見栄えのいい数値を入れてください。
4. 最後にPC用にだけ微調整が必要です。
   ↑にも書きましたがPC用は画像の上下を隠して（トリミングして）見える範囲を小さくしているので、80%と書かれている箇所を調整(→見える位置を上下に動かす)して、一番きれいに見えるように調整してください。

以上でテンプレートの更新は完了です。

ヘッダーの背景画像の変更方法についで問い合わせが多いのが、PC用の表示でヘッダーの背景画像がコンテンツの幅と同じにしたいというリクエストです。

背景が画面左右いっぱいに広がる設定を頑張って考えたのに使っていただけないのは残念ですが...
変更方法をこちらに記しておきます。
（2017年1月23日以前にテンプレートをご利用の方は最新のスタイルシートに更新しておいてください）
2017年2月20日：設定方法に誤りがありましので訂正しました

1. スタイルシートの該当部分を探して書き換えます。
   • 967行目あたり
     #top_d {
     height: 0;
     background: url(http://◯◯◯.jpg) no-repeat 50% 80%;/*2番めの50%で高さを調整*/
     background-size: cover;
     padding-top:350px;
     }
   上記を
   #top_d {
   max-width:1080px;
   } に書き換えてください。
2. さらにその下にある
   • #header_top{
     border-radius: 10px;
     background-image: none;
     padding-top: 0;
     }
   の
   • background-image: none;
     padding-top: 0;
   を削除してください。

以上でテンプレートの更新は完了です。
テンプレートのカスタマイズはスタイルシートに詳しい方のみ行ってください。

今回紹介したテンプレートのカスタマイズは、僕の公開しているテンプレートについての方法です。
僕の公開しているテンプレートはレスポンシブデザインで使っていただいている方からはスマフォやタブレットでとても見やすくなったと嬉しい声を頂いております。
よろしかったらどうぞｗ