Top > CMS・ブログ > Seesaaブログテンプレート > 2006年4月
2006年4月10日

Seesaaブログテンプレート

April 10,2006 1:10 AM
Tag:[, , ]
Permalink

Seesaaブログ・3カラムテンプレートSeesaaブログ用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

1.動作確認環境

動作確認は下記の環境で行っています。

  • OS:Windows2000/XP
  • ブラウザ:IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
  • Seesaaブログ:http://koikikukan.seesaa.net/

Mac環境はありませんので Safari での確認はできておりません。予めご容赦ください。

2.利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します

3.カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

  • 3カラム(カラム幅固定)
  • 3カラムリキッドレイアウト(中央カラム幅可変)
  • 2カラム(右サイドバー:カラム幅固定)
  • 2カラム(左サイドバー:カラム幅固定)
  • 2カラムリキッドレイアウト(右サイドバー:左カラム幅可変)
  • 2カラムリキッドレイアウト(左サイドバー:右カラム幅可変)
  • 1カラム(カラム幅固定)
  • 1カラムリキッドレイアウト(カラム幅可変)

の計8種類を用意しています(それぞれのサンプルはちょっと下にある画像をご覧ください)。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます(カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します)。例えば、3カラムレイアウトから2カラム・リキッドレイアウト(右サイドバー)に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

Seesaaブログ・3カラムテンプレート3カラム

<body class="layout-three-column-liquid">

Seesaaブログ・3カラムテンプレート・リキッドレイアウト3カラム・リキッドレイアウト

<body class="layout-two-column-left">

Seesaaブログ・2カラムテンプレート(左サイドバー)2カラム(左サイドバー)

<body class="layout-two-column-liquid-left">

Seesaaブログ・2カラムテンプレート・リキッドレイアウト(左サイドバー)2カラム・リキッドレイアウト(左サイドバー)

<body class="layout-two-column-right">

Seesaaブログ・2カラムテンプレート(右サイドバー)2カラム(右サイドバー)

<body class="layout-two-column-liquid-right">

Seesaaブログ・2カラムテンプレート・リキッドレイアウト(右サイドバー)2カラム・リキッドレイアウト(右サイドバー)

<body class="layout-one-column">

Seesaaブログ・1カラムテンプレート1カラム

<body class="layout-one-column-liquid">

Seesaaブログ・1カラムテンプレート・リキッドレイアウト1カラム・リキッドレイアウト注:左右のマージンをなくすことも可能です。

公開テンプレートは一番上の3カラムレイアウトで配布しております。

カラム数を変更、例えば3カラムから2カラム(左サイドバー)に変更した場合、管理メニューの「デザイン」→「コンテンツ」で右サイドバーに表示するものがなくなれば自動的に2カラム表示になります。
非表示にするサイドバーにコンテンツが残っている場合は、

<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
         :
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>

を丸ごと削除してください。1カラムに変更される場合は左右両方のカラムをごっそり削除してください(いずれもサイドバーの復活が面倒なのでお勧めできません)。

4.コンテンツについて

このテンプレートでは、管理メニューの「デザイン」→「コンテンツ」の設定下記であることを想定しています。

  • ブログ名:ヘッダー
  • ブログ説明:ヘッダー
  • カレンダー:左サイドバー/右サイドバー
  • 新着記事:左サイドバー/右サイドバー
  • 最近のコメント:左サイドバー/右サイドバー
  • 最近のトラックバック:左サイドバー/右サイドバー
  • 記事:メイン
  • 記事検索:左サイドバー/右サイドバー
  • ブログクリック:左サイドバー/右サイドバー
  • カテゴリ:左サイドバー/右サイドバー
  • 過去ログ:左サイドバー/右サイドバー
  • RDF Site Summary:左サイドバー/右サイドバー
  • Powered By:フッター

表示するページ・並び順は任意ですが、ページ毎にカラムレイアウトが異ならないようにしてください。例えばトップページで3カラム・記事ページで2カラムという設定はできませんのでご注意ください。

5.1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています(言い換えると単にサイドバーをとっぱらっただけです)がアーカイブページ等のリンクは考慮しておりませんのでご注意ください。

6.クレジットバナーについて

当サイトのクレジットバナーはデフォルトで右サイドバー下に表示するようにしています。右カラムを削除される場合は下記のタグを左サイドバーに挿入してください。

<div class="side">
<a href="http://www.koikikukan.com/"><img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" style="border:none" /></a>
</div>

7.その他

基本的な動作は確認したつもりですが、Seesaaブログの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

8.テンプレート

2006.10.21 Mozilla 系でフッタのバナーがセンタリングされない不具合を修正
HTML

スタイルシート

2006.12.16
タグクラウド対応するよう修正しました。

2007.03.03
タグクラウド対応で JavaScript エラーが出る不具合を対処しました。

2007.07.03
6項のタグを修正しました。

Comments [150] | Trackbacks [27]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3