当サイト内の画像及びイラスト・写真等、全ての内容につきまして無断転載・転用を固くお断り致します。
また、管理人が不適切と感じたコメントは予告無く削除させて頂きます。



愛おしく、とても大変でとても大切。 ただそれだけ。
いつもの方、初めての方、検索から来られた方、楽しんで頂ければ幸いです♪


※初めましての方は「ブログについて」「サイト・管理人・彼女たちについて」をご一読頂けると助かります。
※テンプレートについては「 共有テンプレートについて 」に詳しく書いておりますのでそちらをご覧下さい。


管理人へのメッセージは、コメント(非公開・ハンドルネーム可)、もしくはメールフォームよりお願いします。

           
--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2010/08/16

逆カラム及び、記事&メニューの幅を変える方法。

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

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


caramu.jpg

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


書き換えるのはたった3か所!
コピペで出来ますので頑張ってくださいね♪ 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; 】←コレ(赤字部分)を削除した部分へコピペ。
}





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

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

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




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

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

それだけです (笑)


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

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

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




ではでは、、、。

スポンサーサイト
2010/03/20

【公開中】 foto01-flower

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

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



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


==== ご利用規約 =====

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

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

================


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



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

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







画像の差し替え方


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

※改行に注意。


<div id="branding"><!--/←ヘッダー始まり-->
<div id="topfoto">
<!--★改行しないで! 改行すると画像の間に隙間が出来ます★-->
<img src="http://zakka-soap.com/fc2-sakura01/1-1.jpg" /><img src="http://zakka-soap.com/fc2-sakura01/1-3.jpg" /><img src="http://zakka-soap.com/fc2-sakura01/2-3.jpg" /><img src="http://zakka-soap.com/fc2-sakura01/2-4.jpg" />






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


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


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

div#topfoto img {
width : 300px;    -画像の横幅-
height : 220px;   -画像の高さ- 
padding: 10px 0px 10px 0px;
border-bottom:8px solid #556B2F;  (下のバー
border-top:8px solid #556B2F;   (上のバー
}


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


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。