プラグインについて

とりあえず、公式テンプレから部分的にコピッてきたプラグインを恐る恐るいじってます・・
まだ詳しい動作を理解できませんが、コレをサイドバー部分に入れればいいらしい・・

　<div id="side">

<!--plugin-->

<!--plugin_first-->
<h3 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
<!--/plugin_first-->

<!--plugin_second-->
<h3 style="text-align:<%plugin_second_talign>"><%plugin_second_title></h3>
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description>
</p>
<%plugin_second_content>
<p style="text-align:<%plugin_second_ialign>">
<%plugin_second_description2>
</p>
<!--/plugin_second-->

<!--plugin_third-->
<h3 style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description>
</p>
<%plugin_third_content>
<p style="text-align:<%plugin_third_ialign>">
<%plugin_third_description2>
</p>
<!--/plugin_third-->

<!--/plugin-->

　</div>

サイドバー左右で分ける場合は、plugin_first、plugin_second、plugin_third をブロックごとに<!--plugin--> 〜 <!--/plugin-->ではさむ。

プラグイン無効の場合のソースは、
<!--not_plugin--> 〜 <!--/not_plugin-->

【引用記事】http://blog.blog2.fc2.com/blog-entry-17.html


...read more

レイアウトテンプレ

2カラム、3カラムの基本レイアウト設定です。

*----------------- 2カラム -----------------*
html
head
body

#wrapper
#sideber ←	#main →

* HTML
<!-- 2カラム　基本パターン --> <div id="wrapper"> <div id="main"> </div> <div id="sideber"> </div> </div>
* CSS
/* cssソース */ #wrapper{ width:700px; } #main{ width:500px; float:right; } #sidebar{ width:200px; float:left; }

wrapperの入れ子に、サイドバーは左、メインは右にfloatプロパティで配置する。
この場合、HTML上では常にメインがサイドバーより先に配置されるようにすることが可能。
入れ子のラッパーと、左右の段の幅の合計の幅を一致させるが、borderやmarginなども考慮する。
ユーザビリティを優先させるなら、ラッパーを相対値（%）、サイドバーを絶対値（px）指定にしてリキッドレイアウトにする。


*----------------- 3カラム -----------------*
html
head
body

#wrapper
#sideber ←	#content → #main ← #extra →

* HTML
<!-- 3カラム　基本パターン --> <div id="wrapper"> <div id="content"> <div id="main"> </div> <div id="extra"> </div> </div> <div id="sideber"> </div> </div>
* CSS
/* cssソース */ #wrapper{ width:750px; } #content{ width:550px; float:right; } #sidebar{ width:200px; float:left; } #main{ width:300px; float:left; } #extra{ width:250px; float:right; }

wrapperの入れ子に、サイドバー1は左、メインとサイドバー2（extra）をcontentの入れ子に入れて右にfloatプロパティで配置する。

カスタムmemo

* 前記事の改善点

・メインカラムのみ両脇borderで上下ぴっちりにしたい。
・サイドバーのメニューが長いと、コメント編集や１記事表示にするとフッター部分があがってしまう。

tableで３つのセルを作る。
メインカラム
メイン（フッター部）
サイドカラム→rowspan="2"セル結合

２カラムそれぞれに、td id でcss（#main-column、#side column）のセレクタを新しく作る。cssで両カラムwidth、メインのみborderを指定。

メイン（フッター部）tdに直接指定。
valign="bottom"　
height="50"

#container
└ table
　　td#main-column（#side-column）
　　　　　└ div#main（div#side）
　　　　　　　　　└ class.content

テーブルtdそれぞれに通常のdiv idが入れ子で入る。

前はテーブルのセル２つに２カラム（div#）をそれぞれ入れてみた。
メインカラムの両脇borderで上下ぴっちりは、div idでなくtd idにborderをcss指定すればセル２つでも問題ない。
あくまでfooter位置（どの状態でも下位置）にこだわらなければ。

反省としては、htmlとcss両方でスタイル指定している部分。
できればtableは使わずdiv（ブロック要素）ですべてcss記述したい派なんだけど、、まだチカラと知識が及ばず。

ブログの構造

html
head
body

#container #banner #main └ content - entry-body #side #footer

上のようなブロック状に要素が分かれています。
#containerのなかに#banner他のブロックが含まれ、さらにそのなかにも細かい要素が入れ子のように収められています。
idやセレクタ名は自分で名前を変えられます。

ブロック要素
html記述　div id="要素名"
css記述 　#要素名 {プロパティ : 値 ;}