宵闇書房　Twilight bookstore

2005/08/05 Friday 23:33

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

現在宵闇書房@テストブログにて使用中のテンプレートの修正版です。テスト時よりもエントリー幅を若干広げましたが、あまり広げると視覚的に気持ち悪い（しっくり来ない）ため、450px（実質は410px）になっています。
がちがちに画像で固めていますので、全体背景、エントリー部分の幅および背景は画像編集ソフトがなければ変えるのが難しいです。基本的な部分はモノトーンで構成しているので、いろいろな色と併せやすいと思います。文字色でお楽しみ下さい。

一応、Serene Bach添付のプラグイン「sbtext」用のCSSも記述してみました。

「noble」

noble

サンプル

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

最終更新日

2007/03/17 ver.1.06: サイト移転に伴うURLの変更。
2006/11/21/23:07 ver.1.05: Serene Bach ver.2.08Dでコメントできない問題を解消。その他細かなHTML,CSSの修正（詳細 : Serene Bachテンプレートの修正及び一部配布終了について）。
2006/04/28/11:23 ver.1.04: recent trackbacksの綴りミスを修正。
2006/03/30/23:36 ver.1.03: 一部タグへのスタイルの追加、HTML・CSSの修正。
2005/10/06/22:12 ver.1.02: エントリに表示されるリスト部分のCSSを修正。
2005/08/09/21:10 ver.1.01: サブメニュー部分とエントリー内のコメントやトラックバックへのリンク部分がMacintosh版Internet Explorer、safari、Shiiraにて崩れる不具合を解消。
2005/08/05/22:33 ver.1.00: 公開。

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

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

利用規約

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

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

使用方法

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

ダウンロード

noble.lzh

その他

WinXPのIE6.0/5.1、Opera 8.0、Firefox1.04にて確認しています。…が、IE5.1についてはどうしようもなさそうなバグのため、<div class="entry_state">～</div>部分が若干ずれています。

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

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

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

カスタマイズについて

ブログ名の下のメニューについて

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

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にはリンクを張るための文字をどうぞ（要らないときにはすっぱりと削除してください）。

デフォルトでは幅の関係上5つ以上張ると崩れますが、CSSの編集によって若干の増は可能です。

comments

ますみ | 2005/08/09 Tuesday 15:21: こんにちや。残暑お見舞い申し上げます。
「noble」いいですねぇ。早速試してみようかと思ったのですが、気になった点をご報告します。

・MacIEのみです。
http://apple.fool.jp/memo/3.png
cssにbackground-position-xを入れて調整を試みたのですが、なかなかうまくいかないので放棄しました(汗)

・safari、シイラ共通です。
http://apple.fool.jp/memo/2.png
フォントサイズを最小にすれば重なりませんが、それ以上のサイズで見ると重なってしまいます。メニュー部分の高さを少しだけ調整する、エントリー部分を1段下げるなどの方法で解消されるようです。

FireFoxも試したいところですが、どうも私のところのトラはキツネと相性悪いらしく、その気になれません。そのうち気が向いたらまた試します。ご免。

トルキー | 2005/08/09 Tuesday 20:08: ＞ますみさま
こちらこそ残暑お見舞い申し上げます。
最近はすっかりお世話になってしまいまして…。
nobleは実は途中まで自分用につくっていたものなので、少々気合いが違います（笑）。

で、ブラウザごとの違いが…がーん。
いくら何でもこりゃ酷すぎですね。手直ししてみます！

セリア | 2005/08/20 Saturday 16:04: こんにちは。
sbのときからトルキーさんにはお世話になっております。
毎度ありがとうございます。
nobleダウンロードさせていただきました。
nobleが使いたくてSerene Bach設置したのです。もう少しプラグイン揃ってから設置しようと思っていたのですが。
文字の大きさやメイン幅変えさせていただきましたが、メインの背景画像はやはりくずれましてとりあえず削除してみたりなんかして・・・
タイトルの背景画像を入れてみたいなぁなんて思ったりしたのですがなんだかおさまりが悪い・・・グググッ。もう少し頑張ってみます。
ブログ名の下のメニューについての優しい説明書きなどは初心者のセリアには涙が出るほど嬉しいですっ!!!
このナビバーとてもいいですよね。
ﾌﾞﾛｸﾞの欠点のたどり着きたい場所までマウスをクルクル回すのがとても苦手なのでありがたいボタンなのです。
あ、Serene Bachってとてもいろんな設定が可能でおもしろいですね。初心者のくせにCSSいじりが楽しくなって毎日睡眠不足のセリアです。(笑)
トルキーさんのHPはデザインが凝っていていつも目が離せません。とっても素敵です。
これからも楽しみにしています。
どうぞよろしく。セリアでした。

トルキー | 2005/08/20 Saturday 22:55: ＞セリアさま
こんにちは。テンプレのご利用ありがとうございます！
画像を使用したため、どうしてもエントリー部分の幅の自由がきかないのが難点なのですけれども(>_<)
サブメニューは私も愛用しているので、何とかつけることはできないものかな？とやってみました。ページ内リンク、別ページへのリンク等いろいろ活用できると思いますのでお好きな方法をお試し下さいませ！

ブログの方もそろそろ改装したいのですけれども、暑さのせいか気力がさっぱり追いつかない毎日です（笑）。
またいらして下さいませ＾＾

ポムポム | 2005/09/07 Wednesday 11:47: トルキーさん、こんにちは！
いつもお世話になっております。

この度、こちらのテンプレートnobleをお借りしました。
久し振りにテンプレートを変更したのですが、やっぱりトルキーさんのテンプレートが好きで、今回もお借りしました。
どうもありがとうございました。

これからも楽しみにしています。
今後ともどうぞ宜しくお願いします。

トルキー | 2005/09/07 Wednesday 22:46: ＞ポムポムさま
こんにちは！
タイトル部分の落ち葉が秋らしくて素敵です。やはり色を変えると大分イメージも変わりますね。デフォルトは冷たいというか無機質な色合いだったので暖かみがあっていいですねぇ…。
こちらこそ今後ともよろしくお願いします！

Ambivalenz0ｘ | 2005/09/23 Friday 17:58: はじめまして
文字の使い方が気に入りましたのでnobleを今改造して黒系で行ければと思いながら設置に試行錯誤しています
気になったことがあるのでできれば修正方法など教えてくださると幸いです。
広告recommend が配布版だと各商品ごとに入るので場所を食ってしまいます
このブログではそのようになってないので対処版なり対処方法を指示おねがいできないでしょうか？

トルキー | 2005/09/23 Friday 21:24: ＞Ambivalenz0ｘさま
初めまして、こんにちは。テンプレどんどん改造してやってくださいませ！
オススメに関してですが、
1）を<dd id="recommendlist">の下に
2）を<p>{amazon_comment}</p>の下に
それぞれ移動させてみてくださいませ。
但し、こうするとオススメがないときもrecommendのタイトルだけはでてしまうので、この点ご注意下さい。

Ambivalenz0ｘ | 2005/09/25 Sunday 22:29: それ通りにしたら無事設定完了できました
ありがとうございます(´∀｀
CGのパーツとかも書き換えたいので最終版まではまだまだかかりそうです。

allap | 2005/09/26 Monday 16:13: トルキーさん、はじめまして。
散々移行を重ねた挙句、nobleお借りしました。
このテンプレを使うためにSerene Bachに乗り換えたと言っても過言ではありません。
シンプルなスタイリッシュさに惚れました(笑)
ありがとうございました。

トルキー | 2005/09/26 Monday 23:58: ＞Ambivalenz0ｘさま
うまくいきましたようで何よりです。
背景が黒だとコンテンツが引き締まって見えて良いですね。
カスタマイズ頑張ってくださいませ！

＞allapさま
初めまして、こんにちは。
テンプレのご利用、ありがとうございます！
わ、そこまで言っていただけるとなんだか嬉しくも恥ずかしく。
今後ともよろしくお願い致します！

恩田 | 2005/10/08 Saturday 12:43: トルキーさん、こんにちわ。
今日は、テンプレートをお借りしたお礼を改めてしたいなと思って伺いました。もう使い始めてだいぶ経ってしまったのですが…。素敵なテンプレートをありがとうございます。
　nobleのサブメニュー部分の使い勝手とか動作がすごく気に入って愛用させていただいてます。すごくきれいなテンプレートなのに、結構カスタマイズしてしまって申し訳ないような気もしているんですが…；トルキーさんのテンプレートは色使いに飽きが来なくて好きです。

いつも何かリリースされるたびにワクワクして拝見させてもらっています。これからも頑張ってください。

トルキー | 2005/10/10 Monday 02:42: ＞恩田さま
こんにちは。トラバのほう、非常に嬉しく（そしてなんだか無性に照れくさく）読ませていただきました＾＾
サブメニューは私も愛用しているので、デザインのアクセントにもなるし何とかつけたいなぁ…と思って出来たのがあのテンプレートです。なかなか他のデザインではつけにくいのですが、あれはうまくいったような気がしています。
恩田さんのように素敵カスタマイズをされている方を拝見しますと、こちらももっと頑張らねば！と思わされ、非常に刺激になります。
これからもよろしくお願いします！

moonlit | 2005/10/12 Wednesday 12:20: トルキーさん、いつもお世話になっています。

何点かアドバイス頂けたらと思い、またまたおじゃまさせて頂きます。

entry_body、entry_moreにてul li画像をhoverにした時 Opera / Firefoxでは思うように表示されますがIEだとhoverの画像が表示されず枠が表示されます。

profileの表示がずれてしまいます。また、ユーザー名ではなく、任意の言葉にしたいのですがブロック部分の{profile_name}の部分を変えてみたのですが上手くいかずどうにもこうにも行き詰ってしまいました･･･。どうか宜しくお願いします！

トルキー | 2005/10/12 Wednesday 23:43: ＞moonlitさま
ええと、
ul li#hoverとかですかね？hoverはIEだとa:hover以外は未だ対応していないのです（泣）。以下のサイトに詳しいので参考までにどうぞ。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#pseudo-classes
あと、ちらっと見ましたらアルファチャンネルPNGを使ってるようでしたけれども、これもWinIEでは対応していません。MacIEでは大丈夫なんですが…。Microsoftにはいい加減何とかしてもらいたいものです。

プロフィールページですが、どうも<body>のすぐの辺りのタグの順番がいまいちおかしくなっているようです。

ユーザ名にかんしては、私は、テンプレートを
<div class="profile">
{profile_description}
</div>
…として、ユーザ名も中身も全部プロフィールの説明部分に書いてしまうという方法を採っています。ちょっと難しくなりますが、これだとお好みの形に出来るかな、と思います。
あとは、別に新規ユーザをつくってやる方法か、ですね。

わかのすけ | 2005/10/12 Wednesday 23:45: こんばんはー。
以前からnobleを利用したかったのですが、
Serene Bachの再構築の問題で
いまだにバージョンアップに踏み切れず・・・
でも、sbで使いたい！←わがまま

と思っていたところ、Juraさんの記事を参考に
nobleを入れてみました。
テンプレート「twinkle」のトルキーさんと
Juraさんのやりとりも拝見しましたが、
わたしも同じくFirefoxでとんでもない事に。（笑）
エンコードの件、とても助かりましたー。
ありがとうございます。

あと質問なのですが、Firefoxで「recommend」の
画像をクリックしようとすると、画像のない
空きスペースもリンク対象になるのですが
（サンプルだと画像の右、空きスペース）
これは、ブロック・インライン要素と
何か関係があるのでしょうか。
（「display」をインラインにしたら解除されました）
↑よくわからなくてお恥ずかしい限り

ではではー。

トルキー | 2005/10/13 Thursday 00:03: ＞わかのすけさま
リアルタイムでこんばんは（笑）。
Juraさんのエントリ、分かりやすいなーと私も拝見させていただいておりました。まだまだsbユーザの方が沢山いらっしゃいながらも新規テンプレートはSerene Bach用のみにしてしまったので、私もJuraさんには感謝の限りです。

recommendの画像…わ、本当ですね。
inlineにしてくださっても大丈夫です（というか、これ自体削除してくださってもいいですね・汗）。
特にこのままでも支障はないと思われますので、次回アップデートをすることがあれば、ついでに修正、という形になると思います。

しかしなぜblockにしたんだろう…？

nameless | 2005/10/15 Saturday 01:08: nobleステキですね！
早速使わせていただきます。
これからも素晴らしいテンプレート期待しています。
ありがとうございました。

mitti | 2005/10/15 Saturday 01:11: あ・・名前を入れるの忘れてました・・。
ありがとうございました。

トルキー | 2005/10/15 Saturday 03:17: ＞mittiさま
テンプレのご利用、ありがとうございます！
noble、なんだか人気あります。ダントツでダウンロード数がトップです（笑）。
新しいテンプレはまだまだゆっくりのんびり妄想段階ですが、今後もよろしくお願いします。

moonlit | 2005/10/17 Monday 22:10: トルキーさん
おばんです。なんとか修正できました。

まずプロフィール表示のくずれなんですが
プロフィールのテンプレート設定で前のテンプレ、 CSSになっていました。（この設定があるのをすっかり忘れてました）そして、<div class="profile">がダブってました。

ul li#hoverは、PNG→GIFに変更
あとは、放置です！

悩む事約1週間！いやはや･･･お恥ずかしい。
ありがとうございました。

トルキー | 2005/10/17 Monday 23:41: ＞moonlitさま
お晩ですー。
修正お疲れさまでした！
やはり自分一人でやっていると気づかない事って結構あります。何でこんな簡単なことに…とあとで自分でも阿呆らしくなるようなミス、時々やってます（汗）。

私もIE以外のブラウザを使う方のおまけ用に疑似クラスやら何やらを使ってます。楽しんでいただければいいなぁ…と。
また何かありましたら遠慮無くコメントしてくださいませ＾＾

かりん | 2005/11/07 Monday 14:04: トルキーさん　こんにちは
このnobleのテンプレが使用したくて、sbからSerene Bachに移行しました。
また、移行の際にはsb→Serene Bachの移行まとめのエントリーを参考にさせていただき、スムーズに移行できました。
ありがとうございました。
これからもよろしくお願いします。

トルキー | 2005/11/08 Tuesday 22:42: ＞かりんさま
こんにちは。
テンプレのご利用、ありがとうございます！
＞このnobleのテンプレが使用したくて、
…もうこの一言がとっても嬉しいです。
こちらこそこれからもよろしくお願い致します。

瑞希 | 2006/01/20 Friday 09:14: はじめまして

テンプレートを探していたら　ここにきました。報告が遅くなりましたが
お借りしました。
ありがとうございました。

トルキー | 2006/01/21 Saturday 00:04: ＞瑞希さま
初めまして、こんにちは。
テンプレートのご利用、ありがとうございます。
もう使っていただいているだけで嬉しいので、ご報告はお気が向いたら、時間があったらで構わないですよ（でも、頂けたら数倍嬉しいです！・笑）
また、遊びにいらしてくださいませ！

海月 | 2006/02/02 Thursday 17:13: トルキーさん　こんにちわ

昨日はありがとうございました。
エラーなくなりました。なので　もうひとつのｻｲﾄの報告に来ました。まだBLOGの方も終わってないですが・・
このテンプレートすごく気に入ってしまって　本当にありがとうございました。
これからも素敵なテンプレート作ってください。楽しみにしています。

トルキー | 2006/02/03 Friday 00:39: ＞海月さま
こんにちは、昨日…じゃなくて一昨日の件、解決しまして何よりです。また何かありましたらお気軽に＾＾
このテンプレート、人気ですねぇ…。自分でも一時期テストブログで使用していたものなので、思い入れもあります。
では、間田遊びにいらしてくださいませ！

noel | 2007/02/12 Monday 12:05: トルキーさん、こんにちは。
こちらのテンプレートをお借りしましたので、ご報告に上がりました。
どうもありがとうございました。
いままでタイトルに画像を入れたものを使っていたのですが、こういうシンプルなのもいいですね。
とても気に入っています。

ひとつ質問させてください。
＜li＞を作って、その文章を画像に回り込ませたときに、リストの最初に表示される「・」が画像にかぶってしまいます。
具体的には
http://hazel.hacca.jp/sb/log/eid1455.html
の最初の三行になります。

cssのdiv.entry_body ul,以下の部分を少し触ってみたのですが効果がありませんでした。

もしよろしければご教授下さい。
お願いいたします。
長々と失礼いたしました。

トルキー | 2007/02/13 Tuesday 00:16: ＞noelさま
こんにちは。テンプレのご利用ありがとうございます。
nobleは公開してかなりたちますのに、未だに人気がありましてびっくりです。

さて、ご質問の件ですが、
img.pict,
img.thumb{
margin:5px;
padding:0 10px 0 0px;
border:0px solid #eee;
float:left;
}

…というように、paddingを設定すれば回避されますが、ただしこれはFirefoxやOpera、IE7限定になります。
IE6↓でも適用させる場合には、XML宣言（HTMLの一番最初にある一行です）を削除すればいいのですが、文法的にもよいとはいえず（詳しくはここら辺を http://www.lucky-bag.com/archives/2004/11/xml_1.html）、また別のバグを引き起こす可能性もなきにしもあらずです。
根本的解決になりませんですみません…！

noel | 2007/02/16 Friday 11:52: トルキーさん
こんにちは。
解決策のご教示をありがとうございました。さっそく書き加えておきました。

IE6以前では反映されないということですが、なるべくリストを画像に回り込ませないようにしようと思います＾＾；

いろいろとありがとうございます。
コメントはほとんど書き込んでいないのですが、いつも参考にさせていただいています。
これからもどうぞよろしくお願いいたします。

トルキー | 2007/02/18 Sunday 23:55: ＞noelさま
そうそうCSSで躓くことはないのですが、こういった類のものは本当に悩みどころで…難しいです。ブラウザごとにあれこれありますし(つД`)
こちらこそ今後もよろしくお願いいたします！

comment form

trackback url

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

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

trackback

テンプレート: Thhawks.net | 2005/08/21 Sunday 01:28; sbを使い始めてから、ずっと宵闇書房　Twilight bookstoreのテンプレートを改造して使っている。全部を１から作るのはあまりにも厳しいので･･･これまでのテンプレートはノートの２カラムを改造してました。今のは...

久しぶりのカスタマイズ: neige essai | 2005/08/31 Wednesday 15:13; 久々にテンプレを変えてみました。SERENE BACHに変更してから初めて…だよね。ここんとこ特に、BLOGにUPする気力もなく日々過ごしてたので、このカスタマイズはワタシ的には一大発起に近いものがありました。とか云い...

小さいながらも楽しい我が部屋: day tripper | 2005/10/07 Friday 17:19; 我が家でデザインのベースにさせていただいている宵闇書房さんのテンプレート「noble」がアップデートされたので、該当部分のCSSをいそいそと修正。それにしても、あれだけデザインをいじってカスタマイズしてHTMLも...

やっとテンプレのカスタマイズが大体終わりました: 幻想帝国 Reverie of enpire | 2005/10/23 Sunday 04:31; やっとこのWebLogシステムのSireneBachのテンプレートのカスタマイズが大体終わりました。宵闇書房　Twilight bookstoreさんのNobleって言うテンプレートを黒系で文字を黄色系にしてグラフィックを大体入れ替え終わり...

Seren Bachに移行しました。: Man-made Pops | 2005/11/03 Thursday 02:35; 　MT3.2にアップグレードしようとしたらバグりまくってテンパったので(笑)、この際思い切って移行することに。割と簡単でした。ありがとうsb開発...

テンプレートを変えました: とりあえずいっとけ!? Tigers | 2005/11/03 Thursday 12:56; テンプレートを宵闇書房さんのnobleというのに変えました。素晴らしいテンプレートをありがとうございます。元はきれいなテンプレですが、色や文字の大きさを変えたら、なんかちょっとにぎやかなものになってしまいま...

宵闇書房 Twilight bookstore