宵闇書房　Twilight bookstore

<< Serene Bachテンプレート・「basic2」 | テンプレートアップデート「basic2」 >>

2007/03/25 Sunday 23:20

Serene Bachテンプレート・「basic3」

久しぶりの3カラムテンプレートです。

左右のリスト部分にどの独自タグをどう配置しようかと悩んだのですが、side_aブロックに大切そうなものを、side_bブロックにあまり大切そうではないものを並べてみました。ここら辺はお好みで変更してくださいませ。おすすめ商品だけを並べる、というのも面白いかもですな。

同デザインの2カラム版「basic2」も公開中です。

「basic3」

basic3

サンプル

サンプルは以下のとおりです。

最終更新日

2007/03/25 ver.1.00: 公開。

！　ダウンロードされました方は最終更新日をご確認ください。

ご利用に当たってのお約束事と、ダウンロードは「続きを読む」からどうぞ。

続きはここから

利用規約

このテンプレートはSerene Bach用のテンプレートです。その他のブログツールでのご利用はご遠慮ください。
テンプレートの加工・改造はご自由に行っていただいてかまいません。ただし、このテンプレートに使われている画像をほかのテンプレート等に使用することは禁止です。
アダルトサイト（同人を除く）、宗教サイト、違法サイト、ホームページ制作代行業者の使用はご遠慮ください。また、一切の二次配布、商用使用は禁止です。
テンプレートを予め組み込んだ上で配布、若しくはサービスを展開することは禁止です（ex.プリインストールした上で、ブログサービスを展開するなど。再配布と見なします）。
著作権は放棄していません。
リンクは必須ではありませんが、してくださるとうれしいです。

その他、ご不明な点等ありましたら、予めご連絡をお願いします。

使用方法

LZH形式で保存しています。ダウンロード後は「Lhaplus」や「解凍レンジ」で解凍して下さい。
解凍したフォルダの中のテキストファイルを管理画面の「テンプレート」の「インポート」から読み込んで下さい。

ダウンロード

basic3.lzh

その他

WinXPのInternet Explorer7/6.0/5.1、Opera 9.10、Firefox2.0.0.3にて確認しています。

カウンター、アクセス解析、ページナビゲーションのタグが入っていますが、それ以外が必要だという方は加工・改造してください。

カスタマイズ用画像

背景画像は3色用意しています。固定幅、可変幅（リキッドレイアウト）それぞれ同梱しておりますので、お好みにあわせてお使いください。

白（#fff、ファイル名は_wh）
薄い灰（#eee、ファイル名は_gr）
濃灰（#525252、ファイル名は_bk）

また、サイト名下の斜線画像も8色用意しています。ファイル名はtb_basic_body1.gif～tb_basic_body8.gifの連番です。

basic色変え用サンプル

ヘッダへメニューを追加

プロフィールやインフォメーション、リンクページなどへのリンクに使うことのできるメニューを追加します。

以下のソースをHTMLテンプレートのの直後に追加してください。

<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>

#にはURLを、menu1～4にはリンクを張るための文字をどうぞ。リストの数はお好きなように変えてくださいませ。

横型カレンダを追加

以下のソースをHTMLテンプレートの<div id="body">の直後に追加してください。

<!-- BEGIN calendar -->
<div class="calendar">
{calendar_horizontal}
</div>
<!-- END calendar -->

以下のソースをCSSテンプレートの最後に付け加えてください。

/* -------------- calendar horizontal --------------- */
div.calendar{
margin:0 auto;
padding:0 0 10px 0;
text-align:center;
font-size:74%;
word-spacing:5px;
}

リキッドレイアウトに変更

固定幅から可変幅へとレイアウトを変更することが可能です。

以下のソースをCSSテンプレートの最後に付け加えてください。

/* ------------------ liquid layout ----------------- */
html,body{
background:#fff url({site_parts}tb_basic_bground_wh_left.gif) repeat-y 10px 0;
}
body{
padding:0 10px 0 20px;
}

/* 全体の幅・フォントなど */
div#header,
div#body,
div#footer{
width:auto;
padding:0 25px 0 15px;
background:#fff url({site_parts}tb_basic_bground_wh_right.gif) repeat-y 100% 0;
}

/* ヘッダー部分 */
div#header{
padding:30px 25px 15px 15px;
}

/* エントリー部分 */
div#main{
background:url({site_parts}tb_basic_body1.gif) repeat-x 0 0;;
}

/* フッター部分 */
div#footer{
clear:none;
}

/* サイドバー部分 */
div#side_a{
margin:0 0 0 -100%;
}

div#main,
div#side_a,
div#side_b{
padding:135px 0 0 0;
}

横型カレンダの追加（リキッドレイアウトの場合）

以下のソースをHTMLテンプレートの<div id="body">の直後に追加してください。

<!-- BEGIN calendar -->
<div class="calendar">
{calendar_horizontal}
</div>
<!-- END calendar -->

上記「リキッドレイアウトに変更」を行った上で、以下のソースをCSSテンプレートの最後に付け加えてください。

/* ------ liquid layout + calendar horizontal ------- */
div.calendar{
padding:135px 0 15px 0;
background:url({site_parts}tb_basic_body1.gif) repeat-x 0 0;
text-align:center;
font-size:74%;
word-spacing:5px;
}

/* エントリー部分 */
div#main{
background:none;
}

div#main,
div#side_a,
div#side_b{
padding:0;
}

comments

comment form

trackback url

トラックバックは承認制です。言及リンクがない場合には公開致しませんのでご了承下さい。

http://twilightbookstore.org/blog.cgi/447

宵闇書房 Twilight bookstore