Top

usa*log 晴れ。ときどき、うさぎ王国

スクロールすると出てくる「トップへ戻る」ボタンなど

ちょっと長いページを見ていると
ずーっと下までスクロールした時、
a0026762_18185405.jpg
TOPに戻るボタンがあると便利です。

a0026762_18154893.jpg
ねっ。すぐにメニューから移動できます。
特にレスポンシブのモバイル表示では
手動でスクロールして戻るの面倒じゃないですか。

と思ってうちのショップにも付けました。
a0026762_18271480.jpg
それともうひとつ。
気になるページから溢れてしまうサイズのバナー。
別画像を用意することなくページにフィットさせるように
がんばってみました。


p.resizeimage img {
width:100%;
max-width: 560px;
height: auto;
}

max-width: 100%; にするとブラウザの幅いっぱいに表示されるので、
背景画像ならいいのですが、バナーなど左右にマージンとってたりする場合は
max-width: 画像サイズpx; に指定したほうがきれいです。
画像以上のサイズに表示されるとボケで見えてしまいます。



無添加・完熟十郎梅干し 曽我の里農園「和(なごみ)」

お客様のサイトに実装していい感じになったので
自分ちもついでに・・・ということで。
ショップのページが見やすくなっていたらうれしいです。
まだまだ、直したいところいっぱいあるのですけど。

ボタンをうさぎさんにしたら可愛いなとか。
とりあえず半透明にはしてみましたが。
透明効果好きで、あちこち使ってます。

・・・自分のHPは「実験」か「後回し」になってしまいます。
しょうがないですね;・×・)すんません


2017年うさぎ王国卓上カレンダー
まだまだ在庫たくさんあります!(*・×・)ノ yoropiku


今回、こちらの皆様のサイトをいろいろ参考にさせていただきました。
ありがとうございます!

一定量スクロールすると表示する「ページトップ」ボタンの実装方法

jQueryでスクロールすると表示する系いろいろ

ウインドウ幅に合わせて画像サイズを変化させる方法

CSS3 要素を透明に出来る Opacity と RGBa の使い方





[PR]
by usa-log | 2016-12-18 23:33 | デザインやなんかのこと
<< 年賀状と付きっ切り印刷の紙について クリスマスのうさぎ☆ >>