スクロールBOXの設置で最新情報一発確認

 

お気に入りに入れているブログでも
ネットサーフィンしているときに訪問したサイトでも

 

更新されているのかいないのか・・・
トップページを見てもわからない時ってありますよね。

 

 

まあ、ブログだったら画面をスクロールしていって
新しいタイトルの記事が出てくれば更新されているとわかりますけど

 

ネットショップとかだったら新しい商品が入ったかどうか・・・どうでしょう。

 

あっ、トップページから大きな見出しで訪問者にお知らせしているサイトもありますが

 

 

こんな横長ウィンドウ ↓ 見たことありませんか?

 

 

最新情報

2014/10/13  お待たせしました! 2015年カレンダー入荷しました。
2014/10/12  甘酸っぱいチーズクレープロールなど新スイーツ 入荷しました。
2014/09/07  棚卸しを実施。 新たに「キッチン用品」のカテゴリーを設けました。
2014/07/14  ワールドカップ2014 ドイツ優勝記念!ドイツ名産品を特別入荷。⇒ 9/6 終了
2014/06/15  テディベアの老舗シュタイフ社と有田焼の限定コラボ商品ぬいぐるみ入荷。
2014/04/30  カテゴリーに「純金製品」を追加しました。メダルなど高価な商品が並んでいます。
2014/04/29  石鹸、ミストファン、傘置き付きバッグハンガーなど新商品を入荷しました。
2014/02/15  羽生選手ソチ五輪金メダル獲得記念特別ライトアップ画像掲載 ⇒ 3/9 終了
2014/01/12  すみだ水族館に行ってきました。 そのときの模様をレポートしています。
2014/01/02  消臭剤などの生活用品、お菓子類、バッグなど、新商品を入荷しました.。

 

 

スクロールBOXです。

 

 

このようなBOXがあれば、最新の状態かどうかわかりますよね。

 

 

私のスカイツリーグッズ・サイトでも使っています。 ⇒ こちら
といっても上記のBOXは、
スカイツリーグッズ・サイトのBOXなんですけどね。(笑)

 

 

このスクロールBOXの設置の仕方をご紹介します。

 

 

このスクロールBOXのメリットは、

 

サイトのどこが更新されたのかわかることはもちろんですが
やっぱり、場所をとらないことですね。

 

 

過去の更新履歴がたくさんたまっても
枠の右側にスクロール・バーが出てくれることで
全ての履歴を見せなくて済みますからね。

 

 

入力するHTMLタグは、コチラ ↓ です。

 

 

<div style="width:600px; height:100px; overflow-y:scroll; border:1px solid #ccc; padding: 5px 5px;">

<:/div>

 

 

青い帯のところに
更新した案内情報を入れてください。

 

 

 

このタグの中で、いじる部分といったら、
コチラの2箇所です。

 

 

width:600px  ・・・ 枠のヨコ幅 

 

height:100px  ・・・ 枠のタテの長さ

 

 

ここの数字を変えることで、BOXの大きさを決めることができちゃいます。

 

 

その他、数字のある箇所がありますが、
そこは、枠の線と文字との間隔指定なんですが、
いじらず、上記のままでいいと思います。

 

 

 

しかし、このHTMLタグを知ったときは意外でした。

 

 

こんな1つの枠の中に入ったたくさんの情報を
ほんの数行だけ見せるようにして、あとは隠し、
スクロールバーをつけて上下させることですべての情報を見せることができるなんて・・・

 

きっと、裏で複雑なHTML構文が書かれているんだろうなぁ〜と思ってました。

 

それが

 

<div style="width:600px; height:100px; overflow-y:scroll; border:1px solid #ccc; padding: 5px 5px;">

<:/div>

 

 

たったの一行ですからね。

 

ちょっとビックリでした。(笑)

 

 

</div>

 

これは、スクロールBOXのタグをひとかたまりの範囲として定義する終了タグです。

 

 

HTML構文は、<開始タグ> 〜 </終了タグ> というように、様々な要素の内容を 囲む 形で
表現します。

 

 

 

このスクロールBOX を使っている人は少ないので

 

スクロールBOX をあなたのブログやサイトに設置して差別化を図っちゃいましょう。

 



*-----------------------------------------------------------------------------------*

   最後までお読みいただき、ありがとうございます。
   記事が少しでも参考になれば幸いです。

                  ブログランキング・にほんブログ村へ