小粋空間  -  a cheap joke and a play on words site

Seesaa ブログテンプレートのカラムレイアウトを変更する

当ブログで配布中の Seesaa ブログテンプレートの3カラムレイアウトを切り返るカスタマイズです。
ご質問を頂きましたので本エントリーにて紹介致します。

１．デフォルトの3カラムレイアウト

デフォルトの3カラムレイアウトのCSSは次のようになっています。赤色の部分が左サイドバー表示用タグです。次項でこの部分を移動します。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
...後略...

表示例

２．サイドバーを右側に表示する1

2つのサイドバーを右側に表示するには、１項の左サイドバー表示用タグ（赤色部分）を次のように、中央カラム表示用タグと右サイドバー表示用タグの間に移動します（青色部分）。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
...後略...

完成例

３．サイドバーを右側に表示する2

１項の左サイドバー表示用タグ（赤色部分）を、右サイドバー表示用タグの下に移動すれば、サイドバーの表示順序を入れ替えることができます。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
...後略...

完成例

４．サイドバーを左側に表示する

2つのサイドバーを左側に表示するには、中央カラム表示用タグの直前に、右サイドバー表示用タグを移動します（青色部分）。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 ...後略...

完成例

• 
• Tweet