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

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

Posted at July 23,2008 2:05 AM
Tag:[Seesaa, Template]

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

1.デフォルトの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 -%>
...後略...

表示例

3カラム

2.サイドバーを右側に表示する1

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

...前略...
<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 -%>
...後略...

完成例

3カラム

3.サイドバーを右側に表示する2

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

...前略...
<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 -%>
...後略...

完成例

3カラム

4.サイドバーを左側に表示する

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 -->
<!-- 中央カラム終了 -->
 ...後略...

完成例

3カラム

関連記事
zenback
人気エントリー
トラックバックURL


コメント

こんばんは。

Mozilla Re-Mixのmoziller です。

すっかりご連絡が遅れまして申し訳ありません。質問に対する記事の追加まことにありがとうございました。

非常に参考になりました。

まだAMNさんのバナーサイズなどとの兼ね合いもあり、目的のスタイルへの変更は行っていませんが、記事の通りの設定と、CSSの各部サイズ変更でうまくいきそうです。

また、何かとご教授いただくこともあるかと思いますが、今後ともよろしくお願いいたします。

[1] Posted by moziller : September 25, 2008 10:30 PM

>mozillerさん
こんばんは。
ご連絡ありがとうございました。

こちらこそどうぞよろしくお願い致します。
ではでは!

[2] Posted by yujiro logo : September 27, 2008 2:37 AM

お世話になります。mozillerです。

本日、ご指導のとおり実行し、テンプレを右2列バージョンに変更することができました。

まだ細かな部分でおかしなところがあるかもしれませんが、ボツボツ調整していきたいと思います。

ありがとうございました。

[3] Posted by moziller : September 29, 2008 4:48 AM

>mozillerさん
こんにちは。
ご連絡ありがとうございまいした。
また何かございましたらご連絡ください。
ではでは!

[4] Posted by yujiro logo : September 29, 2008 4:36 PM

初めまして。

ブログカスタマイズを勉強中のてつおといいます。

参考になります。
ありがとうございます。

[5] Posted by てつお : November 12, 2008 3:49 PM

>てつおさん
こんにちは。
コメントありがとうございました。
お役に立てたようで良かったです。
ではでは!

[6] Posted by yujiro logo : November 17, 2008 9:49 AM

記事の内容参考にさせていただき無事カスタマイズできました。3カラムのままwarap使うやり方は難しくて挫折してしまいましたが、これでかなり満足してます。ありがとうございますm(_ _)m

[7] Posted by umomon@アフィリエイトで稼ぐ人 : June 3, 2009 12:08 PM

>umomonさん
こんにちは。
ご連絡ありがとうございました。
お役に立てたようで良かったです。
ではでは!

[8] Posted by yujiro logo : June 3, 2009 5:26 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)