宵闇書房　Twilight bookstore

<< Internet Explorer 7をインストール | Serene Bach 2.08Dにアップデート >>

2006/11/10 Friday 15:56

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

このテンプレートはShanty Templ@ersの「第2回企画「美味しい」」のもと、つくりました。他の方のテンプレートもこちらのエントリにありますので、是非ご覧下さいませ。

美味しいといえば…ということで私は素直に食べ物を連想、その食べ物の中から今回は柑橘類をテーマにつくってみました。実際に食べるとなると、グレープフルーツ以外はそれほど好んで食べはしないのですが（汗）。

「citrus」

citrus

サンプル

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

最終更新日

2007/03/17 ver.1.02: サイト移転に伴うURLの変更。
2006/11/21/23:07 ver.1.01: Serene Bach ver.2.08Dでコメントできない問題を解消。その他細かなHTML、CSSの修正（詳細 : Serene Bachテンプレートの修正及び一部配布終了について）。
2006/11/10 ver.1.00: 公開。

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

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

続きはここから

利用規約

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

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

使用方法

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

ダウンロード

citrus.lzh

その他

WinXPのIE7/6.0/5.1、Opera 9.02、Firefox2.0にて確認しています。

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

エントリーへの挿入画像の横幅について

横幅が425px以上のものを挿入すると崩れますのでお気を付け下さい。

カスタマイズについて

色の変更

デフォルトの緑（ライム）以外に、橙（オレンジ）と黄色（レモン）の画像を同梱しています。

CSSの画像名の「…_gr.gif」の所を全て「…_or.gif」又は「…_yl.gif」に変更してください。

左右の入れ替え

CSSの以下の部分を修正してください。

/* ヘッダー部分 */
div#header{
width:100%;
height:170px;
background:url({site_parts}tb_citrus_header_l.gif) no-repeat 50% 100%;
}

/* エントリー部分 */
div#main{
float:right;
width:470px;
}

/* サイドバー部分 */
div#side{
float:right;
width:270px;
background:url({site_parts}tb_citrus_side.gif) no-repeat 0 0;
}
/* エントリーナビ */
div.sequel{
padding:0 20px 10px 10px;
font-size:84%;
text-align:center;
}

/* 記事 */
div.entry,
div.comment,
div.comment_form,
div.trackback_url,
div.trackback,
div.profile{
width:100%;
padding:0 0 50px 0;
background:url({site_parts}tb_citrus_entry_title_gr.gif) no-repeat 10px 0;
}

/* 記事の日付 */
div.entry_date{
margin:0 20px 30px 70px;
padding:3px 5px 2px 5px;
border-bottom:1px solid #eee;
color:#ddd;
font-size:115%;
font-family:"Century Gothic",sans-serif;
letter-spacing:0.2em;
}

/* 記事のタイトル */
h2.entry_title{
margin:-23px 0 0 0;
padding:0 25px 0.5em 75px;
font-size:115%;
font-family:"Century Gothic",sans-serif;
font-weight:normal;
}

/* 記事、記事の続き */
div.entry_body,
div.entry_more{
padding:0 25px 0 15px;
font-size:90%;
line-height:1.9;
}

/* カテゴリーなど */
div.entry_state{
margin:0 20px 0 10px;
padding:3px 5px 0 5px;
border-top:1px solid #eee;
font-size:74%;
text-align:right;
}
/* コメントのタイトル */
div.comment h3,
div.comment_form h3,
div.trackback_url h3,
div.trackback h3,
div.profile h2{
margin:0 20px 23px 70px !important;
padding:18px 5px 0 5px;
border-bottom:1px solid #eee;
font-size:115%;
font-family:"Century Gothic",sans-serif;
font-weight:normal;
}

/* コメント、トラックバック */
div.comment dl,
div.trackback dl{
margin:0.5em 25px 0.5em 15px;
line-height:1.9;
}

/* コメントフォーム */
div.comment_form dl{
padding:5px 20px 0 10px;
font-size:100%;
text-align:left;
}

/* トラックバックURL */
div.trackback_url div.entry_body{
margin:0 25px 0 15px;
padding:0 10px;
border:3px double #eee;
text-align:center;
}

/* ページナビ、ページトップ */
div.pagenavi,
div.pagetop{
padding:0 20px 10px 10px;
font-size:74%;
text-align:center;
}

comments

ねこ | 2006/11/13 Monday 19:00: 初めまして、こんばんは。
柑橘類が好きなので是非使わせて頂きたい！と思い、早速DLさせて頂きました。
素敵なテンプレートありがとうございます。
テンプレートをインポートして気付いたのですが、「recent comments」の部分だけ何故か元記事の部分のリンクが外れており、それが原因なのかは分かりませんがコメント部分のリストマークが画像ではなく「→」になっています。
カスタマイズでタグをいじった訳ではないのでどう直して良いか分からないので質問させて頂きました。
お手数だとは思いますが、お時間の良い時で構いませんので回答頂けると有難いです。

ねこ | 2006/11/14 Tuesday 12:19: 色々調べていたら自己解決できました＾＾
お騒がせしてしてすいません。

Jura | 2006/11/15 Wednesday 20:20: こんばんは～
いっただきーっ！！
久々にトルキーさんの天麩羅……じゃなかった、テンプレ使わせていただきますｖｖ

美味しいテンプレに見合った美味しいサイトにしないとだわ～
ではでは！

トルキー | 2006/11/16 Thursday 00:43: ＞ねこさま
初めまして、こんにちは。テンプレのご利用、ありがとうございます！
解決済みとのことですが、フォントが原因だったのかなぁ…とちょっと想像してみました。フォントが小さいと矢印が⇒ではなくて→に見えますね；；

＞Juraさま
こんばんは、お久しぶりです。テンプレのご利用、ありがとうございます。
見た目を美味しくしていただいたところで、中身も美味しくしてくださいませ＾＾

はる | 2006/11/16 Thursday 21:00: 素敵なテンプレートですね。
早速、DLさせていただきました。
これからもよろしくお願いします。

絵莉 | 2006/11/17 Friday 02:42: トルキーさんこんばんは。
こんな時間に失礼します。

素敵なテンプレート！
さっそくお借りしました！
ありがとうございました！
これからも頑張ってください^^

トルキー | 2006/11/19 Sunday 00:25: ＞はるさま
こんにちは。
新しいテンプレもマイペースでつくっておりますので、のんびりお待ちいただけると幸いです＾＾
こちらこそ今後もよろしくお願いします！

＞絵莉さま
こんにちは。
私も時々、いやしょっちゅうその時間帯まで起きていることが…。夜更かしって楽しいですよね（笑）。
今回のは前回と違って私らしいテンプレかなぁと思っています。また次回もお楽しみに！

nougat | 2007/03/21 Wednesday 21:07: はじめまして。テンプレートをＤＬし、無事に設置できましたのでご挨拶に参りました。ありがとうございました。

トルキー | 2007/03/21 Wednesday 23:47: ＞nougatさま
テンプレートお気に召していただけまして嬉しい限りです。
設置お疲れ様でした！

sb初心者 | 2007/04/11 Wednesday 22:45: 素敵なテンプレートを公開していただいて
ありがとうございます。
ブログの初心者ですが
とてもキレイなテンプレートで
楽しく使わせていただいております。

質問なのですが
本文の文字間隔を広げたく思い
CSS の div.entry_body と div.entry_more
に letter-spacing:0.1em; を
つけくわえたのですが
こうすると、本文中の <br /> が
無効になり改行されなくなります。
これは仕様として仕方がないのでしょうか？

トルキー | 2007/04/11 Wednesday 23:42: ＞sb初心者さま
こんにちは。テンプレートのご利用、ありがとうございます。

さてさてご質問の件ですが、letter-spacingについてはブラウザのバグですね。
http://cssbug.at.infoseek.co.jp/detail/winie/b022.html

上記サイトの補足から、
div.entry_body br,
div.entry_more br{
letter-spacing: 0;
}
…恐らくこれをCSSに追記することで回避できると思うのですがどうでしょうか（未確認です）。

sb初心者 | 2007/04/12 Thursday 23:44: トルキー様
ご丁寧にコメントを頂き
ありがとうございます。
頂いたとおりで無事に解決できました。
これからも使わせていただきます。
ほんとうに、ありがとうございました。

トルキー | 2007/04/14 Saturday 23:31: ＞sb初心者さま
こんにちは。無事解決できましたようで良かったです。
また何かありましたら遠慮なくお聞きくださいませ＾＾

sa | 2007/08/02 Thursday 22:02: こんにちは。こちらのテンプレートおかりしました。「おいしそうな夏」という感じでとてもステキです♪

ひとつ質問なのですが、このテンプレートでサイドのAmazon画像に説明文を回り込み表示させたいのですがどうやっても出来ません。どのようにしたら良いでしょうか？

トルキー | 2007/08/15 Wednesday 23:43: ＞saさま
こんにちは、テンプレのご利用、ありがとうございます。
お返事互い変遅くなりました。
Amazonの画像についてですが、以下をCSSに付け加えてくださいませ。

div#side dl.recommend img{
float:left;
margin:5px 1em 1em 0;
}
/* 回り込み解除 */
div#side dl.recommend dd:after{
content:"";
display:block;
clear:both;
visibility:hidden;
}
div#side dl.recommend dd{
display:inline-table;
min-height:1px;
}
/* Mac IE \*/
* html div#side dl.recommend dd{
height:1px;
}
div#side dl.recommend dd{
display:block;
}
/* */

/* 回り込み解除 */ 以下については、画像の高さよりも文章が短かったときに、余計なものまで回り込みされてしまうのを解除するためのものになります。

トルキー | 2007/08/15 Wednesday 23:43: お返事互い変→お返事がたいへん、ですね…。いつもながら変換ミスすみません。

sa | 2007/08/20 Monday 21:18: トルキーさま
お忙しいところ説明ありがとうございました*^^*
ばっちしOKでした。
テンプレもお借りした上、カスタマイズの説明までいただき大変恐縮デス^^;

（こちらのレスはいりません！^^）

comment form

trackback url

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

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

trackback

第2回企画「美味しい」: Shanty Templ@ers | 2006/11/12 Sunday 01:02; みなさんお待ちかねの第2回企画「美味しい」公開日となりました！「美味しい」というテーマは簡単なようで難しく、ただ食べ物のモチーフを使っただけだと「食べ物」というテーマだしなぁ･･･とテンプラー...

宵闇書房 Twilight bookstore