プロフィール

mshp0723(旧Mikaん星人アワー)

Author:mshp0723(旧Mikaん星人アワー)
ごらんいただきありがとうございます。マルチクリエイタ・クリエイティブ起業家のmikaん星人アワーです。webコンテンツ関連お仕事をしています。

■お仕事関連サイト■
仙台スマホ対応ワードプレスサイト制作・アトリエSS


webサイト制作・運用関連事例
・食品店さま ネットショップ制作
・音楽スクールさま webサイト制作
・楽器奏者さま 再生プラグイン埋め込みサイト制作
・エクステリア施工企業さま webサイト企画
・飲食店さま webサイト制作
・支援団体さま サイト制作
・一般企業さま 会社案内サイト企画
・支援団体さま fc2ブログカスタマイズ
・その他 メディア/アフィリエイト運用ブログカスタマイズ



よろしくお願いいたします。

最近の記事

カテゴリー

サイトにdaw講義事例追加しました。&記事が増え、小カテゴリもできたので『ページ内位置指定リンク』と『smoothScroll』を利用。そのユーザビリティ上の理由とは?

おばんです。

そのうち人生もスムーズにいくかなーって感じのmikaん星人アワーです。


最近のお仕事サイト更新お知らせで、dtm/dawサウンドクリエイト講義・実施例ページを更新し、事例をちょこっと追加していました。このページです。
201207081.jpg

最近は入門dawも値段は下がったとはいえ高機能化して、『これからはじめるには、敷居は高いな~』って感じですが、ちょくちょく続けられております。今後ともいろいろ情報を追加していこうってことですが、このページにちょっとだけ細工をしてみました。


音楽とは関係ないですが、1つのページが文章量的に長くなってしまったときにつかえるwebサイト制作関連ねた『ページ内位置指定リンク』と『smoothScroll』です。



今回のお題はこのページです。
http://sounds-stella.jp/dtm/example



■そもそも『ページ内位置指定リンク』と『smoothScroll』を利用するメリットって?


たとえば、飲食店とかのサイトで『home・店舗概要・ランチ・ディナー』の4ページ構成のサイトがあったとします。このとき『ディナー』という1ページ内にも、『前菜やパスタ』など小カテゴリがあり、ここに『ページ内位置指定リンク』で移動してもらうことにより、ピンポイントに見たいとこを見てもらえます。
201207082.jpg
(すいません、画像間違えました、ランチってかいてあるけどこれじゃディナー向きメニューだな笑)


しかし、はじめて来た人はディレクトリ構成や、ページのどこに何が書いてあるかはわからない場合もあり、いきなり長いページのど真ん中に飛ばされたりすると・・・
201207083.jpg
ちょっと迷うかもです。


で、長いページでピンポイントで読みたいとこに移動してもらうように『ページ内位置指定リンク』、いきなりワープでなく、滑らかに流れるように移動して『どういう風に来たか』をユーザーに押さえてもらうため、『smoothScroll』を使います。



■『ページ内位置指定リンク』と『smoothScroll』の設置の仕方は?

ここのサイトでsmoothScrollスクリプトを入手できます。
http://www.kryogenix.org/code/browser/smoothscroll/
『こういう風になりますよー』というサンプルもあるので操作してみましょう。


んで、
http://www.kryogenix.org/code/browser/smoothscroll/smoothscroll.js
をダウンロード。拡張子jsファイルとしてサーバーにアップしました。

あとはパスを指定して、設置したいページのヘッダー内(meta name="description"とか、link rel="stylesheet" とか書いているとこね)に、
script type="text/javascript" src="/js/smoothscroll.js">/script>
を記載。

んで、該当ページで、ページ内リンクと同ページ内で飛ばし先を設定。(ちょっと今違うブラウザつかってたので、タグのそのまま表記できませんでした。タグは閉じてくださいね)

このページでは通常講義事例のほか、インディペンデントプログラム事例というのがあったので、カテゴリをわけてまとめました。長くなってしまったので、
a href="#iap">「インディペンデントプログラム」(当ページ下部)/a>
というリンクをつくり、ページ上部に。

で、下のほうの「インディペンデントプログラム」事例が書いてあるところに
a name="iap">/a>
を記載して、smoothscrollを作動しつつ、一瞬でいけるように。これで、この記事だけ見たい方が、横のバーやマウスのホイールを5~6秒ぐりぐりする必要もありません。



もちろん逆に、下から一番上に戻るというのも可能です。
トップにこれ記載。
a name="top">/a>

下のほうの『このページ内のトップに戻す』リンクを貼りたいとこにこれ記載。
a href="#top">Back to top/a>



という感じで、ピンポイントに移動して、スムーズに情報を伝えられるとよいですね。


んでわまた♪

にほんブログ村 地域生活(街) 東北ブログ 仙台情報へにほんブログ村 ベンチャーブログへにほんブログ村 音楽ブログへ

(↑面白かったらクリックお願いいたします♪)

関連記事
スポンサーサイト
このエントリーのタグ: webサイト制作 smoothScroll
トラックバック
トラックバック送信先 :
コメント

リンク(相互大歓迎♪)

月別アーカイブ