川蜻蛉の舞う渓にて

今回のブログカスタマイズ
文字の視認性の問題は残っているものの、皆さんからは概ね好評価のようです♪
どうやって、このテンプレートを作ったのか
気になる方もいるのでは？
「作り方を教えてください」と言うメールも何通か頂きましたが、今回（もしくは次回も）の記事でお返事とさせてくださいね！

まずはベースですが
【N.I.R】にて夕焼けを眺めた瞬間
を使用しています
ええ・・・前回の記事で、ブログの幅を広げる改造をする！と予告をしてしまいましたが
やはり以前より懸念されていた、幅改造するとＩＥ7やＦｉｒｅＦｏｘで表示が壊れてしまうと言う問題を結局クリアーできませんでした
このベースのテンプレートは、元々のブログの幅が1000px、記事本体の幅が625pxと、最初から広めに設定されています
ブログ幅を広げる改造で四苦八苦している人は、これをベースに改造をしてみてはいかがでしょうか？

では、早速改造方法を解説しましょうか（＾＾）ｂ

１．写真の用意
タイトル通り、大きな写真を用意します
幅1000px、高さは・・・
私と同じように、背景を動かないように固定するのであれば、幅と同じ1000pxあれば十分でしょう

今の背景画像です

スライドさせるのであれば、大きければ大きいほど良いでしょうね♪
画像の容量と相談して作ってみてください
ただし、画像が切れた時点から下は、ブログの背景色となってしまうので上手にグラデーションを使ってください

スライドさせるように作った画像です

固定する、スライドさせる、それぞれの方法については後述します

注意点は、この写真はtop画像であると同時にブログの背景になる訳ですから、前回記事のコメントで指摘があったように、文字の視認性が大きな問題になります！！
写真の加工で、アミカケをするなど工夫が必要になるでしょう
ちなみに・・・アミカケ入りの写真の作成方法については以前の記事「Exelで写真編集」をご覧ください
（エクセル、ペイント、ピクチャマネージャーと、Windowsユーザーならほとんど全ての人が持っている基本ソフトででの写真の加工法を載せています）

２．スタイルシートの変更（画像編）
スタイルシートの細かい変更方法については、基本編「ブログ改造計画Ⅰ」からご覧ください

変更箇所が多いので、スタイルシートをそのまま表示させます
変更箇所：黄色
変更後：青
追加文章：オレンジ
削除部分：ピンク

変更場所のみの表示です

body{
color:#000;
margin:0px;
background:#fff;
変更：background:#6E8459;
（背景の色の変更）
追加：background-image: url(//img01.naturum.ne.jp/usr/kawatombo/hyousi5.JPG);
（背景画像の設定）
background-repeat: no-repeat;
（画像を繰り返さない、no-repeat→repeat-yで、繰り返すように）
background-position: center top;
（center：中央、top：上に、表示する設定）
background-attachment: fixed;
（画像を固定する設定、文章をなくせばスクロールします）
text-align:center;
line-height:1.1em;
}


#container{
font-size:small;
width:1000px;
height:100%;
background-color:#364D59;
（元に戻す事もあるので、色設定のみ削除した方がいいでしょう）
margin:0px auto;
padding:0;
text-align:left;
background-image: url(http://admin.naturum.ne.jp/_img/nir_fising3/header.jpg);
（元に戻す事もあるので、URLのみ削除した方がいいでしょう）
background-repeat: no-repeat;
background-position: left top;
}



#wrapper{
height: 100%;
width: 1000px;
overflow: hidden;
background-image: url(http://admin.naturum.ne.jp/_img/nir_fising3/wrapper.bg.gif);
background-repeat: repeat-y;
background-position: left top;
}


#content{
width:625px;
float:right;
background-color:#F0F7D6;
padding:10px 0 0;
margin:0 0 15px;
display: inline;
}

#links{
width:177px;
float:left;
text-align:left;
margin:0 0 15px 11px;
padding:6px 0 0;
overflow:hidden;
background-image: url(http://admin.naturum.ne.jp/_img/nir_fising3/sub_header.gif);
background-repeat: no-repeat;
background-position: left top;
display: inline;
}
#links2{
width:177px;
float:right;
text-align:left;
margin:0 10px 15px 0;
padding:6px 0 0;
overflow:hidden;
background-image: url(http://admin.naturum.ne.jp/_img/nir_fising3/sub_header2.gif);
background-repeat: no-repeat;
background-position: left top;
background-color: #F0F7D6;
display: inline;
}


#copyright{
width:979px;
height:100%;
font-size:small;
font-weight:bold;
color:#004B00;
margin:0px 10px 0px 11px;
text-align:center;
background-color: #F0F7D6;
background-image: url(http://admin.naturum.ne.jp/_img/nir_fising3/fotter_end.gif);
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 10px;
}
※実はこの部分「#copyright～」、今使用中のテンプレートでは改造をしています
ここの改造法はまた後日♪


.blog{
width:625px;
margin:0px;
background-image: url(http://admin.naturum.ne.jp/_img/nir_fising3/content_line.gif);
background-repeat: repeat-y;
background-position: -1px top;
padding-bottom: 10px;
}


.blog-title-left{
background-image: url(http://admin.naturum.ne.jp/_img/nir_fising3/title_bg.gif);
background-repeat: no-repeat;
background-position: 13px top;
float: left;
height: 28px;
width: 400px;
}
.blog-title-right{
float: right;
width: 225px;
}
※実はこの部分「.blog-title-left～」および「.blog-title-right～」、今使用中のテンプレートでは改造をしています
ここの改造法はまた後日♪


.blogbody{
background:url(http://admin.naturum.ne.jp/_img/nir_fising3/main_bg.gif) no-repeat 514px top;
margin:0px 0px 10px 0px;
padding:8px 10px;
}

以上の場所の改造で、背景画像を用いたテンプレートが出来上がるはずです♪
ただし・・・
今使用中のテンプレートは、これに加えて
Top画像、copyright、記事タイトル、日付部分の背景の改造を更に加えています（＾＾）ｂ
ここまで一度に説明してしまうと、混乱し易いので、今日はココまで！！

PS.
何！？
文字が見にくくなった？
・・・ココをクリック！！
「文字変更のまとめ」


Kawatombo Ken


にほんブログ村のランキングに参加中です！
今回の記事が参考になったと思った方
一日一回ワンクリックにご協力くださいね♪