好きな場所にスクロールバーを作る:CSS小技

ブログが作りたい!CSSの小技 > 好きな場所にスクロールバーを作る:CSS小技

好きな場所にスクロールバーを作る:CSS小技

好きな場所にスクロールバーを作る:CSS小技

CSSの小技(34)

先日、「スクロール(バー)は、どうやって作るのか?」というようなお問合せをいただきました。

もしかすると、需要があるかもしれないので、CSSの小技として、好きな場所にスクロールバーを作る方法をご紹介しておきます。


好きな場所にスクロールバーを作るとは?

スクロールバーを作ると、例えば次のように、ある程度の表示領域を要するものを、コンパクトにしておくことができます。

好きな場所にスクロールバーを作る

サンプルも用意したので、良かったら、サンプルもご覧になってみてください。イメージしやすくなるかと思います。


好きな場所にスクロールバーを作る方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

3:ポイント解説

ポイントは、CSSによる「overflow」と「height」の指定です。

指定した領域(高さ)からはみ出したら、「overflow: auto;」によってスクロールバーが表示されます。あとは飾りです。偉い人にはそれが分からんのです。

ちなみに、overflowには、「scroll」という指定値もありますが、これを使うと次のように X軸のスクロールバーが、はみ出していなくても表示されてしまいます。

「overflow: scroll;」を指定した場合

今回のように、更新履歴という形で使うのであれば、X軸のスクロールバーは必要ないので、「auto」を指定するほうが良いと思います。

前の記事へ
前の記事へ

次回予告

次回は、今回ご紹介したスクロールバーを使ったFC2ブログでのカスタマイズ法について書く予定でしたが、あまりおもしろくなさそうなので、GIMPに関する記事をお届けします。

GIMP2:JPEGの圧縮率を上げて写真の容量を減らす方法について書きました。


関連記事

CSSに関連する記事の一部を、ご紹介します。

作成日:2009/12/08 更新日:2009/12/08

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

FC2ブログの記事中などにスクロールバーを付ける

こんにちは! KumaCrowさん

【1】お知らせ板ブログ・パーツにスクロールバーを付ける

私のブログでは更新情報などを、サイドの「お知らせ版」に掲示しています。FC2ブログ・パーツのフリーズペースを使用しています。太字や色つけ等をHTMLでシンプルにできる点が気に入っています(共有ブログ・パーツは私が見つけられた範囲でですが、装飾が過剰な気がして)。


ただ難点として

1)増えると長くなるので一週間分のみにしているが、以前の部分の削除が面倒(月々のブログ活動報告の記事にコピーしている)

2)記入する量によってブログ・パーツの長さが変わるので、ブログ画面全体の雰囲気が少し変わる。(画像などを自分ではバランスを見て配置しているつもりなので、縦位置がズレるとちょっとイヤ)

それを解決する手段として、スクロールバーがよいと思いました。こちらのCSS関連の記事も拝見しましたが、よく分からない点が。

ブログパーツや記事のように既にテンプレートでHtmlやCSSが既定されている時にはどうCSSをいじればよいのでしょうか。試しにこちらの記事のコードを貼り付けたり、他記事「 CSSファイルの外部読み込み」の「1:CSSをHTMLファイル内に書く方法 2つ」を参考にして手を加えてみたりしました。しかし表示されなかったり、文字色が変わっただけ等でバーの一本も表示できず…。

スクロールバーに限らず、「マウスが触れると画像や文字がピクッと動く」のや「表をお洒落にする」のもやりたいのですが、やはりHTML中にCSSを入れる方法が分からなくては無理ですよね。

FC2の記事中やブログ・パーツにCSSを適応させるのは、どうすればよいのでしょうか?関連すると思わる記事は拝見したつもりですが、見過ごしていたらすみません。


【2】「Story'z」終了記事

まだ記事が挙がっていないようですが、もしかすると私が最終的なお返事をしていなかったからでしょうか…?だとしたら、ごめんなさい。自分では既にOKとお返事済みの気でいましたので、返信しておりませんでした。

リンクはできれば避けて頂けると嬉しいです。こちらとは余りにもジャンルが違うので恥かしいのと、KumaCrowさんにとっては必要性も高くないかな? と思いまして。必要性が高いようでしたら、張ってくださっても構いません。

私の過剰な喜び具合に驚かせたかと思いますが、よそ様のブログに名前が出るだけでも「TVに映っちゃった!」みたいな感じの者ですので、「ぬか喜びさせた」等とお気遣いなく。女子会については失礼致しました。流して下さいませ。


【3】フォント

KumaCrowさんの記事中やイラスト等に書かれている文字は手書きですか?フォント使用ですか?(例えばブログ画面右上の「東日本大震災 頑張ろう日本」) 読みやすいのに温かい、良い文字ですよね。私も日記風のお話をキャラクターによって字体を変えて書こうかな?と思っているので、フォントの情報収集をたまにしています。


【4】ページの先頭に戻る

KumaCrowさんのブログは記事中に何度かコレが出ますが、何故マメに出しておられるのでしょうか?私が今使用中のテンプレートも記事毎にコレが出ます。余り必要性を感じず、「ページの最後にひとつだけ」「削ってしまおうか?」と思っていたので、気になりました。記事「「ページの先頭へ戻る」の常駐表示:CSS小技」のようにするのも良いかな?(ちょっと動く感じがうるさいかしらん?)とも思っています。


【5】ブログ作成に関する記事

確かにブログ作成も当ブログのポイントに置いていますが、KumaCrowさんがおっしゃったようにお話メインなので、自身の焦点がズレない為にあの様なまとまり無いまま記事を出しています。私がやっている分野でWebとの2本立てというブログは見かけないので、確かにニーズはあるかもしれませんねぇ。でもKumaCrowさんの所に関連内容毎に記事リンクを張らせて頂いたので、興味がある方はこちらでお勉強して頂きマス♥ 私のブログは「こういう風にすれば、こうなるんだよ」というのを見て頂く位の役割でよいと思いました。PCスキルに関してハウ・ツーを語る程の情報の精度も経験もなく、気軽に自分が面白いと思った事だけを好き勝手に喋りたいので…。

11月の活動もまとめましたが、いずれこのテーマの記事を振り返って、内容別に整理した記事を作るのもいいかな?とは思っています。私がやっているジャンルは人口が少ないので、「ブログやってみよう」と思う人が出ればいいなと思っています。


【6】スライドショー

拝見しました。まだ余り画像がなく実際に使用してはいませんが、情報をありがとうございました。成程…こういうキーワードで検索すればよいんですね。


頂いたメールに絡んだ内容も併せて長々と失礼いたしました。では! (^o^)/

ブログ・パーツにスクロールバー

にゃおさん、こんばんは( ・∀・)ノ
コメントありがとうございます。

【1】お知らせ板ブログ・パーツにスクロールバーを付ける
> ブログパーツや記事のように既にテンプレートでHtmlやCSS
> が既定されている時にはどうCSSをいじればよいのでしょうか。
>
内容がちょっと把握しきれていないのですが、
CSSのどこをいじれば良いか?ということでしたら、

「.sidemenu_body .plg_header」のところです。

この中に、この記事でご紹介しているCSSコードを追加すれば、
スクロールバーを付けられるようになるはずです。


【2】CSSを入れる方法
> スクロールバーに限らず、
> 「マウスが触れると画像や文字がピクッと動く」のや
> 「表をお洒落にする」のもやりたいのですが、
> やはりHTML中にCSSを入れる方法が分からなくては無理ですよね。
>
ん~? ごめんなさいね、
どういうご質問なのかよく分からないのですが、

HTML中にCSSは入れなくても良いですよ。
テンプレートのCSSの方をいじれば、好きなように変更できます。


【3】FC2の記事中やブログ・パーツにCSSを適応させるには?
> FC2の記事中やブログ・パーツにCSSを適応させるのは、
> どうすればよいのでしょうか?
>
記事中であれば、CSSの「.entry_body」というところに、
追加書きすれば、好きなように変更できます。

おそらく、CSSの「idとclass」についての概念を理解すると、
分かるようになるのではないでしょうか。

「idセレクタ、classセレクタとは?:CSS入門」
 →http://kumacrow.blog111.fc2.com/blog-entry-283.html


簡単にお話しすると、

テンプレートのHTML側で、その領域に、
どのような「id名またはclass名」がついているか確認し、

その「id名またはclass名」をもとに、
テンプレートのCSS側で指定している箇所を探して、

そこで追加・編集すれば良いわけです。


【4】「Story'z」終了記事
> まだ記事が挙がっていないようですが、もしかすると
> 私が最終的なお返事をしていなかったからでしょうか…?
> だとしたら、ごめんなさい。
> 自分では既にOKとお返事済みの気でいましたので、
> 返信しておりませんでした。
>
> リンクはできれば避けて頂けると嬉しいです。
> こちらとは余りにもジャンルが違うので恥かしいのと、
> KumaCrowさんにとっては必要性も高くないかな? と思いまして。
> 必要性が高いようでしたら、張ってくださっても構いません。
>
ごめんなさい。
忙しさにかまけて、後回しにしていました。(´・(ェ)・`)

名前OKで、リンクはNGですね。
了解いたしました。

できるだけ早目にUPさせていただきます。


【5】フォント
> KumaCrowさんの記事中やイラスト等に書かれている文字は
> 手書きですか?フォント使用ですか?
>
「ふい字」、あるいは「ふい字P」というフォントを、
使わせていただいています。

 →http://hp.vector.co.jp/authors/VA039499/


【6】ページの先頭に戻る
> KumaCrowさんのブログは記事中に何度かコレが出ますが、
> 何故マメに出しておられるのでしょうか?
> 私が今使用中のテンプレートも記事毎にコレが出ます。
> 余り必要性を感じず、「ページの最後にひとつだけ」
> 「削ってしまおうか?」と思っていたので、気になりました。
>
一つは、私が見るときに使いやすいので、つけています。

記事一本分を見るくらいならいりませんが、
サイト内をぐるぐる回るような場合はあると私は楽です。

閲覧時の操作がしやすくなります。


それと、もう一つの理由は、
良い区切りにもなるので、入れています。

レイアウトとして、最後の文章と次の見出しの間を、
単に余白としてあけるより、

右側にこういったものを入れることで、
見出しの上のあたりに視線を集中させるスポットができるんですね。

とくに背景が白色なので、
ぐぐっと引きつける力がうまれるのではないかと、

そういう意図で入れてあります。
メリハリ、リズムがうまれます。


【7】スライドショー
> 拝見しました。
> まだ余り画像がなく実際に使用してはいませんが、
> 情報をありがとうございました。
> 成程…こういうキーワードで検索すればよいんですね。
>
お役に立ったようで何よりです。


上手くいきました! ありがとうございます

こんにちは KumaCrowさん

ページ全体で指定するのですね。スクロールバーにも色や太さ等種類があり、それを使い分けるためにも記事毎に設定するのかと思っていました(別に使い分けたいと思った訳ではないのですが)。

お陰さまでスクロールバーが付きました。だた ――


【1】文字が水色になる

CSS内で色を示すのが「#bbb」だけと思い灰色に変えたのですが、変わりません。どうすれば色変更ができるのでしょうか?


【2】上のCSSの意味

やりたいと思ったスキルのタグを解釈すれば、少しずつCSSの理解も進むかと思っています。今回調べたりいじったりしてみて、以下のように解釈してみました

ページ内で複数回使う 『liと名付けた箇条書き』 の、スクロールバー範囲の属性を指定

list-style-type … なし (これが何を指すのかは不明)
幅 … 400px
高さ … 6文字分
枠に収まらなければバーを表示
線 … 太さ1pxの実線で水色
スクロール枠と枠内文字の左側の余白 … 0.5文字分 (それともブログパーツなど外枠とスクロール枠の隙間でしょうか)

padding-left: em;
} (分かりませんでした)

箇条書きマーカー毎の隙間 … 0.3文字分
リンク文字の装飾 … なし (「a」だし更新記録だからリンクさせた時を指定しているのかと判断)


他のCSSも色々やってみますね。楽しみです。でも色々便利にすると、テンプレートを変えるのが面倒ですね。機能や枠組みは変えずに、画像や色を少し変えるだけで季節感等を出せる物がいいです。理想に近い公式テンプレを改造して、自分のテンプレを作りあげようかな?と思います。

スクロールバーのCSS設定について

にゃおさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。

【01】スクロールバーが付いた
> お陰さまでスクロールバーが付きました。
>
良かったです。ヾ(*´∀`*)ノ


【02】「文字が水色になる」件
> CSS内で色を示すのが「#bbb」だけと思い灰色に変えたのですが、
> 変わりません。どうすれば色変更ができるのでしょうか?
>
borderの「#bbb(灰色)」指定ですかね?
これは外枠(周りを囲む罫線)に対する色の指定です。

HTMLコードを拝見すると、もともとスクロールバー内の文章は、
水色を指定していらっしゃるようですよ。

黒色についての指定は、
spanタグにて、styleによって上書き(色変更)されています。


それと<ul>タグに対する
閉じるタグとして</dl>を使っているようです。

<ul>タグを使うなら、</ul>タグで閉じてください。
</dl>の前に書いてある</dd>も不要です。


それから、<ul>タグを使っているのに、
<li>タグが<ul>タグ内に存在していないようです。

この「スクロールバー」を作成するのって、
<ul>タグを使わなければいけないということはないので、

<ul>タグによるリスト化をしなくても良いのであれば、
無理に<ul>タグを使わなくても大丈夫です。


【03】CSSの理解について
> やりたいと思ったスキルのタグを解釈すれば、
> 少しずつCSSの理解も進むかと思っています。
>
これどうしましょうかね。
こんなふうにちょこちょこお話しても余計に分からないかも。

お使いになっているHTMLとCSSのコードを
メールで送っていただければ、

「こんな風にすれば良いですよ」というのは返信できますが、
それだとあまりCSSの勉強にはならないですものね。

どうするのが良いでしょうね。


【04】CSSの意味(list-style-type)
> list-style-type … なし (これが何を指すのかは不明)
>
これは、箇条書きのマーカの部分です。
例えば、次のような箇条書きの「・」のことです。

 ・ボイン
 ・ちょびん
 ・はげちゃびん

「none」を指定しているので、
つまりマーカを表示しないという意味です。


【05】CSSの意味(border線)
> 線 … 太さ1pxの実線で水色
>
「#bbb」は灰色です。

白~黒を指定する場合は、「#fff~#000」と覚えておくと楽です。
例えば「#eee」なら、より白に近い灰色。
「#111」なら、より黒に近い灰色です。

「#bbb」はわりと真ん中くらいに位置しますが、
どちらかというと白よりの灰色です。


【06】CSSの意味(padding-left)
> スクロール枠と枠内文字の左側の余白 … 0.5文字分
>
そのように考えていただいて結構です。


【07】自分のテンプレ
> 他のCSSも色々やってみますね。楽しみです。
> でも色々便利にすると、テンプレートを変えるのが面倒ですね。
> 機能や枠組みは変えずに、
> 画像や色を少し変えるだけで季節感等を出せる物がいいです。
> 理想に近い公式テンプレを改造して、
> 自分のテンプレを作りあげようかな?と思います。
>
そうですね、いろいろ変更してしまうと、
他のテンプレートに変更するのは煩わしくなります。

おっしゃる通り、自分用のテンプレを作りこんでいくほうが、
楽しいかと思います。

「他のテンプレのここがいいなあ」と思ったら、
参考にさせていただいて、

自分用のテンプレに盛り込めばよろしいかと思います。


ヘッダーの画像を変えるだけでも、ずいぶん印象が変わるので、
季節感などは、ヘッダー画像の変更だけでも良いかもしれません。

丁寧なアドバイスを ありがとうございました

こんばんは KumaCrowさん。

【1】確認いただいたテンプレートの修正
文字色は手っ取り早くspanタグで上書きしてしまいました。

「</dl>でなく</ul>タグ」と「</dl>の前の</dd>」の部分が分からず、取りあえずブログ表示上では問題なく見えるのでそのまま…。

根本の対応をしていないのですが、後日こちらを再読しながらゆっくり確認しようと思います(今はクリスマス用のテンプレに替えてしまったので)。少し時間を置くと「ああ、そうだったのか」という事が結構あります。

「ボイン・ちょびん・はげちゃびん」―― って、言葉のセンスも韻の踏み方もお見事ですね (#^.^#)

【2】CSSの理解について
>お使いになっているHTMLとCSSのコードを メールで送っていただければ、 「こんな風にすれば良いですよ」というのは返信できますが、 それだとあまりCSSの勉強にはならないですものね。

イヤイヤそんな(私の印象では)大掛かりな事を、そんなお手間とらせてなど恐れ多いです…。
「自分が作りたいブログがどんな感じか」と「それにどれ程のスキルを要するのか」も分かりません。
それらを模索する過程で、何となく勉強できればよいで。
メールさせて頂くとしたら、ブログを見に来て頂くよりKumaCrowさんにとって面倒・手間ではない場合かとは思います。
私の勉強までお気遣い下さり、ありがとうございます。

面倒・手間について

にゃおさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。


【1】「ボイン・ちょびん・はげちゃびん」
> 「ボイン・ちょびん・はげちゃびん」―― って、
> 言葉のセンスも韻の踏み方もお見事ですね (#^.^#)
>
ありがとうございます。(´Д`;)

しかし、「土瓶・茶瓶・はげちゃびん」って、
どういう意味なんでしょうね。何の脈絡もないような気がします。


【2】面倒・手間について
> イヤイヤそんな(私の印象では)大掛かりな事を、
> そんなお手間とらせてなど恐れ多いです…。
> 「自分が作りたいブログがどんな感じか」と
> 「それにどれ程のスキルを要するのか」も分かりません。
> それらを模索する過程で、何となく勉強できればよいで。
> メールさせて頂くとしたら、ブログを見に来て頂くより
> KumaCrowさんにとって面倒・手間ではない場合かとは思います。
>
どちらかというと、情報は具体的に明示していただくほうが
手間ではありません。

テンプレートをいじる前に分からないような状態であれば、
テンプレート名をしめしていただけると、こちらも確認できます。

少しいじってみて分からないような場合は、
そのいじったHTMLとCSSコードを送付していただけると、

問題となっている箇所をみつけやすくなります。


FC2プラグインやブログパーツなどの場合も同様です。
具体的なプラグイン名が分かるほうが対応しやすくなります。

どれを使っているのか分からないと、
こちらで推測したり探したりという手間が余計に増えます。


面倒・手間についてはこちらで判断させていただくほうが、
やりやすいのです。

あまりにも時間を要するようなカスタマイズであれば、
こちらからお断りさせていただいております。


ちなみに、質問していただく場合は次のようなストーリー展開で
聞いていただけるとわかり良いです。

 1:私はこういうことがしたいんです。
 2:調べてみたらこうするのが良いと分かりました。
 3:このように試してみました。
 4:ところが、このようになってしまいうまくいきません。
 5:どうすれば解決できるでしょう?

にゃおさんは、わかり良く書いてくださいますが、
質問の記述が欠けている人もまれにいらっしゃいます。

具体的であるほど答えやすくなるのです。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/614-72d63282
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて