構想半年、過去に挫折一回。
以前もトライして、うまくいかずに諦めていましたが、
先人の知恵のおかげで、なんとかブログ幅の拡大に成功しました。
えっ？！今更？
なにはともあれ、過去のデフォルトテンプレートでは、
写真の横幅490pxが限界でしたが、今後は630pxまで拡大できます。
そんなこんなで、新画像サイズでお気に入りの写真を大公開♪
新緑全開のネイチャーランドオム。
ここは、まだブログを始めていなかった頃、初めて道志で訪れたキャンプ場です。
ここでの新緑があまりにキレイに写っていたこともあり、ブログを始めるきっかけにもなりました。
乙女森林からの富士山夕暮れシルエット。
御殿場マスターの呼び名が高い、
Namiheiさんのリピート率が高いことから目を付けていた、
初御殿場キャンプの地。
噂に違わぬ、大迫力富士山を堪能することが出来ました。
そして、つい先日の内山牧場。
こういった引き気味の絵も、横幅が拡大されたことにより、
より臨場感が伝わるのではないでしょうか。
ということで、これからも「少人数ファミリーキャンプ入門」をよろしくお願いします♪
（画像が重過ぎにならないように気を付けながら運用します。）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
さて、自らの防備録も兼ねて、変更箇所をメモしておきます。
ちなみに、わたくしこういう知識はゼロです。
なべぞうさんのアドバイスにしたがって、「ナチュログ、カスタマイズ」で検索して、
見よう見まねと推測でやってみました。
ということで、時間さえあれば誰でも出来ると思います。
使用したテンプレートは「緑という空間は癒しの場所(2カラム)」です。
もともと、これの３カラムを使用しておりましたが、
ブログ全体の幅を広げてしまうと、自身がゴロ寝しながらipadで見る時に、
以前より却って写真が小さくなる懸念があり、全体の幅を維持するため、３カラムから２カラムに変更しました。
■ 変更したのは「スタイルシート」だけです。■
変更点は以下の通りで、要点をまとめると、
・ブログ全体の幅を740pxから960pxに拡大。（220px拡大）
・拡大した220pxのうち、70pxをサイドバーに、150pxをメイン部に振り分けました。
（220px全部をメインに振り分けても良かったのですが、さすがに画像が大き過ぎると
読み込み速度の弊害が大きいのでやめておきました。）
・サイドバーおよびメイン部のタイトル背景画像が短くなってしまったため、オリジナル画像に変更しました。
・メイン部フッターの画像が短くなってしまったので、削除しました。
・これに伴って、記事最後の隙間が大きくなったので、狭めました。
以下、変更点を羅列していきます。
テンプレートが同じなら、これでうまくいくと思います。
全てスタイルシートの中だけです。
順番はこの通りですが、途中変更していない箇所は省略しています。
★ブログ全体の幅を広げます740→960★
#container{font-size:12px;
width:960px;
background:#FFF;
★トップ絵を変更します★（トップ絵は幅960pxでアップロードしておく）
#banner,#subbanner{
background:#fff url(トップ絵のアドレスをここに入れる) left;
height: 228px;
★サブタイトルが改行されてしまうので、サブタイトルの幅を広げました。290→400★
（２〜３人でこぢんまり楽しむ、、、のこと）
★フォントも拡大しました。12→14★
.description{
color:#fff;
font-size:14px;
padding:0px 20px 0px 20px;
text-align:left;
line-height:16px;
height:80px;
width:400px;
★メイン部分の幅を150広げました。539→689★
#content{
width:689px;
float:right;
}
★サイドバー部分の幅を70広げました。183→253★
#links{
width:253px;
float:left;
text-align:left;
padding:9px 0px 0px 10px;
overflow:hidden;
★メイン部分の幅を150広げました。529→679★（サイドバーもメインも、何度も似たようなのが出てきます。）
.blog{
margin:9px 10px 20px 0px;
width:679px;
overflow:hidden;
}
★メイン部分の幅を150広げました。495→645★
★backgroundのjpgを消しました★（これは元画像が短くなったのと、不必要に感じたため。）
.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:（ここを消した）;
}
★ここは変えなくても大丈夫でした（595のまま）。謎★
.earth_blog{
padding:0px 8px 0px 8px;
width:595px;
overflow:hidden;
}
★メイン部分の幅を150広げました。493→643★
.main{
color:#000;
font-size:12px;
margin:16px 0px 15px 0px;
overflow-x:auto;
width:643px;
line-height:135%;
overflow-y:hidden;
★記事の一番下の字の位置を下げました。60→5★（これは記事下の画像を削除したため隙間が空いたので）
.posted{
color:#333333;
font-size:10px;
text-align:right;
margin:0px 0px 5px 0px;
★サイドバーのもろもろを幅70広げました。200→270★
#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;}
★サイドバー？いやメインだったかな？のタイトル部の絵を変えました★
（ここは、本当は画像ではなく塗りつぶしたかったが、やり方がわからず。
似たようなサイズの画像をUPして、元画像と差し替えました。）
padding:3px 0px 2px 0px;
height:29px;
line-height:29px;
background:url(ここに絵のURLを入れます) repeat-x;
★カレンダーの幅を70拡大します。183→253★
.calendartable{
margin:0px auto 0px auto;
width:253px;
★サイドバーのテキスト,body 幅を70拡大します。140→210, 161→231★
.side .text{
width:210px !important;
}
.sidebody{width:231px; overflow:hidden;}
★サイドバーのタイトル部の絵を変えました★
}
.sidetitle{
background:url(ここに画像URLを入れます) repeat-x;
★サイドバーのタイトル部の絵を変えました★
（ここも理由は前出と同じ。どちらかが、カレンダーのタイトル背景でした。）
.date{ height:34px; line-height:34px; background:url(ここに画像URLを入れます) no-repeat;color:#fff;
以上が変更点になります。
抜けがあったらスイマセン。
初めはチンプンカンプンでしたが、ずっと見てると、なんとなくわかってきました。
やはり１箇所変えては、プレビューで確認というのが、堅実な方法でした。
皆さんもカスタマイズを楽しんでみてはいかがでしょうか？
↓この記事が役に立った！という方、ポチポチお願いします♪