paper bag メニューにスクロールバーを設置する。

06 | 2008/07 | 08
日	月	火	水	木	金	土
-	-	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	-	-

メニューにスクロールバーを設置する。

06/30/2006（Fri）

今更なんですが、いつの間にFirefoxでも「リアルタイムプレビュー」が出来るようになってたんですね。確か以前はIEのみだったみたいで、私はずっと何がどんな風にプレビューされるんだろうって気になってたんです。
昨日たまたまクリックしたら「おぉー、こんなんか」とちょっと感激したものの、しかしこれあまり意味ないな。普通にプレビューするのと余り変わらない気がしますが何か便利なところでもあるのかしら。

＊

さて、先日メニューにテンプレートのリストを設置したんですが、スクロールバーを入れてみました。IEだとちゃんとスクロールバーに指定の色（全体のスクロールバーと同じ配色）になってるでしょうか。

スクロールバーって思ったより簡単に設置できるんですね。
なんだかめんどくさそうだったんで今まで避けてきたんですが、これが思いの外あっさりできてしまいました。

overflow: auto;
height: 280px;

極端に言えばこれをCSSに書き足すだけでした。
heightは縦の長さですから適当に変えます。

問題はどこにどのように書き足すか。

私のテンプレートを例に説明します。
まず、pb_puddleおよびpb_guitarcaseはプラグインOFF対応ですから、HTMLからスクロールバーをつけたいメニュー項目を探します。
一番需要がありそうな「最新のコメント」を例にとってみます。

<h3>最近のコメント</h3>
<div id="commentlist">
<ul>
～略～
</ul>
</div>

こんな風に既に<div id="commentlist">～</div>で囲まれてますので、CSSに以下を書き込みます。

#commentlist {
　　　　overflow: auto;
　　　　height: 280px;
}

こんな感じでスクロールバーをつけたい箇所を<div id="xxxx">～</div>で囲んで、それをCSSで指定すれば良いわけです。
「xxx」は任意の名前をつけてください。

pb_skyはプラグインON/OFF対応ですが、恐らくプラグインを使用されてる方が多いと思います。
この場合は、プラグインの中身（HTML編集内）を<div id="xxxx">～</div>で囲み、CSSで上と同様の指定をしてあげることになります。

＊

というわけで、私はテンプレートを配布しているものの、自分のテンプレートに使用しないものに関してはまったく何の知識もありません。必要に応じて少しずつ学習していってるという具合です。

ところで、新作テンプレートですが、私は通常macでしか確認できないので、IEで確認でき次第共有に登録しようと思っています。どなたか、IEで閲覧されてる方、「ちゃんと表示されてるよー」なんてコメントくださると大変助かるのですが…。

pb_simpleredとpb_simpleblueを共有登録。 | top | pb_sky一部修正（pb_puddle/pb_guitarcaseについても）。

comments

# 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

さん | 2006/07/05 22:41 | URL [編集] | page top↑

# ひみつコメントさま　はじめまして。

きゃあ～嬉しいコメントをありがとうございます！
テンプレートも色々気に入っていただけているようでとてもとても励みになります。

そしてIEでの表示報告ありがとうございます。
さて、メニューのスクロールバーですが、忘れてました！
自分が使うものになると、ついつい緩慢になってしまっていけませんね。
タイトル横の空白を修正しましたがいかがでしょうか。これはメニュー内のpaddingの横幅を狭めたことで解消されました。

ただ、色は全体のスクロールバーと同じにしてあります
（あえて個別に指定していないということです）。
幅ですが、これはWinのプロパティ画面からユーザ個人が設定した幅になってしまうので、見る人によって太かったり細かったりするかと思います。

そしてカレンダーなんですが…これは永遠の課題だったりします。
他の方のテンプレートでも、ブラウザにより微妙に差が見受けられるようです。
ちなみにWin/Mac 両者ともFirefoxでは大体このように表示されています。Mac Safariでもほぼ同じです。

http://blog61.fc2.com/p/paperbag/file/calendarsample.jpg

これが標準の解釈なのですが（ご指摘された数字周りの余白は均等に自動算出されていると思います）、IEだけが…独自の解釈をしてしまうようで、非常にイライラしちゃうところなのです。

それ故、常にこれがギリギリの妥協点かなというところを探しています。
（Firefoxを優先しているというわけではありませんが、IEで修正すると他のブラウザのほとんどがおかしくなってしまうのです）。

ブラウザの仕様だと思って諦めているのですが、
（カレンダー使わない人もいるだろうと開き直ったり…
ただ、私もカレンダーは飾りとしてワンポイントという感じで置いてあります）
今度改めて一から見直したいと考えています。
しかし、私のWinが非常に古いものなので、なかなか難しいというのが現状なのです…トホホ。

カレンダーに関してはお役に立てなくて申し訳ありませんが、また何かありましたらお気軽にコメントくださいませ。今回はこちらとしても大変助かりました。

＊お友達の方にもよろしくお伝えくださいませ

pbさん | 2006/07/06 02:20 | URL [編集] | page top↑

# 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

さん | 2006/07/06 15:08 | URL [編集] | page top↑

# ひみつコメントさんへ

確認してくださってありがとうございます。
大変助かりました。

確かに月別アーカイブは長くなりますね。
私もメインブログで長いからという理由で非表示にしたことがありました。スクロールバーにすれば良いんですね！…って自分で設置しといて何を言ってるんでしょうか。

またぜひ何かあったらコメントください。
私としてはそちらのブログも拝見したいな～と思ったりもしますが♪

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

pbさん | 2006/07/06 17:46 | URL [編集] | page top↑

# 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

さん | 2007/10/14 07:08 | URL [編集] | page top↑

# 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

さん | 2007/10/16 04:19 | URL [編集] | page top↑