小粋空間ではMovableTypeのテンプレートをバージョン3版から配布していますが、新しくSEOに対応したウィジェント対応テーマセットが配布されています。
バックグラウンドの配色を変えていますが3カラム表示です。
これまでとは変わりないように見えますが、SEO対応版ではヘッダーの次にブログ記事（ウェブページも含む）が来るように変更されています。
ブラウザからスタイルシートを適用しないで見ると、この作り方がよく分かります。
従来は、ヘッダー→サイドバー→ブログ記事→フッターという流れになっていましたが、SEO対応版では、ヘッダー→ブログ記事→サイドバー→フッターというように、ブログ記事とサイドバーの流れを入れ替えています。以下は、メインindexテンプレートです。
|
<mt:unless name="page_layout" like="column"> <mt:setvar name="page_layout" value="layout-three-column" /> </mt:unless> <mt:setVar name="main_template" value="1" /> <mt:setVar name="main_index" value="1" /> <mt:include module="ヘッダー" /> <div id="content"> <div class="blog"> <mt:entries> <mt:entryTrackbackData /> <mt:include module="ブログ記事の概要" /> </mt:entries> <p class="content-nav"><a href="<mt:link template="アーカイブインデックス" />">Archives</a></p> </div> </div> <mt:if name="page_layout" like="layout-three-column-right|layout-three-column-liquid-right"> <mt:else> <mt:if name="page_layout" like="three|left"> <div id="links-left-box"> <dl id="links-left"> <mt:include module="サイドバー2" /> <mt:if name="page_layout" like="two"> <mt:include module="サイドバー" /> </mt:if> </dl> </div> </mt:if> </mt:if> <mt:if name="page_layout" like="layout-three-column-right|layout-three-column-liquid-right"> <div id="links-left-box"> <dl id="links-left"> <mt:include module="サイドバー2" /> </dl> </div> </mt:if> <mt:if name="page_layout" like="three|right"> <div id="links-right-box"> <dl id="links-right"> <mt:if name="page_layout" like="two"> <mt:include module="サイドバー2" /> </mt:if> <mt:include module="サイドバー" /> </dl> </div> </mt:if> <mt:include module="フッター" /> |
ブログ記事の設定は、<div id="content">～</div>間に行われています。
|
<div id="content"> <div class="blog"> <mt:entries> （ブログ記事の設定記述） </mt:entries> </div> </div> |
※スタイルシートの変更
スタイルシートは、ブログ記事部分は.layout-three-column #content { }間に記述され、デフォルトでは幅数は478pxとなっています。この例では、528pxと、50px広げています。
|
.layout-three-column #content { float: left; width: /*478px*/528px ; border-bottom: 1px solid #669; border-left: 1px solid #669; border-right: 1px solid #669; margin-left: 185px; } |
1カラムや3カラム右サイドバー、2カラム右サイドバーでは差し支えありませんが（従来通り）、3カラムや2カラム左サイドバーではこのまま再構築すると、左側サイドバーがブログ記事側にずれて表示されます。このためには、左側サイドバーも50px左にずらして表示させる必要があります。.layout-three-column #links-left-box {}の部分です。デフォルトでは-665pxなので、-715pxに設定すればいいことになります。
|
.layout-three-column #links-left-box { |
なお、このままだと右サイドバーが落ちますから、全体の幅数も50px広げます。この例では、3カラム表示ですから、3カラムの部分の設定をします。デフォルトでは850pxなので、900pxとします。
|
/* 3カラム固定レイアウト幅 */ .layout-three-column-right #box, .layout-three-column #box { width: /*850*/900px; } |
※いずれも赤い部分が修正した個所
なお、SEO対応テーマセットは、MovableType5版のみが配布されています。
