ナチュログのテンプレートカスタマイズ・ブログデザイン・ブログカスタマイズ記事1個目、ブログの看板画像（ページのタイトル画像）を差し替える方法です。

今回は使っている方も多いみたいなんで「緑という空間は癒しの場所(3カラム)」というテンプレートでやってみます。

まずはこのテンプレートの横幅を調べます。





スタイルシートの項目から　#container　を探します。今回の「緑という空間は癒しの場所(3カラム)」では下記になります。
width:960px;　の項目が横幅です。




#container{font-size:12px;
width:960px;
background:#FFF;
margin:0px auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #ccc;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
text-align:left;
}

ここはいじらないでOKです、確認だけ。

看板画像を作りましょう、横幅は960pxです。高さは任意でかまいません。
※横幅960pxの画像が作れない場合は「画像のリサイズ」等のキーワードで調べてみてくださいね。

出来上がった画像をブログ画像をアップロードするのと同じ方法でアップロードし、その画像のURLを調べます。








画像のURLがわかったらスタイルシートに書き足す文章を作ります。詳しくは割愛しますが下記文章を参考に作ってみてください。


/*CSSカスタマイズここから*/　・・・・　ここはコメントです。スタイルシートでは　/*　と　*/　の間の文章は読み込みませんので、後で改造した部分がわかりやすいように自分で適当な文章を書いておきます。

#banner{
background:url(ここに画像のURLを貼り付けます) ;
height: ○○○px;　・・・・・作成した画像の高さを記述
}

今回は960×450の画像を使用したので、実際に記述する文章はこんな感じです。

/*CSSカスタマイズここから*/

#banner{
background:url(//img01.naturum.ne.jp/usr/s/h/i/shipponacss/960-450.jpg) ;
height: 450px;
}

この文章をスタイルシートの一番最後に記述します。（ここは重要です）




スタイルシートには優先順位があって、基本的に後に書かれたものの方が優先度が高いので、最後に記述すればオリジナルを変更しなくても大丈夫です。

オリジナルをいじると訳がわからなくなる場合があります、出来れば修正分を追記するという方法がおすすめです。

不具合が出た場合は

/*CSSカスタマイズここから*/　より下に書き足した文章に問題があるので修正します。

直らない場合は書き足した部分を消してしまえば元に戻ります。


他のテンプレートは確認していませんが

「緑という空間は癒しの場所(3カラム)」の場合


■横幅960pxの画像を作成する。
↓
■画像をアップロードして画像のURLを確認する。
↓
■スタイルシートの最後に下記文章を追加する

/*CSSカスタマイズここから*/

#banner{
background:url(//img01.naturum.ne.jp/usr/s/h/i/shipponacss/960-450.jpg) ;
height: 450px;
}

※画像URL、高さは自分の環境に書き換えてくださいね。

↓
■登録ボタンでスタイルシート変更内容を反映

この作業でオリジナル看板画像が表示されます。




今回はスタイルシートだけの変更でした。「トップページ」「個別記事」「アーカイブ」はHTMLといって、各ページで実際に表示される項目を指定します。スタイルシートはCSSと呼ばれていて、HTMLを装飾するファイルになります。


1個目終わりです、キャンプ記事より疲れてしまった　(・・；)