1年前にも1回カスタマイズの記事を書いていました。
それの続編的な変更になります。
■1年前の変更内容
・テンプレートは、「緑という空間は癒しの場所(2カラム)」
・ブログ全体の幅を740pxから960pxに拡大。（220px拡大）
・拡大した220pxのうち、70pxをサイドバーに、150pxをメイン部に振り分け。
■今回の変更
今回の変更を、まとめると下記になります。
番号は、上の絵を参照してください。
① 日付の入るマスを画像からカラー塗り潰しに変更
② ①と同じ内容。画像からカラー塗り潰しに変更
③ 両サイド余白の画像もカラー塗り潰しに変更
④ タイトル位置を右下に移動
⑤ タイトル文字の幅を変更
（コレ重要！）
■詳細説明
更にどうでもいい情報になりますが、自身の備忘録のためにも
各変更の思惑を書いておきます。
★変更は、全て「スタイルシート」です★
① これは、初期状態で「画像」が入っていました。
前回変更時に、幅を広げたため、この画像が短くなってしまいました。
仕方ないので、適当に写真を細長く切り取ってアップロードし、
それをテンプレートに読み込んでいました。
しかし、「画像」は、読み込みが多少でも遅くなるため、
いつかは塗り潰しに変えたいと、思っていました。
ネットで調べてみると、
background-color: 色番号
というので、塗り潰し出来そうだということがわかり、
それらしきところを全て（５箇所くらい）
変更前 background:#fff url(/_img/2_shinryoku/top_bnr.jpg) left;
↓
変更後 background-color: #000033;
と書き換えてみたら、見事塗り潰しに成功！しました。
これなら、幅を広げたとか関係なく、そのマス全てを塗り潰してくれるし、
画像の読み込みもないので、早くなるはずです。
ちなみに#000033は、濃い青色の色コードで、「HTML 色」とかで検索すると
色コードが調べられます。
③ ここの余白ですが、ここも初期状態では、細長い「画像」が入っていました。
余白の大きさに合わせて、勝手に「repeat」して並べてくれる設定になっていたようでした。
今回、トップ絵の雰囲気に合わせて、緑色系から脱却したいと考え、
ここも、それらしき場所を
変更前 background:#1f8266 url(/_img/2_shinryoku/body_bg.jpg) repeat-x;
↓
変更後 background-color: #ffffff;
に書き換えてみました。
すると見事、白くなりました。
④ TOP画像に合わせて、タイトルと説明を右下に移動したくなりました。
それらしき座標っぽいのがあったので、いじると右下に行きました。
どれがどれかは、やればわかります。（爆）
.blogtitle{ ←ブログタイトル
font-size:20px; ←フォントも少し小さくしました。
font-weight:bold;
padding:455px 0px 0px 550px;←ここの数字を適当にいじると移動する。（変更前 15px 0px 0px 0px;）
＊＊＊＊
.description{ ←これは説明文の方です
color:#fff;
font-size:12px; ←フォントも少し小さくしました。
padding:0px 20px 0px 570px;←ここの数字を適当にいじると移動する。（変更前 0px 20px 0px 20px;）
⑤ これは
超重要と思っています。
④で、タイトルを右下へ移動しました。
しかし、タイトルには、上の説明図で書いたように、
見えない空白（赤の□で書いた）が存在するようなのです。
これが、ブログの幅からはみ出してしまう場合があります。
どうしてわかったかというと、ウィンドウ下のスクロールバーが出てきたからです。
最初は原因がわからずに難儀しましたが、ようやく原因究明できました。
.blogtitle{
font-size:20px;
（途中省略）
width:350px;←これがテキストボックスの幅的な数字（変更前 width:700px;）
ブログタイトルの中に、widthというパラメータがあるので、
これを狭めると治りました。
これは、私の知る限り、「くま○のだらりんキャンプ」様で、
同様の症状が出ている気がします。
（・・・違ったらごめんなさい。）
さてさて、今回、トップ画像は960x540（16:9）にしました。
それに合わせて、画像表示の縦サイズも変更しています。
（これはメジャーな変更でしょう。）
#banner,#subbanner{
background:#fff url(TOP画像のURL) left;
height: 540px;
←この数字。（変更前 height: 228px;）
画像サイズが大きくなると、読み込みも遅くなるので、
jpegの圧縮率をやや大きめにして、画像容量は100kバイトくらいになりました。
さらに超細かいところでは、末尾の「copyright・・・」というマスの色だけは、
スタイルシートではない別の場所にありましたので、
そこで、background-colorを指定しました。
ということで、ド素人が暇にまかせてカスタマイズした結果が以上になります。
ほんと、試行錯誤でやったので、一応出来ましたが、たぶん全くスマートではないと思います。（汗）
下に「コード」と呼ぶのでしょうか？ 要は「スタイルシート」の中身を丸っとコピーしておきましたので、
試してみたい方はどうぞ。
ただし、くれぐれも自己責任で、誤って愛用のテンプレートを消したりしないように、
気を付けて試して下さい。
■使用上の注意点■
・テンプレートは、「緑という空間は癒しの場所(2カラム)」
・（ここにTOP画像のURLを入れる）と赤字で書いてある場所に、
トップ画像のURLを入れて下さい。このまま使う場合は、960px×540pxです。
・スタイルシートに丸っとコピーすれば、このブログといっしょのテンプレートになります。
・このテンプレートで表示出来る画像の横幅上限は、630pxです。
それでは皆様、よいナチュログライフを〜
↓↓↓↓↓気が向いたら、ポチッとお願いします。
＊＊＊＊＊＊＊以下をコピー＊＊＊＊＊＊＊
@charset "UTF-8";
body{
FONT-FAMILY: "verdana", "helvetica", "osaka", "ＭＳ Ｐゴシック", sans-serif
}
object{margin:0px;padding:0px}
textarea {
FONT-FAMILY: "ヒラギノ明朝 Pro W6", "Osaka", "ＭＳ Ｐゴシック", "trebuchet MS", "trebuchet", "verdana", "arial", sans-serif
}
body{
color:#333333;
margin:0px;
text-align:center;
background-color: #ffffff;
}
form{
margin:0px;
padding:0px;
}
table.form{
margin:25px 0px 0px 13px;
}
img{
border:none;
}
ul.rss{
margin: 0px;
padding: 0px;
width: 100%;
text-align: center;
}
ul.rss li{
border-right: #999 1px solid;
display: inline;
font-size: 12px;
font-style: normal;
font-weight: bold;
letter-spacing: 0.2px;
margin-right: 0.3em;
padding-right: 0.5em;
padding-left: 0.2em;
}
ul.rss a:link{
color: #333333;
text-decoration: none;
}
ul.rss a:visited{
color: #333333;
text-decoration: none;
}
ul.rss a:hover{
color: #999999;
text-decoration: none;
}
ul.rss a:active{
color: #333333;
text-decoration: none;
}
a{color:#000;text-decoration:underline;}
a:link{color:#000;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#000;text-decoration:none;}
a.acalendar{color:#007955;text-decoration:underline;}
a.acalendar:link{color:#007955;text-decoration:underline;}
a.acalendar:visited{text-decoration:underline;}
a.acalendar:active{}
a.acalendar:hover{color:#007955;text-decoration:none;}
a.acontinues{color:#0066cc;text-decoration:underline;}
a.acontinues:link{color:#0066cc;text-decoration:underline;}
a.acontinues:visited{text-decoration:underline;}
a.acontinues:active{}
a.acontinues:hover{color:#0066cc;text-decoration:none;}
a.amenu{color:#333333;text-decoration:underline;}
a.amenu:link{color:#333333;text-decoration:underline;}
a.amenu:visited{color:#333333;text-decoration:underline;}
a.amenu:active{}
a.amenu:hover{color:#333333;text-decoration:none;}
#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;
}
#banner,#subbanner{
background:#fff url(
ここにTOP画像のURLを入れる) left;
height: 540px;
}
#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:active{}
#banner a:hover{color:#fff;text-decoration:underline;}
#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#fff;text-decoration:none;}
#subbanner a:visited{text-decoration:none;}
#subbanner a:active{}
#subbanner a:hover{color:#fff;text-decoration:underline;}
h1,h2,h3{margin:0px;padding:0px;}
.blogtitle{
font-size:20px;
font-weight:bold;
padding:455px 0px 0px 550px;
margin:0px 20px 0px 20px;
text-align:left;
letter-spacing:1px;
height:31px;
line-height:31px;
width:350px;
display:block;
overflow:hidden;
white-space: nowrap;
}
.description{
color:#fff;
font-size:12px;
padding:0px 20px 0px 570px;
text-align:left;
line-height:16px;
height:80px;
width:350px;
margin-top:4px;
overflow:hidden;
}
.logo{
padding-left:452px;
}
.logo img{
border:none;
}
#content{
width:689px;
float:right;
}
#links{
width:253px;
float:left;
text-align:left;
padding:9px 0px 0px 10px;
overflow:hidden;
}
#footer{
clear:both;
}
#copyright{
background:#000033;
width: 100%;
font-size: 10px;
font-weight: bold;
color: #fff;
margin: 0px;
padding: 0px;
line-height: 16px;
text-align: center;
}
.blog{
margin:9px 10px 20px 0px;
width:679px;
overflow:hidden;
}
.blogbody{
margin:0px 0px 15px 0px;
padding:8px 16px 8px 16px;
width:645px;
border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc;
overflow:hidden;
background:;
}
.earth_blog{
padding:0px 8px 0px 8px;
width:595px;
overflow:hidden;
}
.title{
color: #000;
font-size:12px;
font-weight:bold;
background-repeat: no-repeat;
background-position: left;
padding: 10px 0px 0px 0px;
background-position:1px 1px;
}
.title a:link{ color:#000;text-decoration:none;}
.title a:hover{ color:#000;text-decoration:none;}
.title a:active{ color:#000;text-decoration:none;}
.title a:visited{ color:#000;text-decoration:none;}
.main{
color:#000;
font-size:12px;
margin:16px 0px 15px 0px;
overflow-x:auto;
width:643p
line-height:135%;
overflow-y:hidden;
}
.earth_blog .main{
color:#737373;
margin:10px 0px 10px 0px;
padding-left:7px;
font-size:12px;
overflow-x:auto;
width:593px;
line-height:135%;
overflow-y:hidden;
}
.main img{
margin:5px;
}
.main-continues{
font-size:10px;
}
.posted{
color:#333333;
font-size:10px;
text-align:right;
margin:0px 0px 5px 0px;
}
.posted strong{color:#666666}
a.aposted{color:#0e409f;text-decoration:underline;font-weight:bold;font-size:10px;}
a.aposted:link{color:#0e409f;text-decoration:underline;font-weight:bold;}
a.aposted:visited{color:#0e409f;text-decoration:underline;font-weight:bold;}
a.aposted:active{}
a.aposted:hover{color:#0e409f;text-decoration:none;font-weight:bold;}
.menu{
color:#000;
font-size:12px;
text-align:right;
}
.comments-head{
color:#000;
font-size:12px;
font-weight:bold;
padding:0px 0px 0px 0px;
height:10px;
}
.comments-body{
font-size:12px;
line-height:135%;
margin:20px 0px 15px 13px;
}
.comments-post{
color:#000;
font-size:12px;
text-align:right;
margin:0px 0px 25px 0px;
}
.trackback-url{
color:#691815;
font-size:12px;
font-weight:bold;
margin:20px 0px 15px 13px;
}
.trackback-body{
font-size:12px;
line-height:135%;
margin:20px 0px 15px 13px;
}
.trackback-post{
color:#000;
font-size:12px;
text-align:right;
margin:0px 0px 25px 0px;
}
a.atrackback-post{color:#007955;text-decoration:underline;font-weight:bold;}
a.atrackback-post:link{color:#007955;text-decoration:underline;font-weight:bold;}
a.atrackback-post:visited{text-decoration:underline;font-weight:bold;}
a.atrackback-post:active{font-weight:bold;}
a.atrackback-post:hover{color:#007955;text-decoration:none;font-weight:bold;}
label{
font-size:10px;
font-weight:bold;
}
#author{width:270px;border:1px solid #ccc;}
#email{width:270px;border:1px solid #ccc;}
#url{width:270px;border:1px solid #ccc;}
#text{font-size:12px;width:400px;height:200px;border:1px solid #ccc;}
.pagetop{
font-size:10px;
text-align:right;
padding:15px 8px 25px 0px;
}
.calendarhead{
color:#fff;
font-size:12px;
font-weight:bold;
letter-spacing:2px;
text-align:center;
padding:3px 0px 2px 0px;
height:29px;
line-height:29px;
background-color: #000033;
}
.calendarhead a:link{ color:#fff;}
.calendarhead a:hover{ color:#fff;}
.calendarhead a:visited{ color:#fff;}
.calendarhead a:active{ color:#fff;}
.calendartable{
margin:0px auto 0px auto;
width:253px;
text-align:left;
background:#fff;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
.calendarweek{
color:#000;
font-size:10px;
font-weight: bold;
}
.calendarwd{
border-right: 1px solid #efefef;
background: #fff url();
color:#fff;
font-size:10px;
font-weight:bold;
letter-spacing: 2px;
padding:2px 0px 2px 5px;
}
.calendard{
empty-cells:show;
border-top:1px solid #efefef;
border-right:1px solid #efefef;
text-align: center;
}
.calendardbg{}
.category,.recententry,.archives,.comment,.trackback,.link,.search,.qrcode,.counter,.subscription,.profile,.calender,.ad_img{ margin-bottom:14px}
.calender{
font-size:10px;
}
.side{
font-size:12px;
line-height:140%;
margin:0px 0px 10px 0px;
padding:8px 10px 8px 10px;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
.ad_img .side{
font-size:12px;
line-height:140%;
margin:0px 0px 10px 0px;
padding:4px;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
.side .text{
width:210px !important;
}
.sidebody{width:231px; overflow:hidden;}
.sidebody .aside{}
a.aside{color:#0e409f;text-decoration:underline;}
a.aside:link{color:#0e409f;text-decoration:underline;}
a.aside:visited{color:#0e409f;text-decoration:underline;}
a.aside:hover{color:#0e409f;text-decoration:none;}
a.arss{color:#007955;text-decoration:underline;}
a.arss:link{color:#007955;text-decoration:underline;}
a.arss:visited{text-decoration:underline;}
a.arss:active{}
a.arss:hover{color:#007955;text-decoration:none;}
.photo{text-align:center;}
.nickname{color:#2b5695;font-weight:bold;margin:10px 0px;}
.message{}
.quotetable{}
.quote{color:#000;font-size:10px;padding:1px;}
.blogtimes{margin:0px 0px 16px 0px;text-align:center;}
.powered{
text-align:center;
margin:0px 0px 10px 0px;
}
.syndicate{
font-size:10px;
text-align:center;
}
.checkers{
font-size:10px;
margin-top:10px;
}
a.adtitle{font-weight:bold;text-decoration:underline;}
a.adtitle:link{font-weight:bold;text-decoration:underline;}
a.adtitle:visited{font-weight:bold;text-decoration:underline;}
a.adtitle:active{font-weight:bold;text-decoration:underline;}
a.adtitle:hover{font-weight:bold;text-decoration:underline;}
a.addescription{color:black;text-decoration:none;}
a.addescription:link{color:black;text-decoration:none;}
a.addescription:visited{color:black;text-decoration:none;}
a.addescription:active{color:black;text-decoration:none;}
a.addescription:hover{color:black;text-decoration:none;}
a.adurl{color:blue;text-decoration:none;}
a.adurl:link{color:#0000FF;text-decoration:none;}
a.adurl:visited{color:#0000FF;text-decoration:none;}
a.adurl:active{color:#0000FF;text-decoration:none;}
a.adurl:hover{color:#0000FF;text-decoration:none;}
a.adld{text-decoration:underline;}
a.adld:link{text-decoration:underline;}
a.adld:visited{text-decoration:underline;}
a.adld:active{text-decoration:underline;}
a.adld:hover{text-decoration:underline;}
body.ad{background:#f7p39f;}
/****yinhena edit [2カラム]****/
#siteid {
width: 335px;
display: inline;/*IE6+float 横マージン膨張対策*/
margin: 0 0 0 30px;
}
#siteid p {
width: 305px;
height:45px;
margin:0 0 0 30px;
text-indent:-9999px;
}
#siteid a {
width:305px;
height:45px;
display:block;
}
.sidetitle{
background-color: #000033;
color:#fff;
font-size:12px;
font-weight:bold;
padding:3px 0px 2px 16px;
letter-spacing:2px;
height:29px;
line-height:29px;
}
.date{ height:34px; line-height:34px; background-color: #000033;color:#fff;
font-size:12px;
font-weight:bold;
padding-left:16px;
letter-spacing:2px;
}
.blog_title{height:34px; line-height:34px; background-color: #000033;color:#fff;
font-size:12px;
font-weight:bold;
padding-left:16px;
letter-spacing:2px;
}
.blog_title h2{font-size:12px}
.earth_blog_title h2{font-size:12px}
.lable_c label{}
.h_10{height:10px; overflow:hidden}
.h_15{height:15px; overflow:hidden}
.m_l20{margin-left:10px;}
.ad{padding-bottom:4px;}
＊＊＊＊＊＊＊おしまい＊＊＊＊＊＊＊