紅葉に染まる、衝撃の山伏。。。

従来よりも高画質でお楽しみ頂いております。

2014/11/05

山伏オートキャンプ場 〜 紅葉キャンプ桃源郷

構想半年、過去に挫折一回。

以前もトライして、うまくいかずに諦めていましたが、

先人の知恵のおかげで、なんとかブログ幅の拡大に成功しました。

えっ？！今更？



なにはともあれ、過去のデフォルトテンプレートでは、

写真の横幅490pxが限界でしたが、今後は630pxまで拡大できます。



そんなこんなで、新画像サイズでお気に入りの写真を大公開♪





新緑全開のネイチャーランドオム。

2014/07/09

ひっそり唐松広場　ネイチャーランドオム

ここは、まだブログを始めていなかった頃、初めて道志で訪れたキャンプ場です。

ここでの新緑があまりにキレイに写っていたこともあり、ブログを始めるきっかけにもなりました。











乙女森林からの富士山夕暮れシルエット。

2015/03/18

乙女森林公園第２キャンプ場 〜 富士山シアター 特別席

御殿場マスターの呼び名が高い、Namiheiさんのリピート率が高いことから目を付けていた、

初御殿場キャンプの地。

噂に違わぬ、大迫力富士山を堪能することが出来ました。











そして、つい先日の内山牧場。

2015/05/11

内山牧場キャンプ場 〜 大パノラマ・天空の牧草テン場

こういった引き気味の絵も、横幅が拡大されたことにより、

より臨場感が伝わるのではないでしょうか。



ということで、これからも「少人数ファミリーキャンプ入門」をよろしくお願いします♪

（画像が重過ぎにならないように気を付けながら運用します。）





＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊





さて、自らの防備録も兼ねて、変更箇所をメモしておきます。

ちなみに、わたくしこういう知識はゼロです。

なべぞうさんのアドバイスにしたがって、「ナチュログ、カスタマイズ」で検索して、

見よう見まねと推測でやってみました。

ということで、時間さえあれば誰でも出来ると思います。



使用したテンプレートは「緑という空間は癒しの場所(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;



以上が変更点になります。

抜けがあったらスイマセン。


初めはチンプンカンプンでしたが、ずっと見てると、なんとなくわかってきました。

やはり１箇所変えては、プレビューで確認というのが、堅実な方法でした。

皆さんもカスタマイズを楽しんでみてはいかがでしょうか？






↓この記事が役に立った！という方、ポチポチお願いします♪