スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--:-- | スポンサー広告 | edit | page top↑

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

scrollbar.jpg今更なんですが、いつの間に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で閲覧されてる方、「ちゃんと表示されてるよー」なんてコメントくださると大変助かるのですが…。
スポンサーサイト

02:10 | カスタマイズ | comments (6) | trackbacks (2) | edit | page top↑
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が非常に古いものなので、なかなか難しいというのが現状なのです…トホホ。

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

*お友達の方にもよろしくお伝えくださいませv-238
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↑

post a comment

管理者にだけ表示を許可する

trackbacks

この記事のトラックバックURL:
http://paperbag.blog61.fc2.com/tb.php/48-a592e7d4
この記事にトラックバックする(FC2ブログユーザー)
これなんと紫陽花なのです。1ヶ月以上前になりますが、母親が鎌倉に遊びに行った時に珍しいからとお土産に買ってきてくれたのを、「えーっ、キモチわるいからいらない」とご丁寧に(?)お断りしました。だってなん
2006/07/26 (Wed) 03:19 | 日々是マルディちゃん(仮)
随分前のOM-1写真。ちゃんと撮れるんだからやっぱりレンズを修理に出すべきだわ。ダラダラしている間に二日経ってしまいました。今日も惰性モードで「ザ・物欲」について。昨日面白い話を聞きました。人間三
2006/07/26 (Wed) 03:19 | 日々是マルディちゃん(仮)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。