プロフィール

mshp0723(旧Mikaん星人アワー)

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

■お仕事関連サイト■
音楽制作・楽曲アレンジ・webサイトやブログ制作・アトリエSS



2010~2013年の業務
サウンド制作関連
・一般クライアントさま向けDAWレッスン
・芸能プロダクションさま、アーティストさま向け楽曲提供
・教育機関さま 歌唱教材ダンスアレンジ
・ダンススクールさま ダンスBGMオーディオデータ編集
・機器メーカーさま ナレーションレコーディングと編集
・地元企業さま イベント用ご当地風楽曲アレンジ制作
・飲食店運営企業さま 店舗用カラオケアレンジ制作
・移動販売店さま 店舗BGM楽曲アレンジ制作


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



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

メールフォーム

名前:
メール:
件名:
本文:

最近の記事

カテゴリー

最近のコメント

月別アーカイブ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック
トラックバック送信先 :
コメント

サイトに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
トラックバック
トラックバック送信先 :
コメント

検索フォーム

音楽制作読んどけ☆コラム dawテクニックと音楽理論・アレンジ・更新情報

Powered by RSSリスティング

リンク(相互大歓迎♪)

RSSフィード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。