<< フィードを燃やせ！ | Serene Bachテンプレート・「basic3」 >>

2007/03/25 Sunday 23:20

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

移転後最初のテンプレートを公開したいと思います。

今回はテンプレート名通り、シンプルでベーシックでありながら美しいテンプレートを目指してつくってみました。

カスタマイズの面にもちょっとだけこだわりまして、固定幅だけではなく、ちょっとだけCSSを付け加えるだけで、可変幅にも変更できます。横型カレンダやヘッダ部分へのメニューの設置も可能です。

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

「basic2」

basic2

サンプル

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

最終更新日

2007/03/27 ver.1.02
直したはずのURLが間違っていたため、またCSSに一部ミスがあったため修正。詳細は「テンプレートアップデート「basic2」」に。
2007/03/27 ver.1.01
当サイトへのアドレスが旧URLになっているのを修正。
2007/03/25 ver.1.00
公開。

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

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

続きはここから

利用規約

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

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

使用方法

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

ダウンロード

その他

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テンプレートの<!-- END title -->の直後に追加してください。

<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にはリンクを張るための文字をどうぞ。リストの数はお好きなように変えてくださいませ。

左右の入れ替え

エントリ部分とリスト部分のレイアウトを左右入れ替えることが可能です。

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

/* ----------------- main <-> side ------------------ */
/* エントリー部分 */
div#main{
float:right;
}

div.sequel,
div.entry,
div.comment,
div.comment_form,
div.trackback_url,
div.trackback,
div.profile,
div.pagenavi,
div.pagetop,
div.profile{
margin:0 0 0 15px;
}

/* サイドバー部分 */
div#side{
float:right;
}

横型カレンダを追加

以下のソースを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{
clear:left;
width:100%;
margin:0 -200px 0 0;
background:url({site_parts}tb_basic_body1.gif) repeat-x 0 0;
}
div.sequel,
div.entry,
div.comment,
div.comment_form,
div.trackback_url,
div.trackback,
div.pagenavi,
div.pagetop,
div.profile{
margin:0 215px 0 0;
}

/* サイドバー部分 */
div#side{
float:right;
clear:right;
width:200px;
}

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

リキッドレイアウトに変更+左右の入れ替え

固定幅から可変幅へとレイアウトを変更し、さらにエントリ部分とリスト部分のレイアウトを左右入れ替えることが可能です。

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

/* --------- liquid layout + main <-> side ---------- */
/* エントリー部分 */
div#main{
float:right;
clear:right;
width:100%;
margin:0 0 0 -200px;
}

div.sequel,
div.entry,
div.comment,
div.comment_form,
div.trackback_url,
div.trackback,
div.pagenavi,
div.pagetop,
div.profile{
margin:0 0 0 215px;
}

/* サイドバー部分 */
div#side{
float:left;
clear:left;
}

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

以下のソースを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{
padding:0;
}

comments

sinnchan | 2007/03/26 Monday 06:59
ご無沙汰しております。
移転後最初のテンプレートということで気合い入ってますね。
ところで一つお聞きしたいのですが、サイト名下の斜線画像部分に自分の好きな写真などを入れることは可能でしょうか？
ぜひご教示お願いします。
トルキー | 2007/03/26 Monday 23:26
＞sinnchanさま
こんにちは。
つくり始めたのは半年ほど前だったのですが、移転にあわせてちょっと気合い入れて完成させてみました（笑）。

さてご質問の件ですね。
＞サイト名下の斜線画像部分に自分の好きな写真などを入れることは可能でしょうか？
可能です。

{site_parts}tb_basic_body1.gifと言うのがデフォルトでの斜線画像です。このURLを変更することで画像自体は変更できます。繰り返し指定などはお好みでどうぞ。

また、画像の高さが違うという場合もあるかと思います。こちらはカスタマイズ前後どちらにおいてもですが、CSSのどこかに padding:135px X X X; となっているところがあると思います（Xは適当な数値）。この135pxは「画像の高さ+15px」を示しています。
ですので、この135pxを「お好みの画像の高さ+15px」に変更していただければ大丈夫です。

分かりにくい説明で申し訳ないですが、こんな感じでしょうか…。
吾子 | 2007/03/27 Tuesday 01:43
初めまして。吾子と申します。
今までこっそり通わせて頂いていたのですが、思い切って書き込みをしています。

新作テンプレート。
春らしく、とても爽やかで可愛らしいので、早速ダウンロードして使わせて頂きました。
でも1つ気付いた事がありまして、テンプレート内のこちらのサイト様へのリンクアドレスが前のアドレスのままになっているようなのですが…？
ご確認の方、お願いします。

これからの新作も楽しみにしています。
短いですが、これで。
トルキー | 2007/03/27 Tuesday 22:32
＞吾子さま
初めまして、こんにちは。
テンプレートの方、お気に召していただけまして嬉しいです。

＞こちらのサイト様へのリンクアドレスが前のアドレスのままになっているようなのですが…？
早速修正いたしました。旧サイトからデータを持ってきた際に直したつもりだったのですが、この部分のみ忘れていたようです。
ご連絡ありがとうございました！
ちち | 2007/03/27 Tuesday 23:30
こんばんは。
いつも素敵なテンプレートをありがとうございます。
さて、twilightbookstore であるべきなのに twiligtbookstore になっていて h が抜けています。
えーと、Template by のリンクのところです。
気がつきましてので、お知らせまで。
トルキー | 2007/03/27 Tuesday 23:42
＞ちちさま
こんばんは。
うぅ、情けないですね、私。早速修正、再度バージョンアップしました。
ご連絡ありがとうございました<(_ _)>
かりん | 2007/03/28 Wednesday 23:25
トルキーさん　こんばんは
春らしく素敵なテンプレートDLさせて頂きました。
ありがとうございました。
トルキー | 2007/04/01 Sunday 23:47
＞かりんさま
こんばんは。テンプレートのご利用、ありがとうございます。
カスタマイズ向けとしてつくりましたので、色々とお試しになっているのを見ると私も非常に嬉しいです＾＾
サチ | 2007/04/02 Monday 14:48
トルキーさんこんにちは！
ご質問なのですが、、
横型カレンダーを挿入した場合、IEではきちんと表示されるのですが、Operaでは右よりになって　２列になってしまいます＾＾；
色々いぢってみたんですが、わからずじまいで…(T▽T)
ご指導いただけたら助かります。。

いつもお手数おかけいたします＾＾；
サチ | 2007/04/02 Monday 14:49
すみません。。言い忘れていました＾＾；
テンプレートはvitaminです
サチ | 2007/04/02 Monday 16:37
トルキーさん、何度もすみません★
出来ました！入れ込んだ場所の問題だったようです。
お騒がせ致しました！！
トルキー | 2007/04/02 Monday 23:33
＞サチさま
えと、次回からは当該テンプレートのところにコメントをお願いしますね。どのテンプレートなのかわかりやすいですし、また、あとで見た方の参考にもなりますので＾＾；

で、肝心のvitaminですが、このテンプレートは横型カレンダのことを考えてつくっておりませんので、カスタマイズは基本的にお使いになる方で、と言うことになります。
…が、できる限りのサポートは致しますので、もし迷われたことがありましたら、URLつきでお願いしますね。未公開のURL等でしたら、メールフォームからでもかまいませんので（Aboutにあります）。

comment form

trackback url

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

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

trackback

information

トルキーのSerene Bachテンプレートと読書記録、そして日々の呟きを綴るweblog（→and more...）。

管理人の他のサイト
  • シンプル系フリー素材サイト「quarter」
  • Serene Bachテンプレート企画サイト「Shanty Templ@ers」。参加者募集中！
advertisement
recommend

シンギュラリティ

シンギュラリティ | メイ | EMIミュージック・ジャパン

Maeのニューアルバム！ヘビーローテーション中（09/30）。

天使の爪 上 (1) (角川文庫 お 13-25)

天使の爪 上 (1) (角川文庫 お 13-25) | 大沢 在昌 | 角川書店

久しぶりに読書。（時間的）余裕があったら後程感想を。おもしろさのあまり、1日で上下読了しました！(08/26)

selected entries
categories
recent comments
recent trackbacks
others
  • Count.