配布中テンプレート、【foto01-flower】の、
メニューと記事の位置関係を左右逆にする方法を書いておきます。

※特に、ネットをする時に左側にお気に入りを表示させている方は、
本文を読むのにいちいちスクロールしなくても良くなるので、使いやすくなると思います。




全て、　【　管理画面　⇒　テンプレートの設定　⇒　ＣＳＳ(スタイルシート)編集　】　より編集します。


書き換えるのはたった３か所！
コピペで出来ますので頑張ってくださいね♪　d(*⌒▽⌒*)b





/*全体レイアウト
------------------------------------------------------------*/

div#primary-column {
float : right; /* 左側に回り込み */　　　←この行(緑字部分)を全部削除し、【　float : left;　】←コレ(赤字部分)を削除した部分へコピペ。
width : 910px; 　　　　 ←記事部分の幅です
}


div#secondary-column {
float : left; /* 右側に回り込み */　　　←この行(緑字部分)を全部削除し、【　float : right;　】←コレ(赤字部分)を削除した部分へコピペ。
width : 250px; 　　　　 ←メニュー部分の幅です。　
}




/* Plugin
------------------------------------------------------------ */

.plg h3 {
font-size: 11px;
font-weight:normal;
border-right: 2px solid #666;　　　←この行(緑字部分)を全部削除し、【　border-left: 2px solid #666;　】←コレ(赤字部分)を削除した部分へコピペ。
}




終了。　　出来ましたでしょーか？？

ちなみに、上記の説明で「　全然意味分からないよ　」って場合はサクッと諦めてください。　　ｗｗ

※　既に他にカスタマイズしている場合はバックアップを取ってからやって下さい。
※　上手くいかなくなった場合はダウンロードし直して最初からやすことをオススメします。
※　アルファベット、記号の間の空間を変えないように注意。




さてさて、続きまして、　記事とメニューの幅変更　方法。

上記の説明の、全体レイアウト内の青字の数字部分（記事幅・メニュー幅）をお好きな割合にしてください。

それだけです　(笑)


注意点は、必ず記事とメニューの幅の合計を変えないこと。

例えば、記事幅を10px増やすなら、メニュー幅を10px減らす、
逆に記事幅を10px狭めるなら、メニュー幅を10px増やす
等々、絶対に全体の幅が変わらないようにして下さい。　　　　（レイアウトがズレます　

※割合を変えることは簡単ですが、
画像や余白の関係上blog全体の幅を変更するのは結構面倒臭いのでオススメしません。
やる場合は自力で頑張って下さいね。




ではでは、、、。

写真が並べられるシンプルなテンプレートを作りました。

無事認証も通ったようなので、ダウンロード＆使って頂ければ嬉しいく思います。。



各種ブラウザ確認済み。　（safariはwin版のみ確認）
２カラム　　左メニュー幅固定。
プラグイン対応済み。


＝＝＝＝　ご利用規約　＝＝＝＝＝

カスタマイズ　○
商用　○
二時配布･再配布　×
アダルト(個人・商用)　×
違法的な内容のサイト　×

※著作権は放棄しておりません、画像を削除しても著作権表示は消さないで。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


そのままでも、画像を差し替えてでも、自由にカスタマイズして使って下さい♪
記事部分も広めに作ってあるので、横幅850pxくらいのまでの画像がＵＰ出来ます。



基本的なカスタマイズだけ書いておきます。
過度なカスタマイズは基本自力で頑張って下さい。

ご不明な点はコメントまで。　　

---

画像の差し替え方


●ＨＴＭＬの編集画面から下記の赤字部分をお好きな画像のアドレスに書き換えて下さい。
元画像の大きさに関わらず、画像は300px×220pxで表示されます。

※改行に注意。


＜ｄｉｖ ｉｄ="ｂｒａｎｄｉｎｇ"＞＜!--/←ヘッダー始まり--＞
＜ｄｉｖ ｉｄ="ｔｏｐｆｏｔｏ"＞
＜!--★改行しないで！　改行すると画像の間に隙間が出来ます★--＞
＜ｉｍｇ ｓｒｃ="http://zakka-soap.com/fc2-sakura01/1-1.jpg" /＞＜ｉｍｇ ｓｒｃ="http://zakka-soap.com/fc2-sakura01/1-3.jpg" /＞＜ｉｍｇ ｓｒｃ="http://zakka-soap.com/fc2-sakura01/2-3.jpg" /＞＜ｉｍｇ ｓｒｃ="http://zakka-soap.com/fc2-sakura01/2-4.jpg" /＞
ｄｉｖ>

---

画像上下のバーの色を変える


●ＣＳＳの編集画面から下記の赤字の部分をお好みのカラーコードに変えて下さい。
青い部分はバーの太さです。　（数字を減らせば細く、増やせば太くなります。）


/*--------全体レイアウト--------*/

ｄｉｖ#topfoto img {
ｗｉｄｔｈ : 300px; 　　　－画像の横幅－
ｈｅｉｇｈｔ : 220px;　　　－画像の高さ－　
ｐａｄｄｉｎｇ: 10px 0px 10px 0px;
ｂｏｒｄｅｒ-bottom:8px solid #556B2F;　　（下のバー
ｂｏｒｄｅｒ-top:8px solid #556B2F;　　　（上のバー
}


画像サイズは、大きくすると全体の幅も大きくしないとはみ出ます。
小さくする分には問題ありません。