忍者ブログ
*ADMIN*

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

≪ 2012.05│ 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 ≫
2006-06-15(Thu)

プラグインにスクロールバーを表示する

プラグイン(サイド)にスクロールバーを設置するときどのようにしていますか？
特にoverflowの指定はどうしてます？
どれをしていすれば一番綺麗に表示されるのか試して見ます。

基本は高さを指定して、領域をはみ出すときの指定であるoverflowを指定すれば大丈夫なはず。でも、overflowの指定法が３種類あるのでどれがいいのか確認。
①overflow:scrollで指定
<div style="width:100%;height:200px;overflow:scroll;">ここに内容</div>

②overflow-y:scrollで指定
<div style="width:100%;height:200px;overflow:scroll-y;">ここに内容</div>

③overflow:autoで指定
<div style="width:100%;height:200px;overflow:auto;">ここに内容</div>
以下、順番に確認。

①overflow:scrollで指定

中身によっては横にもスクロールバーが出てしまってちょっと微妙。
画像はOperaでのもの。他のブラウザもほぼ同じでした。

②overflow-y:scrollで指定

①を踏まえてだったら縦方向だけにスクロールバーの指定をかけようとしてみました。
上の画像はFirefoxでのもの。いけるかな？と思ったら、Operaがサポートしてなかったです。もともとIEの独自タグだったのでしかたないのですがSleipnirもだったからかなり残念。たぶんNNも対応してないんじゃないかな？

③overflow:autoで指定

最終的にこれになりました。
画像はSleipnirのもの。ちなみにスクロールバーの色はIEとSleipnirがほぼ同じ、Operaはサポートしてるもののドキュメント宣言によっては反映されないといったところです。

以上の確認はWinXPでのものです。

どーでもいいところにこだわってるなぁ自分。
まっいっかＯｏ。(￣。￣ )ｙ- ～
PR

author:あるふぁ [10:37:47]│ Comment(5) │Trackback(0) │〆

[カスタマイズ]プラグイン

│▲

｢Gray｣公開♪← HOME →vertical-alignの指定
＊COMMENT-コメント-
▽無題
こんばんは

ありがとうございました。
無事変更完了です。
posted by DVDな奴等 by JIN URL ::2008-04-24-Thu 23:05:26 ::EDIT
▽無題
あぁ～スミマセン。
表示されていました。
スクロールバーの色が無色だったのと
プラグイン全体の背景を淡い色に変えていたので
スクロールバーが見えなかっただけでした。
お騒がしてしまい申し訳ありませんでした。
本当に有り難うございましたo(*^▽^*)o
posted by non ::2006-10-29-Sun 00:38:53 ::EDIT
△Re:無題
解決してよかったです♪

また来てくださいね～(^-^*）
あるふぁ│2006-11-02-Thu 00:37
▽無題
早速のお返事有り難うございます。
再度試してみましたが表示されませんでした。


<div style="width:100%;height:200px;overflow:auto;"><!--plugin_category-->
<div class="plugin_data">
<a href="<!--$plugin_category_link-->">
<!--$plugin_category_title-->
(<!--$plugin_category_num-->)
</a>
</div>
<!--/plugin_category-->
</div>

↑は間違っているのでしょうか？？？
出来れば設置ページの行き方から教えていただけませんか？？？
どうぞ宜しくお願いします。

私が使わせて頂いてるテンプレ"私の時間"と言うテンプレなのですがテンプレート作成/編集でいじっています。それが原因でしょうか？？？
posted by non ::2006-10-28-Sat 22:17:55 ::EDIT
△Re:無題
ソースにおかしなところはなさそうなのですが･･･

>私が使わせて頂いてるテンプレ"私の時間"と言うテンプレなのですがテンプレート作成/編集でいじっています。それが原因でしょうか？？？

ふわふわ、りさん読書している絵のあるかわいらしいテンプレですよね。
一応、こちらのテンプレでnonさんのソース試してみたところ問題なかったです。
ただ、カテゴリーが7.8個以上ないとスクロールバーは出なかったです。
カテゴリーの数が少ないってことはない･･･ですかね？
200pxを100pxにしてみる・・とか？

ちょっとわからないのでもうすこし調べてみます。
あるふぁ│2006-10-28-Sat 22:50
▽無題
今晩は。
初めまして。

このスクロールをカテゴリーやリンクやアーカイブ等個別で設置したいのですが。

このタグは何処に挿入させたら良いのでしょうか？？？
カテゴリーにスクロールバーを設置するなら「カテゴリー*」のHTML編集の所でしょうか？？？

上記のやり方でしたのですが表示されず間違ってるのでしょうね（＞＿＜）

出来れば詳しく設置の方法を教えていただきたいのですが・・・。

お忙しい中申し訳ありませんがどうぞ宜しくお願いします。
posted by non ::2006-10-28-Sat 19:25:38 ::EDIT
△Re:無題
nonさん、はじめましてo(＾＾)o

････････････・・・・・・・・・・・・・・・
スイマセン。記述ミスのようです。

div style･･･と書いてあるはずのところのtが抜けてました。
ご指摘ありがとうございます<(_ _)>

お手数ですがもう一度試してみてください(*- -)(*_ _)ペコリ
あるふぁ│2006-10-28-Sat 21:38
▽auto
autoを使ってプラグインのカテゴリーを短くしてましたが、
3種類もあったとは知りませんでした。
しかも、見え方が違ってくるんですね。
posted by kisato URL ::2006-06-15-Thu 18:36:00 ::EDIT
△Re:auto
kisatoさんこんばんわ。

>autoを使ってプラグインのカテゴリーを短くしてましたが、
>3種類もあったとは知りませんでした。
>しかも、見え方が違ってくるんですね。

autoでやるのが一般的なので、普通はautoを使いますよね。
場合によっては、scrollのほうが良いこともある･･･かもみたいな(- -;)
見え方が違うので、こだわってみました。

使うときに参考になればうれしいです♪
あるふぁ│2006-06-15-Thu 20:20
＊COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
　
Name：
Title：
Mail：
Url：
Color：
◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆
Decoration： Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message：
Pass： ※編集時に必要です。
Secret： 　※チェックすると管理者へのみの表示となります。
＊TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
←No.111No.110No.109No.108No.107No.106No.105No.104No.103No.102No.101→
■Category
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
　徒然倶楽部 →こちらは記事の内容を下に移転＆閉鎖しました。
　現在は十六夜's Blogがメインブログになってます。
 　Alphaの小部屋･･･BOOKLOGで作った本棚
　Mixi･･･参加中のSNS
　十六夜-the sixteeth night-･･･現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況：Windows XP SP2
ブラウザ：主にFirefox　他IE、Opera等
解像度：1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ１件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
04

06
日 月 火 水 木 金 土
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
■CM&TB
●コメント
  • China-BlueVer-
    Bison⇒(05/24)
  • ピンクチャイナ
    Alyn⇒(05/23)
  • ピンクチャイナ
    Jennylee⇒(05/23)
  • ピンクチャイナ
    Chynna⇒(05/23)
  • ピンクチャイナ
    Kayli⇒(05/23)

●トラックバック
Scrollbar ONorOFF
■NinjaLink
■Thanks
テンプレートを作成するに当たってよく利用させていただいているサイト様です。
■QRcode
QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

もし、携帯電話で表示されきれない～とご不満の方はこちらのアプリを導入してみることをお勧めします。

無料体験できるのでぜひお試しください♪
■EntryNavigation
≪ *111*110*109*108*107*106*105*104*103*102*101* ≫
■Template
○公開したテンプレのプレビュー

ブルーチャイナ
詳細 		ブルーチャイナ
詳細
Gray2block
詳細 		China
詳細 		Gray
詳細
JapanBlue
詳細 		碧
詳細 		蒼
詳細
○公開された携帯用テンプレのプレビュー

The Leaf
詳細
○忍者ブログで共有化中のテンプレ

●Alternation-緑×白-
記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
パンくずナビも付いてます♪

●The Leaf
初の携帯用テンプレート。さわやかな感じに仕上げてみました
絵文字使用。トップページにカテゴリー表示アリ。

●ブルーチャイナ
涼しげなチャイナ風左右メニューテンプレ。
｢China｣の色違いのような感じですが、配置は違いますのでご注意ください。
※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
⇒ピンクチャイナ

●Gray2block
ノート風テンプレ｢Gray｣の２カラム版です。
●China
かわいい系の３カラムテンプレート。イメージはチャイナ風♪
同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
⇒China-BlueVer-

●Gray
灰色のノート風罫線テンプレ。追記開閉式の３カラムです。

●JapnBlue
サッカー日本代表ユニフォームなテンプレ。追記開閉式
※このテンプレには２カラムバージョンもあります。
⇒JapanBlueの２カラム版

●碧-midori-
淡いパステルグリーンのテンプレ。追記開閉式

●蒼
画像使用なしの５ブロックテンプレ。

Scrollbar ONorOFF

○広告




■Recommend
○ルナエンバシージャパン

ストレイシープがなんだかかわいくて好き(^-^*）

■Visiter