彼此ともつかぬ場所

　当ブログの共有テンプレートは、カスタマイズ自由です。

　自分の作ったデザインにこだわりがないわけではありませんが、私がお気に入りの画像を使ってテンプレートを飾りたい、と思うのと同じように、ユーザの皆さんもそれぞれお使いになりたい画像があるだろう、と思うからです。自分だけのオリジナル・テンプレートって憧れますよねｖ

　というわけで、「for_novel シリーズ」の画像を他のものに差し替える方法を説明いたします。
　画像は、全てスタイルシートにて背景画像に設定しています。

　

表紙の画像について

　先ずはカスタマイズする前に、表紙画像についての各小説用テンプレートの特徴を以下に記します。原則、画像の表示位置は変更出来ないとお考えください。

for_novel_olive

画像を画面の左側に表示。デフォルト：横200px * 縦750px

for_novel_bamboo

画像を画面の右側に表示。デフォルト：横400px * 縦768px

for_novel_sky

画像を画面の上部に表示。新着案内は画像に重なりません。デフォルト：横700px * 縦525px

for_novel_penguin

画像をスクロールに対して画面の中央に固定。カスタマイズによっては、自由な位置に画像をレイアウトする事が出来ます。新着案内は画像に重なりますので文字とのコントラストにご注意を。デフォルト：横700px * 縦270px

　これらを参考に、差し替える画像をご確認ください。

　さて、カスタマイズとまいります。
　表紙の画像の設定は、「インデックス画面の設定」の「外枠」にあります。（古いバージョンのテンプレートをお使いの場合は、「表紙　外枠」と書いてあると思います）
この、「.index { ……」で始まるクラス設定にある、

min-height:***px;

の赤字の部分を「変更したい画像の縦のピクセル数」に、

background-image:url(https://blog-imgs-**.fc2.com/g/r/e/greenbeetle2/******.jpg);

の青字の部分を、「変更したい画像のURL」に置き換えてください。




　

ヘッダについて

　表紙以外の画面で使われるヘッダについては、「ヘッダの設定」の「.header { ……」で始まるクラス設定で画像を指定しています。

background-image:url(http://blog-imgs-**.fc2.com/g/r/e/greenbeetle2/******.jpg);

の青字の部分を、「変更したい画像のURL」に置き換えてください。

　使用画像のサイズに関して、「for_novel_sky」が上部メニューバーが画像の上にレイアウトされるため、縦サイズが若干大きめの 180px となっている以外は、他は全て 横700px * 縦130px となっています。
　これらと異なるサイズの画像を使用される場合は、「.header」で始まる行にある

height:***px;

の赤字の部分を「変更したい画像の縦のピクセル数」に変更してください。

　ただ、ブラウザによっては、「.header」の行の「height:***px;」を変更するだけでは、画像が上手く表示されない場合がありますので、その時は、「/* ブログタイトル */」の「h1」で始まる行の最後の方にある、

padding:**px **px **px **px; margin:**px **px **px **px;

で調整してください。
　padding（内側の余白）も、margin（外側の余白）も、「上 右 下 左」の順に余白を指定していますので、

「ブログタイトルの文字サイズ（24px）」＋「上padding」＋「下padding」＋「上margin」＋「下margin」＝「画像の縦サイズ」

となるように数値を変更なさればOKです。


　

フッタについて

「フッタの設定」をみてください。「コピーライト」のスタイル指定にある

background-image:url(http://blog-imgs-**.fc2.com/g/r/e/greenbeetle2/******.jpg);

の青字の部分を、「変更したい画像のURL」に置き換えてください。

「for_novel_olive」と「for_novel_penguin」はフッタに画像を使用していません。新たに画像を設定したい場合は、

.copyright { background-image:url(新たに設定したい画像のURL); background-repeat:no-repeat; background-position:center bottom; font-size:80%; text-align:center;（後略）}

のように青字部分を追加すればよいでしょう。

　ここで使用する画像のサイズは、横700px * 縦70～80px となっています。


　

最後に……

　HTMLの708行目にある、

Graphics By <a href="素材サイトのURL" target="_blank">素材サイト名</a> + Template By <a href="https://greenbeetle2.blog.fc2.com/" target="_blank">GreenBeetle</a>

の青字の部分を、カスタマイズ内容に即したものに変更してください。

　スタイルシートの記述は似たような項目が多いため、うっかり編集間違いをしてしまう可能性も少なくないと思います。カスタマイズ前には、テンプレートの複製をとって、いつでも編集前の状態に戻れるようにしておく事をおすすめします。
　また、/* コメント */を除く全ての記述は半角で入力するようにお願いします。全角文字（スペースも含む）が紛れ込んでしまわないように注意して、テンプレート・カスタマイズを楽しんでくださいね。

---