宵闇書房　Twilight bookstore

2004/11/09 Tuesday 19:42

sbテンプレート・「ノート::3カラム」

さて、リクエストがありましたので、「ノート」の3カラム版をつくってみました。右側にエントリーに関係するもの、左側にはそれ以外のものを持ってきています。
「ノート」と同じく、カテゴリーの多い方はCSSをいじらないといけませんので、ご注意ください。Macでの挙動は怪しいようです…。

「ノート::3カラム」

サンプル-----------------------

サンプルは以下のとおりです（同名テンプレートのSerene Bach版です）。

最終更新日---------------------

2005/12/23 : 配布終了致しました。
同名のSerene Bachテンプレートがありますので、そちらを修正の上ご利用下さいませ（→Serene Bachテンプレート・「ノート::3カラム」）。
改造方法については次のエントリを参考にどうぞ。

sbテンプレートの配布終了について

2005/03/13 : 更新の詳細はこちらをどうぞ。

comments

Jura | 2004/11/09 Tuesday 20:08: ノートかわいいですよね～
個人的には２カラムの方が好きですが

縦にながくしたくなーいと言う人には３カラムの方が便利
なのかもしれませんね。

ところでここで書いてもいいかなと思いつつ
凸凹のテンプレをいただきました。

ブログピープルのスクロールバーを表示させたいのですが
今までどうりに設置するとスクロールバーが見えません
何処を弄ればよいですか？

あと、記事を書く部分の「author 」をカテゴリータイトルと一緒に上に持ってきたいのですがただタグを移動するだけではうまくいかないので（文字が大きくなってしまう）うまく設置する方法ありましたら教えてください。

ではでは

トルキー | 2004/11/09 Tuesday 21:01: ＞Juraさま
こんにちは。Firefoxを入れてみたトルキーです。
「凸凹」はFirefoxだとborderの色がちょっと怪しいです（汗）。
CSSの中に、border(-left,-rightなど):5px solid;というのがありますが、このsolidのあとに色を入れなければこのブラウザではうまく表示されないようです。
ex.)border-left:5px solid #ffffff;
IEやNNでは一括指定の部分だけで大丈夫なんですが…。
ほかのテンプレは一応そのままで大丈夫そうです。

ええと、ブログピープルですが、CSSの設定の問題だと思います。
.blogpeople-mainをwidth:160px以下に変えてみてください。

categoryとautherの移動ですが、

<div class="entry">
<div class="entry_title">{entry_title}</div>
<div class="entry_state">author : {user_name} ::: {category_name}</div>　←ここ
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
<div class="entry_state">{entry_date} {entry_time}<br />{comment_num} ::: {trackback_num}</div>　←ここ
</div>
{trackback_auto_discovery}

こんな感じでしょうか？こうすると{entry_time}の後ろの<br />は要らないかもしれません。

3カラムだと逆に横に長くなりすぎるのが問題ですね。私は横にお気に入りや履歴を表示したままブラウザを使っているので、あまり幅が広いと耐えられないです（笑）。

トルキー | 2004/11/09 Tuesday 21:04: 上に追記

あ、width:160px;はデフォルトの状態のときです。
#sideのwidthから15pxほど少ない数字でお願いします。

Jura | 2004/11/10 Wednesday 08:36: うまくいきました
ありがとうございます。

トルキー | 2004/11/10 Wednesday 23:38: ＞Juraさま
うまく行ってよかったです！
改造、ご苦労様でした！

TyBOX | 2004/11/28 Sunday 23:34: はじめまして。
最近sbを使い始め、きれいなテンプレート探し始めたところ、さっそくトルキーさんのが見つかりました。
で、３カラム、使わせていただきました。
今のところ動作は至極順調です。
これからもがんばって、美しいものをご提供ください。

トルキー | 2004/11/29 Monday 00:39: ＞TyBOXさま
はじめまして、こんにちは。
テンプレのご利用、ありがとうございます！
シンプルで見やすく！をモットー（？）につくっていますので、美しいと言われますと、なんだか気恥ずかしいです（笑）。
これからも日々精進したいと思いますのでよろしくお願いします！

ヒロ | 2004/12/09 Thursday 17:24: はじめまして。
テンプレートを使わせて頂いてます。
シンプルだけどデザインが可愛いのでお気に入りになっちゃいました。
リンクも張らせて頂きました。
これからも素敵なテンプレートを作ってくださいね。

トルキー | 2004/12/10 Friday 23:53: ＞ヒロさま
初めまして、こんにちは。
テンプレのご利用＆リンク、ありがとうございます！
現在テンプレの修正作業の真っ最中なので、新しいものになかなか手がつけられないでいるのですが、それが終わりましたらそろそろ取り掛かろうかな、と思っています。
それでは、また遊びにいらしてくださいね！

tady | 2004/12/19 Sunday 23:03: はじめまして。
遅ればせながら、3カラムテンプレート使わせてもらってます。
とても気に入ってます。
今後もちょくちょく覗かせてもらいます。

トルキー | 2004/12/20 Monday 23:37: ＞tabyさま
初めまして、こんにちは。
テンプレのご利用ありがとうございます！
とりあえず今のところ予定は未定ですが、早めに新しいものをつくりたいな、と思ってます。
では、これからもよろしくお願いしますね！

オコ | 2004/12/25 Saturday 20:58: トルキーさん、はじめまして。オコといいます。

ノート３カラムのテンプレートを使わせていただきました。
リンクも貼らせていただきました。
ノートの罫線がとても気に入ってます♪
シンプルだけどかわいいくて大好きです。

どうもありがとうございました。

トルキー | 2004/12/25 Saturday 21:17: ＞オコさま
初めまして、こんにちは！
テンプレのご利用＆リンク、ありがとうございます！
罫線、いいですよね。フォントサイズや行間を固定しないといけないなど、アクセシビリティの面ではちょっと問題ありかもしれませんが（汗）。
では、また遊びにいらしてくださいませ！

antelope | 2005/01/06 Thursday 22:47: トルキー様
はじまめして。antelopeと申します。
最近までJUGEMを使っておりましたが、心機一転、sbを使うことになり、ノート３カラムのテンプレートを使わせていただきました。
シンプル・イズ・ベストな所が気に入っております。

ありがとうございました。

トルキー | 2005/01/07 Friday 02:42: ＞antelopeさま
初めまして、こんにちは。
テンプレのご利用、ありがとうございます！
最近JUGEMから抜け出す方がとても多いですね。斯く言う私もそうなのですが（笑）。
今後も新しいものを少しずつ出していく予定ですので、また遊びにいらしてくださいませ！

somali | 2005/01/18 Tuesday 19:16: はじめまして。
somaliと申します☆
今回JUGEMからsbに移行しましたのでテンプレートをお借りしました！すっご～く使いやすいし、デザインが大好きです＾＾
大切に使いたいと思います☆
また遊びにきたいと思います～！！

トルキー | 2005/01/19 Wednesday 01:59: ＞somaliさま
初めまして、こんにちは。
テンプレのご利用、ありがとうございます！
JUGEM難民の方、どんどん増えてますねー。
7月に起きたトラブルがこんなに尾を引いていくとは思ってもみませんでした。早く抜けてよかった…。

それでは、またいらしてくださいませ！

ナツ | 2005/01/22 Saturday 15:20: はじめまして。テンプレートを使わせていただきました。シンプルなデザインなので、ブログを始めてまだ数日ですが、とても使いやすいです。テンプレート以外の記事もすごく参考になるので、ちょくちょく覗かせていただきます。ありがとうございました。

トルキー | 2005/01/23 Sunday 00:15: ＞ナツさま
初めまして、こんにちは。ちょっと拝見させていただきましたが、私の落ち着きのない（笑）色使いと違って上品で素敵ですした。
テンプレも記事もネタがなくて唸っていることが多い近頃ですが、ちょこっとずついろいろなことを発信していけたらなぁと思ってます。

まどか♪ | 2005/01/25 Tuesday 15:05: はじめまして。sbのスキンを捜してたら
こちらに辿りつきました。ノートの３カラムのスキンを
いただきました。最近までJUGEMを使っていましたが
あまりの重さに、sbに変えましたが・・・
すごく快適ですよね？変えてよかったとしみじみ思います。

また、いろいろと参考にさせていただくと思いますので
よろしくお願いします。

トルキー | 2005/01/25 Tuesday 23:58: ＞まどか♪さま
初めまして、こんにちは。
テンプレのご利用、ありがとうございます！
JUGEMは最近ようやく軽くなってきたような感がありますが、全くいつまで続くだ！って感じですね。本当に。
暇を見て新しいものもちょこちょこ上げていきたいと思ってますので、こちらこそよろしくお願いします！

西川和久 | 2005/01/26 Wednesday 14:10: はじめまして！テンプレ、使わせて頂きました。ありがとうございます。ただ、幅広に改造しています。申し訳ありません(^^;

また、今週金曜日０時公開のPC Watchの記事でsbと共に軽くですが紹介しています。よろしくお願いします。

トルキー | 2005/01/26 Wednesday 20:13: ＞西川さま
初めまして、こんにちは。
テンプレのご利用、ありがとうございます！改造はいくらでもして下さってかまいません。希望する条件に全て合うようなものもなかなかないと思いますし、そうなると一からつくるか改造しかないですし…。

PC Watch…うーん、impress？ということでimpress Watchに行ってみましたら大当たりでびっくりしました。
というか、あ、あの、いいんでしょうか、こんなんで（汗）。とりあえず、軽くということで一安心（小心者です）。

当日はPCの前でじっと待機させていただきますね！（笑）

西川和久 | 2005/01/27 Thursday 22:07: こんばんは！予定より早く(20:30)公開したみたいです(^^;

トルキー | 2005/01/27 Thursday 23:04: ＞西川さま
こんばんは！
見ましたです！ふらふらーっとネットサーフィンをしていたら既にアップされていましたので、じっくりと見入ってしまいました。9時半ごろだったでしょうか…。ブログツールっていろいろあるものですね。私はMT（当時は英語版のみ）を試して挫折して以来、あまり難しいものには手を出せません（汗）。
管理画面からリンク元を見て見ると、今の時点で100人以上の方があちらからいらしているようでその威力に早くも驚いています。ご紹介、ありがとうございました！

…あ、あの、トルキー氏ってなんだか恥ずかしいです（笑）。

まぉ | 2005/02/02 Wednesday 20:22: えっと･･･
テンプレ　いただきましたッ。

で･･･
カスタマしちゃったんですけど･･･
ヤバいですかね･･･？

トルキー | 2005/02/02 Wednesday 22:07: ＞まぉさま
テンプレのご利用、ありがとうございます！
ええと、上の規約さえ守っていただければ加工でも何でも大丈夫です！念のため、再度ご確認くださいね。

まぉ | 2005/02/10 Thursday 18:16: このテンプレを大事に使わせていただいてるんですが･･･

画像を挿入したときに
罫線と文字がズレこんでしまうのは
どうにかして　回避できないでしょうか？

単純に　罫線をとっぱらってしまうと
せっかくのノートのイメェジがなくなっちゃうので
それだけは　したくないんですよね･･･(^-^;

回避方法があったら　教えてください！

トルキー | 2005/02/10 Thursday 23:01: ＞まぉさま
こんにちは。
普通の画像でしたら回り込みを指定すればずれは回避できます。「テンプレートカスタマイズ」のページをご覧くださいませ。

それとも、strollさまの絵文字の件でしょうか？ちょっと拝見しましたところ、そちらのようにも見えましたので、ちょっと調べてみました。
「ノート」「ノート::3カラム」は改行20pxになっていますので、画像の縦の長さが20pxのものを使うか、それ以外のものでしたら上下にpaddingをスタイルで設定して合計20pxにすれば、うまく表示されます。

例）縦の長さが16pxのものの場合
style="vertical-align:middle"
⇒style="vertical-align:middle;padding:2px 0px 2px 0px;"
…というように、16px＋上2px＋下2px＝20pxになるよう、.jsファイルを書き換えてください。
お手間をおかけします。

まぉ | 2005/02/28 Monday 17:36: PCが昇天してしまい、
返事が遅くなりまして申し訳ございません･･･。
おかげさまで罫線がキレイに表示されるようになりました。
ありがとうございます。

トルキー | 2005/03/01 Tuesday 00:22: ＞まぉさま
うぉ、大変な目にあわれたようで…復旧ご苦労様でした。
お返事はぜんぜん気にしていませんのでお気になさらないでくださいませ。
今後ともよろしくお願いします！

orange-sky | 2005/03/20 Sunday 03:20: トルキー先生。
いつもお世話になっております。
今回は、ノートの3カラムを使わせて頂きましたー。

で、ちょっと質問なんですけども（早速かい！）
■右側部分をもう少し・・もう少しだけ広くしたいんですけども・・。カスタマイズで中央部分は広くしました。右側はこれ以上は無理ですか？

■Selected entriesの部分の日付ですが、前に凸凹の時も聞いたような気がするんですけども（笑）太字ではなくしたいんですけど、どうすればいいでしょうか？

これからも、どうぞどうぞよろしくお願いしますー。

トルキー | 2005/03/20 Sunday 19:00: ＞orange-skyさま
ども、こんにちは！
右幅は画像を使っている関係上、画像を加工してうんぬんしないとあれですが、「ノート」の画像を利用して20px広くする方法ですと簡単にできますのでその方法でも。CSSの以下の部分を書き換えてくださいませ。
※http://～/はブログのアドレスです。

/* 全体の幅 */
div#layout{
width:765px;　　←ここを20px多くし、「785px」に
margin:auto;
font-family:Verdana;
text-align:left;
}

/* 右側部分の表示 */
div#rightside{
width:180px;　　←ここも20px大きくし、「200px」に
margin:0px 0px 0px 580px;
text-align:left;
}

/* サイドのタイトル */
#leftside dl dt,#rightside dl dt{　　←「,#rightside dl dt」を消してください
margin:0px;
padding:0px;
background:url(http://～/template/note3_linktitle.gif) no-repeat 0px 50%;
color:#666666;
font-weight:bolder;
font-size:11px;
text-align:center;
vertical-align:middle;
line-height:20px;
letter-spacing:1px;
}

ここまで修正しましたら、以下を付け足してください。

/* サイドのタイトル（右） */
#rightside dl dt{
margin:0px;
padding:0px;
background:url(http://～/template/note_linktitle.gif) no-repeat 0px 50%;
color:#666666;
font-weight:bolder;
font-size:11px;
text-align:center;
vertical-align:middle;
line-height:20px;
letter-spacing:1px;
}

以上です。
あと、ツリー化の日付部分を太字にしないようにするのは、ツリー化スクリプトにある<strong>と</strong>を削除してしまえば大丈夫です。2つずつあります。未確認ですが、これでいいはず…。

あ、あとrecommendがいっぱいあったので、HTMLの

<dl>
<dt id="recommendname">Recommend</dt>
<dd id="recommendlist">{amazon_item}</dd>
</dl>

を
<dl>
<dt id="recommendname">Recommend</dt>

<dd id="recommendlist">{amazon_item}</dd>

</dl>
とすると、タイトル部分が繰り返さなくなって良い感じですよ。

トルキー | 2005/03/20 Sunday 19:03: あわ、もう一つありました！
/* カレンダー・幅と高さ */
td.cell{
width:23px;　　←26pxに
height:15px;
}
です。カレンダー部分をきれいに表示するためです。

orange-sky | 2005/03/20 Sunday 19:55: キャー！！！トルキー先生ー！！
ありがとうございます！！！出来ましたー！

これで、邪道メモも綺麗に表示されますッ（笑）

本当にありがとうございます！！

これからもどうぞどうぞよろしくお願いしまする。

トルキー | 2005/03/20 Sunday 22:00: ＞orange-skyさま
おお、お疲れ様でした！
じゃ、邪道メモのためだったんですね（笑）。
こちらこそ今後ともよろしくお願いしますー！

まぉ | 2005/03/25 Friday 21:37: こんばんは。
テンプレート＆カスタマでは　お世話になっております。

ちょっと不思議に思ったコトがあって、
書き込みさせていただきます。

ノートの３カラムで、
環境設定で　New Entryを５件表示に設定しているのですが、
メインの表示部分には、
記事数と同じ数だけの表示になっているのです。
ただ、
個別記事を見ると、５件表示になっています。
うまく文章で説明できないのですが･･･。

コレは、テンプレの仕様なのか、sbの仕様なのか、
どちらなのでしょうか？
また、テンプレのほうで環境設定で設定した数と
同じに出来るのであれば、
その方法を教えていただけませんか？

ホント、うまく説明できなくてゴメンなさい。

トルキー | 2005/03/26 Saturday 01:21: ＞まぉさま
こんばんは！ご質問内容ですが、大丈夫です。わかりますよ（笑）。
ええと、リスト部分ですが、{selected_entry_list}になっていないでしょうか？これですと、現在表示されているエントリーの名前が表示されることになります。
New Entryのような形にするとしたら、HTMLに記述してあるリスト関連ブロックがそれぞれ


に、独自タグが
{latest_entry_list}
になります。お確かめくださいませ。

まぉ | 2005/03/29 Tuesday 18:38: 出来ましたっ！
いつもいつも　どぉーしようもないコトでの
質問ばっかりで　スミマセン･･･。

トルキー | 2005/03/30 Wednesday 02:02: ＞まぉさま
いえいえ、わからないことがありましたらどんどんいらしてくださいませ～。一人より二人です！

comment form

trackback url

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

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

宵闇書房 Twilight bookstore

sbテンプレート・「ノート::3カラム」

comments

comment form

trackback url

trackback