宵闇書房　Twilight bookstore

<< Serene Bach 2.10Dにアップデート | テンプレートアップデート「hollow」 >>

2007/03/04 Sunday 00:18

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

すっかりご無沙汰でございます。

先日のMilliさんのエントリを機にあれこれ考えたこともありまして、どうせならある程度カスタマイズにも対応したデザインテンプレートを…ということで、こんな形のものをつくってみました。

全く関係ない話ですが、水面下に潜っている際に一つ年を取ってみたのですけれども、大して気分も何も変わりませんね。ただ、そろそろ自分で年を言いたくなくなってきたことぐらいでしょうか…。

「hollow」

hollow

サンプル

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

最終更新日

2007/03/17 ver.1.02: サイト移転に伴うURLの変更。CSSの若干の修正（アップデートする必要はありません）。
2007/03/07 ver.1.01（公開は2007/03/11/22:11）: Mac IE用にCSSを修正。大幅に変わっておりますので再度のダウンロードをお願いします。
2007/03/04 ver.1.00: 公開。

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

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

続きはここから

利用規約

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

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

使用方法

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

ダウンロード

hollow.lzh

その他

WinXPのInternet Explorer7/6.0/5.1、Opera 9.10、Firefox2.0.0.2にて確認しています（…が、IE5.1ではメニュー部分が透過されませんし、IE6.0ではメニュー部分のロールオーバー画像が出ません。ご了承ください）。

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

カスタマイズについて

Internet Explorer6.0及び5.5用にCSSハックを多用しております。カスタマイズの際にはご注意ください（Mac IEとか、* html ～と書かれているところは、画像入れ替えの場合を除いてあまりいじらない方がいいかと思います）。

カスタマイズ用画像

カスタマイズのために、モノクロ画像をたくさん追加しました。

…_right.gifという画像は全てリスト部分が右側（本文が左側）用、逆に、…_left.gifという画像は全てリスト部分が左側（本文が右側）用になります。

_bk、_wh、_gyという画像は全て色違いになります。

あまりにたくさんあるので、カスタマイズ用の物のみ一応羅列しておきますな。

tb_hollow_bground_bk_left.gif （リスト左用背景画像、濃灰、#525252で使用）
tb_hollow_bground_bk_right.gif （リスト右用背景画像、濃灰、#525252で使用）
tb_hollow_bground_gr_left.gif （リスト左用背景画像、淡灰、#f8f8f8で使用）
tb_hollow_bground_gr_right.gif （リスト右用背景画像、淡灰、#f8f8f8で使用、初期設定）
tb_hollow_bground_wh_left.gif （リスト左用背景画像、白、#fffで使用）
tb_hollow_bground_wh_right.gif （リスト右用背景画像、白、#fffで使用）
tb_hollow_body_left.gif （リスト左用#body背景画像）
tb_hollow_body_right.gif （リスト右用#body背景画像、初期設定）
tb_hollow_footer_left.gif （リスト左用#footer背景画像）
tb_hollow_footer_right.gif （リスト右用#footer背景画像、初期設定）
tb_hollow_gnavi_bk.png （メニュー部分背景画像、黒、初期設定）
tb_hollow_gnavi_wh.png （メニュー部分背景画像、白）
tb_hollow_gnavi_allow_bk.gif （メニュー部分マウスオーバー用画像、黒）
tb_hollow_gnavi_allow_wh.gif （メニュー部分マウスオーバー用画像、白、初期設定）
tb_hollow_stitle_bk_left.gif （リスト左用リストタイトル背景画像、黒）
tb_hollow_stitle_bk_right.gif （リスト右用リストタイトル背景画像、黒、初期設定）
tb_hollow_stitle_wh_left.gif （リスト左用リストタイトル背景画像、白）
tb_hollow_stitle_wh_right.gif （リスト右用リストタイトル背景画像、白）

ヘッダのメニューについて

プロフィールやインフォメーション、リンクページなどへのリンクにお使い下さい。カテゴリーの少ない方は各カテゴリーへのリンクを張ってもいいと思います。

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にはリンクを張るための文字をどうぞ。

メニューが要らないという方は、上記の部分を削除して下さい。

また、この部分の背景画像にはアルファチャンネルPNGを使っています。このため、ヘッダ部分の背景画像の入れ替えが可能ですので、お好きな画像を入れてくださいませ。カスタマイズなし状態では私が去年撮った自宅庭の紫陽花画像になっております。

なお、アルファチャンネルPNGをInternet Explorer6.0・5.5に適用させるため、AlphaImageLoaderを使用しました。メニュー部分にはデフォルトの黒以外に白画像も同梱しておりますが、このカスタマイズをする際には2カ所を書き換えることになります。ご注意ください。

左右の入れ替え

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

html,body{
margin:0 auto;
background:#f8f8f8 url({site_parts}tb_hollow_bground_gr_left.gif) repeat-y 50% 0;
text-align:center;
}

/* ボディ部分 */
div#body{
background:url({site_parts}tb_hollow_body_left.gif) no-repeat 0 0;
}

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

/* サイドバー部分 */
div#side{
float:right;
width:250px;
padding:24px 0 0 0;
}

/* サイド */
div#side dl{
padding:0 15px 20px 15px;
background:url({site_parts}tb_hollow_stitle_bk_left.gif) no-repeat 50% 0;
}

comments

千秋 | 2007/03/04 Sunday 15:21: こんにちは～♪
いつもながら惚れ惚れするテンプレートですね(ﾉ´∀｀*)
当分変更するつもりはなかったのにどうしても使わせてもらいたくて、テンプレ変更しちゃいました。
いつもありがとうございますm(_ _)m

絵莉 | 2007/03/04 Sunday 23:04: こんばんは。
とっても素敵なテンプレート！
さっそくお借りしました(^^)
ありがとうございました！

ish | 2007/03/05 Monday 02:06: トルキーさん、今晩は！
久しぶりに僕でもいじれそうなテンプレで、嬉しく思っています。幅を変えたりトップの画像入れ替えたり(アルファチャンネルPNGが何なのかまだわかってない)、その他もろもろやってみようかな。(grayishの後継として)

さて、ご参考までに以下お伝えしておきますが、MacIEでヘッダメニュー部(検索部含む)の表示が崩れているようです。どう崩れているか、…うーん、文章では表現難しいっす(¨;)
強いて言うなら、ヘッダメニュー部に、検索部がかぶってるというか、左に寄ってしまってるというか、そんな感じです。
毎度ながらMacIEには辟易させられますね。使ってる人ももはや少ないだろうけどなあ。
IE5.1や6.0での表示について書かれているのと同様の状態なのかも知れませんが、取り急ぎご連絡まで。

トルキー | 2007/03/11 Sunday 22:47: ＞千秋さま
テンプレートのご利用、ありがとうございます…！
が、申し訳ありません、CSSの方修正しましたので、お手透きの際にでも再度ダウンロードしていただけましたら幸いです。

＞絵莉さま
テンプレートお気に召していただけまして幸いです！
が、千秋さんのコメントにも書きましたとおり、バグ修正版を出しましたので、再度のダウンロードをお願いいたします。MacIEでは目も当てられない状況になっておりました；；

＞ishさま
こんばんは。
ご連絡ありがとうございました。
MacIEでの確認をさぼっていたらば酷い状態でした。キャプチャサイトで見たのですが、あれはちょっとまずすぎですね。せっかくのアルファチャンネルPNGも活きておりませんで（汗）。
最低限見られる状態に直しましたので、ご確認いただけましたら幸いです。

もうちょっと早めに出したかったのですが、管理画面でエラー頻発のため、公開をためらい遅くなってしまいました。
コメント投稿は大丈夫かなぁ…。

ish | 2007/03/12 Monday 01:11: 早速MacIEで確認したところ大丈夫でした。実はコメントした後、他にも気になる点があったのですが、それも修正されています。ありがとうございました。
前コメント後、トルキーさんにしては反応が遅いので(失礼)、なんか無礼なことしたかなあとビビってたのですが(笑)、トラブルぎみだったのですね。早く調子が戻ってくれることを願っています。

千秋 | 2007/03/12 Monday 10:00: いつもお世話になりますm(_ _)m
修正完了しました！！
ありがとうございます(*^▽^*)ﾉ

トルキー | 2007/03/13 Tuesday 23:56: ＞ishさま
慣れない技術は使うものではないですね。裏で何人かの方のお手を煩わせてしまいました。
コメント投稿や他の動作は全く問題ないのですが、初めてのトラブルでとまどっているのが現状です。サーバ移転も視野に入れつつ、どうしようかと悩んでいるのですが…うーん。

＞千秋さま
こちらこそお世話になります。
お手数をおかけしました<(_ _)>

サチ | 2007/03/23 Friday 02:06: トルキーさんこんばんは！
grayishのファンで使い続けてきましたが　MTのフラッシュカレンダーを導入してみようと頑張って　ドコか壊れちゃったみたいで　コメントページに飛ぶとサイドバーが崩れちゃって…(T▽T)
またDLさせて頂こうと飛んできましたが　配布終了なさったんですね～(T▽T)あうぅ…残念です。。。

hollowを後釜に…とDLさせていただきました…が、grayishとサヨナラできるか…（爆）

トルキー | 2007/03/24 Saturday 00:12: ＞サチさま
こんばんは。
grayishはかなり古いテンプレートで、自分で納得できないものがありましたので配布終了にしてしまいました。
バックアップがあればそちらを再度インポートしていただくのが早いのですが…ありますでしょうか？
divの閉じタグが足りないのが恐らく原因なのですが、うーん…。
<div class="comment_form">の上に</div>を足せば直らないでしょうか。

hollowを後釜に…はちょっと癖のあるテンプレートですので、難しいところも多々あるかと思います。
近々別のテンプレートを公開しますので、それがどちらかというとかわりに近いかもです。もうちょっとお待ちくださいませ＾＾

サチ | 2007/03/24 Saturday 01:38: トルキーさま

治りました！！　配布終了なのに、ご指導いただきありがとうございます(T▽T)
あ～　嬉しい！！grayish大好きなので♪

これからも使い続けて行けそうです＾＾
本当に嬉しいです～　ありがとうございました！！

トルキー | 2007/03/25 Sunday 00:02: ＞サチさま
お、直りましたか。良かったです～。
配布終了したものにつきましてもできる限りサポートいたしますので、また何かありましたらいらしてくださいませ＾＾

以下、お節介ながら。
Serene Bachのバージョンが古いようですのでアップデートをおすすめします。
XSSの脆弱性（悪意を持った攻撃を仕掛けられる可能性があるということですね）が古いバージョンにはありますので…。

サチ | 2007/03/27 Tuesday 02:10: トルキーさま
バージョンUPも済ませました！
ありがとうございました＾＾
これからも素敵なテンプレートを楽しみにしています♪
今後ともヨロシクお願いいたします＾＾

トルキー | 2007/03/27 Tuesday 22:34: ＞サチさま
別サイトに飛ばされるという現象が実際に起きているようですので、余計かな…と思ったのですがコメントさせていただきました＾＾；
こちらこそ今後ともよろしくお願いします！

tack.gussy | 2007/04/01 Sunday 01:31: はじめまして。。こんばんわ！
ヘッダーのリンクのあるテンプレを探してたら
こちらの「hollow」が良い感じだったので使わせていただいてます！

ご報告までに。。失礼します！

トルキー | 2007/04/01 Sunday 23:52: ＞tack.gussyさま
初めまして、こんにちは。テンプレートのご利用、ありがとうございます。
カスタマイズ向き…ではあまりないテンプレートですが、色々とお試しくださいね！

アキラ子 | 2007/04/14 Saturday 11:32: 初めまして、です。

テンプレートをお借りしました。
スッキリと、とても感じよくてお借りしたのですが
クセがあってカスタマイズ向きではないとのこと・・・
公開してみましたが、ちょっと自信が無くなりそうです。
どこかでこっそり動作確認をしないといけないかも知れません（笑）

ともあれ、お世話になります。
ありがとうございます。

トルキー | 2007/04/14 Saturday 23:38: ＞アキラ子さま
初めまして、こんにちは。テンプレートのご利用、ありがとうございます。
透過PNG画像（上部メニュー部分ですね）を使ったので、CSSがちょっと面倒なつくりになっております；；ですので、あまりカスタマイズ向きではないかなぁとしておきました。

さて、CSSですが、横幅と横のpaddingを一緒に指定していらっしゃいますので、Firefoxではリスト部分が落ちています；；恐らくIE6.0では大丈夫なのだと思いますが、これはIE側のバグです。
http://cssbug.at.infoseek.co.jp/detail/winie/b001.html

CSSを
div#main{
float:left;
width:500px;
padding:15px 0 10px 0;
}
とすると直りますので、ご確認くださいませ＾＾

アキラ子 | 2007/04/15 Sunday 17:43: トルキーさま

早速ありがとうございます＾＾
CSSの指摘部分を直しました。

記事部分の左右の余白を少しだけ広めに取りたかったのですが
div#mainではなくdiv.entry_bodyのpadding値を変更すれば良かったんですね？
web上のリファレンスだけではCSSに対応できなくなっています。
奥が深いなぁとつくづく思う今日この頃です＾＾；

トルキー | 2007/04/15 Sunday 23:54: ＞アキラ子さま
そうですね、横幅を設定した場合は大抵中の要素で空間を持たせています。このテンプレもそうなってます。
ブラウザのバグがなくなればいいんですが、そうもいかず；；
難しいものです。

comment form

trackback url

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

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

trackback

テンプレ変更: Blanche* | 2007/03/04 Sunday 15:45; テンプレートを宵闇書房さんの「hollow」に変更しました。しばらくはテンプレートを変えるつもりはなかったのに、素敵だったのですぐ作業しましたΣ(´∀｀；)いつも素敵なテンプレートを公開してくださって感謝し...

テンプレ入れ替えとメールアイコン: なんちゃってぶろぐ | 2007/04/14 Saturday 11:00; そう言えば、一週間前ぐらいに桜の開花宣言したはずなのにその後の天候があまり良くない為かいまだチラホラとしか咲いていない。が、咲く直前のつぼみは淡いピンクがとっても可愛らしい、今年の開花は何時もより5...

気分転換にTemplateを変更: tkfm.net | 2007/07/27 Friday 12:02; してみました?♪約1年小粋空間さんのシンプルなテンプレートを使ってきましたが、気分転換に少し画像を盛り込んだものを探してみました。今...

宵闇書房 Twilight bookstore