本ブログ開設以来、ずっと変更していなかったTOP絵↑ですが、

出来心で（爆）更新してみました。↓





ついでに、レイアウトも若干変更したので、その備忘録。

ナチュログやってる人以外には、何の役にも立たない情報ですいませんが。。。

1年前にも1回カスタマイズの記事を書いていました。

それの続編的な変更になります。

2015/05/17

ナチュログ・カスタマイズ 〜 ☆ブログの幅を広げました

■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;}




＊＊＊＊＊＊＊おしまい＊＊＊＊＊＊＊