宵闇書房　Twilight bookstore

<< 10月の読書（番外編）「回転銀河」 | Serene Bach ver 2.03Rに >>

2005/10/21 Friday 03:12

Serene Bachテンプレート「twinkle (liquid width)」

twinkleの幅を固定していないタイプです。ウィンドウの幅に合わせてエントリー部分の幅が変わります（リスト部分は変わりません）。ここら辺はお使いになる方の好みだと思いますが、あまり見かけないのでつくってみました。

twinkleと同様カスタマイズしやすいテンプレートになっていますので（当社比）、ベースとしていろいろ改造していくのもオススメです。

「twinkle (liquid width)」

twinkle (liquid width)

サンプル

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

最終更新日

2007/03/17 ver.1.04: サイト移転に伴うURLの変更。
2006/11/21/23:07 ver.1.03: Serene Bach ver.2.08Dでコメントできない問題を解消。その他細かなHTML,CSSの修正（詳細 : Serene Bachテンプレートの修正及び一部配布終了について）。
2006/04/28/11:23 ver.1.02: recent trackbacksの綴りミスを修正。
2005/11/02/0:35 ver.1.01: Internet Explorerで見た際に、コメントフォームの一部項目名が表示されない問題を解消。
2005/10/21 ver.1.00: 公開。

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

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

続きはここから

利用規約

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

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

使用方法

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

ダウンロード

twinkle_liquid.lzh

その他

WinXPのIE6.0/5.1、Opera 8.5、Firefox1.07にて確認しています。

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

カスタマイズについて

左右の入れ替え

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

/* エントリー部分 */
div#main{
float:right;
clear:right;
width:100%;
margin:0 10px 0 -230px;   /* #side+20px */
padding:10px 0 0 0;
}

/* サイドバー部分 */
div#side{
float:left;
clear:left;
width:210px;
padding:10px 0 0 0;
}

/* エントリーナビ */
div.sequel{
margin:0 0 0 230px;   /* #side+20px */
padding:0 0 10px 20px;
font-size:10px;
text-align:center;
}

/* 記事 */
div.entry,
div.comment,
div.comment_form,
div.trackback_url,
div.trackback,
div.profile{
margin:0 0 30px 230px;
}

/* ページナビ、ページトップ */
div.pagenavi,
div.pagetop{
margin:0 10px 0 230px;   /* #side+20px */
padding:5px 20px;
font-size:10px;
text-align:center;
}

/* サイド */
div#side dl{
margin:5px 0 15px 10px;
padding:0 0 10px 1px;
}

comments

antelope | 2005/10/29 Saturday 23:14: サーバ移転を機に使わせていただきました。
感謝申し上げます。
ところで勉強不足で申し訳ないんですが、このテンプレートにカレンダー機能をつけるにはどのようにしたら良いのでしょうか？
もし、ご存じでしたら教えてください。

トルキー | 2005/10/30 Sunday 00:04: ＞antelopeさま
こんにちは。
ええと、カレンダーはどのタイプをどこに表示させたいかによって記述方法が異なります。
基本は

カレンダー用の独自タグ

を入れて、CSSを追記、ですが。

具体的にどんな感じなのでしょうか…？

antelope | 2005/10/30 Sunday 08:22: お手数をお掛けしてすみません。
カレンダーのタイプはサイドバーのトップに表示させる形（Serene Bachの標準テンプレートにあるカレンダー）を希望しております。
私も独自にタグを探してみたのですが、なかなか見つからなくて…
よろしくお願いします。

トルキー | 2005/10/31 Monday 00:03: ＞antelopeさま

<dl id="calendar">
<dt>calendar</dt>
<dd>{calendar2}</dd>
</dl>


…ですね。
これを<div id="side">の中に入れてください。

あとはSerene Bachの標準テンプレートのカレンダー部分のCSS（/* ++++ Calendar ++++ */ のあたり）を参考にすると何とかなるのではないかと思います。
color:#5a6855;
font-size:10px;
これを、tableに指定するのがポイントといえばポイントかと。

分からない点ありましたら、またお知らせ下さいね。では、頑張ってみてくださいませ＾＾

antelope | 2005/10/31 Monday 20:58: トルキー様
ありがとうございます。
無事設置できました。
blogも日々勉強ですね。今後も頑張ってみたいと思います。

トルキー | 2005/10/31 Monday 23:31: ＞antelopeさま
うまくいきましたようで何よりです！
手をかけた分だけやはり愛着がわきますよね。私も日々勉強の毎日です。
では、また遊びにいらしてくださいませ！

かずみ | 2005/11/01 Tuesday 00:52: 初めまして。こちらのテンプレートを使わせていただきました。ありがとうございます。
色々やってみたのですが、わからないので質問させてください。
コメントフォームの名前・URL等を入力する欄の横にname，email･･･と表示させたいのですが、
（このフォームのように）カスタマイズすることはできますか？

トルキー | 2005/11/02 Wednesday 00:59: ＞かずみさま
初めまして、こんにちは。
テンプレのご利用、ありがとうございます！
早速確認しましたところ、私の単純ミスが原因でした…（泣）。
修正方法を載せましたので、お手数ですがよろしくお願い致します。
ご連絡ありがとうございました！

かずみ | 2005/11/03 Thursday 07:24: 思い切ってお聞きして良かったです（笑）。
以前からトルキーさんのテンプレは使いたかったので、タイミングを計っておりました。
どうもありがとうございました。

トルキー | 2005/11/03 Thursday 23:11: ＞かずみさま
いえいえ、こちらこそコメントしていただいて感謝の限りです。自分でも見直してはいるのですが、どうも見逃している部分が偶にありますもので…。
また何かありましたら遠慮無くどうぞ～＾＾

すー | 2006/01/08 Sunday 13:36: こんにちは^^

http://rosy.hippy.jp/Miniaturerose-list/
ココ↑でテンプレート使わせて頂きました^^
このテンプレが可愛くて、sbから移行する決心がつきました。
トルキーさんの移行メモがなかったらできませんでしたが^^;
ありがとうございました♪

トルキー | 2006/01/08 Sunday 23:35: ＞すーさま
こちらにまとめてレスを。
sb→Serene Bachの移行、お疲れさまでした！
そして、テンプレートのご利用ありがとうございます。
やはりsbよりもSerene Bachの方がスパム対策やらなにやらも充実していますし、いい感じです。
では、お暇なときにでもまた遊びにいらしてくださいませ！

haruki | 2006/06/30 Friday 12:30: こんにちは。
初めまして、トルキーさま
sbからSerene Bachに移行してこちらの
可愛らしいテンプレートをお借りしました。
有難うございます。
それで、早速壁にぶち当たっているのですが
何故かアクセス解析が機能しないのです。


<li>Count.{show_counter}</li>


{collect_log}


トルキーさまのテンプレートにこのタグが
入っていたのですが、このタグだけでは動かないの
でしょうか。
いろいろ見て回ったのですが良く分かりませんでした。不躾に申し訳ありませんが、ご教授頂けたら
幸いです。

haruki | 2006/06/30 Friday 18:44: 再び失礼します。
先程コメントさせて頂いたharukiです。
アクセス解析ですが、もう一度自分で
調べた所、CGIのパーミッションが違って
いたようです。
直して管理画面を見た所正常に作動して
おりました。
お騒がせしてしまい申し訳ございません
でした。
また、素敵なテンプレート楽しみにして
ます。失礼しました。

トルキー | 2006/07/01 Saturday 23:38: ＞harukiさま
初めまして、こんにちは。
テンプレのご利用、ありがとうございます。
お悩みの件、解決されましたようで何よりです。
私にわかることでしたらなんぼでもお尋ね下さって構いませんのでお気軽に（ただ、現在少々忙しさにかまけてお返事などが遅れ気味ですが…）。
では、またいらしてくださいませ！

tsubuko | 2007/10/04 Thursday 15:32: 初めまして。今回ブログを始めようと思い、こちらの『twinkle（liquid with）』をお借りしました。
自分なりにカスタマイズをしましたが、早速つまづいてしまいました。

以下、箇条書きで失礼します。

1、トップページを開くとエントリー下部部分以降が表示されなくなる（フッターは表示される）他、「comments」をクリックするとコメントフォームのテキストエリア部分が途中で切れてしまう状態
→縮小、最大化をすると全部が表示されるようになる

2、ヘッダーのタイトル（h1）部分を画像ロゴのロールオーバー形式で表示しようとしたが、トップページ、カテゴリー、アーカイブス等をクリックすると問題なく画像が表示されるものの、「comments」、profile等をクリックすると画像が表示されなくなる
→画像はindex.htmlと同じディレクトリにあるimgフォルダに格納

以上です。わかりにくい説明ですみません。
Serene Bachを利用するのは初めてなので、どこをどうすればよいかわからずこちらにお聞きした次第です。
お忙しいところ大変申し訳ないのですが、もし解決方法をご存知でしたら教えていただければありがたいです。
よろしくお願い致します。

トルキー | 2007/10/08 Monday 23:56: ＞tsubukoさま
初めまして、こんにちは。
テンプレのご利用、ありがとうございます。
早速ご質問の件です。

1.私の環境下（Firefox2.0.0.7/Internet Explorer6.0）では特に起こらなかったので、お使いのブラウザなどを詳しく教えていただけると助かります。
（スクリーンショットなどでお知らせくださってもかまいません）

2.テンプレートに画像等を記述する際は、全て絶対パス（http://～）で記述してください。
indexページと、エントリの保存先では階層が違うので、リンク切れが起こってしまいます。

画像の保存先等に関して言えば、テンプレートメーカーというプラグインがsb開発研究所で公開されていますので、そちらを使うと色々とやりやすいかなぁと思います。

tsubuko | 2007/10/10 Wednesday 01:46: 上の投稿をしました、tsubukoです。
すみません、この件に関しては自己解決しました。
と、言ってもlogフォルダにロゴが入ったimgフォルダを入れたら上記問題の1も2も表示されるようになったので、根本的に解決していないのかもしれないでし

ょうが放置していました。なるほど、絶対パスで記述するんですね。
ちなみに私の環境下はWinXP・IE6.0です。

それと、もう一つ問題にぶち当たってしまいました。
画像表示に「ThickBox3」を使用しようと思ったのですが、Firefox、Operaだと問題ないにも関わらず、IE6.0だと右側に変な余白ができてしまいます（サイトにその様子のスクリーンショット有）。
ThickBoxの設定はデフォルトなので、CSS・HTMLかどっちかが原因なのかよくわからずじまいです。
ThickBoxについてまでこちらで聞いてよいのかとても迷ったのですが、もし何かご存知であれば教えていただきたく思います。
たびたび申し訳ありませんが、よろしくお願い致します。

tsubuko | 2007/10/21 Sunday 03:29: こんばんは。ThickBoxについて質問しましたtsubukoです。
対処方法がわからなかったので、別のツールで対応したところ、問題はなくなりました。
コメント欄を汚してしまい、すみませんでした。

tsubuko | 2007/11/05 Monday 03:36: こんばんは。たびたびのコメント、申し訳ありません。
IE7での表示を確認したのですが、横スクロールがでるようになってしまいました。
こちらのテンプレートのサンプル表示でも確認してみましたが、やはり横スクロールがでているようです。
お忙しいところ大変申し訳ありませんが、確認していただければ幸いです。
よろしくお願い致します。

トルキー | 2007/11/28 Wednesday 00:13: ＞tsubukoさま
返信が大変遅くなりました。

このテンプレートを作成した当時は、エントリにもありますようにWinXPのIE6.0/5.1での確認でしたので、IE7での検証が不十分となってます。
IE6.0/7、Firefoxのみでの確認になりますが、
body{
padding:0 80px;
}
の、paddingをmarginに変えると大丈夫かとおもいます。

tsubuko | 2007/12/04 Tuesday 02:06: こんばんは。お返事ありがとうございました。
ご提示の通りに変更してみたところ、横スクロールバーはでなくなりました。
お忙しい中、質問にお答えいただき、本当にありがとうございました！

トルキー | 2007/12/22 Saturday 23:40: ＞tsubukoさま
いえいえ、直りましたようでよかったです。
今年前半に転職して以来、未だ自分の時間のペースがつかめず、このようなのろのろ対応に；；
こちらこそ、レスポンスを長々とお待たせしてしまいましてすみませんでした！

comment form

trackback url

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

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

trackback

Serene Bachへ移行: Minimani Life | 2006/01/03 Tuesday 14:08; sbからSerene Bachへ、URLそのままに移行。参考サイト宵闇書房：sb→Serene Bachの移行まとめ

宵闇書房 Twilight bookstore