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

スクロール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 をあなたのブログやサイトに設置して差別化を図っちゃいましょう。

 



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

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

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

関連ページ

パワーポイントで画像の背景を消す方法
プレゼンテーションの資料を作るとき、見る人の視覚に訴えるよう画像を盛り込むようにしたいものです。その画像を資料に載せるとき、「背景を消したい」と思ったことないですか?なんとか図柄だけ抜き取って載せたいと思うことありますよね。しかし、パワーポイントではそれがカンタンにできます。その方法とは・・・
画像を一瞬にして反転させる方法
ホームページやブログの記事に文章だけでなく画像を載せるときってあると思います。でもその画像を左右反転させたいと思うときありませんか?ありますよね。そのときは JTrim などうってつけのアプリがありますが、そのような画像編集アプリを使わなくても画像を反転させる方法がヒョンなことから見つかりました。 それは・・・
自作レポートを立体画像で魅せよう 【動画解説付き】
メルぞうなどに載っている無料レポートの立体画像。奥行きがあるのでとてもリアリティーがありますよね。その人の目を引く立体画像を無料で作る手法の紹介です。こんなにカンタンだなんて!今すぐ詳細をご確認ください。
画像の背景を透明にして図柄だけ抜き取る方法 【動画解説付き】
画像の上に画像を重ねたい。だけど、上に載せる画像の背景まで一緒に載っかってしまうので、やりたくても出来ない。そんな経験ないですか?「背景色が取れればなあ〜」 長年ずっと、そう思ってきましたが、ありました!背景を取る方法が。 それは・・・
画像の上に文字を重ねて書く方法
ブログ記事を書く時、画像を載せたことあると思いますが、その画像の上に文字を重ねて書いたことあるでしょうか。そんなこと、シリウスでもワードプレスでも無料ブログサービスでもできないんですよね。でもある方法を使うとできちゃいます。その方法はこちらからご確認を。
ファビコン設置のメリット
ファビコンとは、アドレスバーやページタグの先頭に表示される小さなアイコンです。この設置をしていないと白紙のアイコンが自動セットされます。自分のサイトにはやっぱり自分オリジナルのシンボルマークがほしいですよね。その設置方法をご紹介します。
記事に載せる画像の位置を自由自在に操る方法
あなたはブログに画像を載せるとき、中央だけでなく左右に寄せて載せることってしてませんか?そのとき左右に寄った画像の位置を微調整できたら、と思ったりしませんか?その方法あるんです。

 
トップページ プロフィール 目次 オススメ 商品 メルマガ SNS お問い合わせ