同ページ内リンク

デザイン五輪書

同ページ内リンクを活用し、ユーザビリティを向上!

読了までの目安時間:約 14分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

同ページ内リンクを活用し、ユーザビリティを向上!

同ページ内リンクを活用しよう!

リンクの役割

リンクタグの役割は、サイト同士や各ページ同士を繋ぐ役割だけではありません。
同ページ内を移動する目的でリンクタグを使用する事もできるのです。

例えば、当サイトの定番であるもくじも、リンクタグを使用しています。
大体の記事が長文である当サイトは、もくじがないと訪問者の方が大変です。

今回は、この同ページ内を移動する目的で使用するリンクについてご紹介したいと思います。

▲もくじへ戻る

2通りの記述方法がある!?

同ページ内を移動する目的でリンクタグを使用する場合、出発点と到着点を示す必要があります。
出発点ではリンクタグを使用し、到着点には「id」属性を記述します。

<p><a href="#goal">出発点</a></p>
<p id="goal">到着点</p>

例題では「goal」と記述しましたが、「id」属性内の値は半角英数字や「-」と「_」のみを使用し、頭文字は半角英字のみを使用する事ができます。
<a>タグ内の「href」属性で示す値は、「id」属性で設定した文字の頭に「#」を付けます。
「#」は、「id」属性である事を示しています。

この、同ページ内を移動する為のリンクですが、以前は、到着点にもリンクタグを設置し、「name」属性を使って、そこが到着点である事を示していました。

<p><a href="#goal">出発点</a></p>
<p><a name="goal">到着点</a></p>

私が訓練校で教わったのもこちらの方法ですが、現在は、この方法は殆ど使われなくなっています。
ですので、「id」属性を記述する方法を使用しましょう。

▲もくじへ戻る

古いブラウザへの対応

「古いブラウザにも対応する為に・・・」と、「name」属性も記述する方も稀にいますが、ご存じの通り、Windows XPのサポートはもうじき終了します。
このように、年々、古いOSは使えなくなり、古いブラウザの事を気にする必要もなくなって来ています。

加えて、今のブラウザは最新バージョンへの自動アップグレード機能が搭載されています。
ウェブマスターは、新機能が導入しやすくなる反面、古い機能は使用できなくなる傾向が強くなって来ています。
現に、HTML5では、<a>タグ内に記述する「name」属性は廃止になっています。

現在はXHTMLやHTML4以下のバージョンを使用中の方も、行く行くはHTML5を使わざるを得ない時期がやって来るでしょう。
その時の事を考えると、今、こだわって<a>タグ内に「name」属性を使用し続けるメリットは何もありません。

HTML5に切り替える前に、既に数百記事にそのような記述をしていた場合、もう、どうする事もできません。
ですので、私は「id」属性のみを記述する方法をお勧めします。

▲もくじへ戻る

リンク移動を流れるように行う方法

はじめに

当サイトで推奨しているWordPressのテーマ「THE WORLD」を使用中の方は、これからご紹介するプラグインを導入する必要はありません。
元々、THE WORLDにはこの機能が組み込まれているからです。

そこへ、このプラグインまで導入してしまうと、機能同士が競合してしまい、サイトの動作がおかしくなってしまいます。
ですので、THE WORLDを使用中の方は次の項目まで読み飛ばして下さい。

▲もくじへ戻る

Easy Smooth Scroll Linksの導入

「Easy Smooth Scroll Links」は、同ページ内リンクをクリックする際、画面が流れるようにスクロール移動するプラグインです。
このプラグインを使用しない場合、同ページ内リンクをクリック後、画面が到着点まで瞬間移動します。
慣れてないと、ちょっと戸惑ってしまいますので、読者の為にも、Easy Smooth Scroll Linksプラグインの使用をお勧めします。

では、実際に、Easy Smooth Scroll Linksプラグインをインストールしてみましょう。
WordPressの「サイドバー」の中にある「プラグイン」を展開し、その中の「新規追加」をクリックします。

プラグインの新規追加

プラグインのインストール画面が表示されますので、検索窓に「Easy Smooth Scroll Links」と入力し、「プラグインの検索」をクリックします。

プラグインの検索

表示されたEasy Smooth Scroll Links下部にある「いますぐインストール」のリンクをクリックします。

いますぐインストール

「本当にこのプラグインをインストールしてもいいですか?」と言う確認のダイアログが開きますので、「OK」をクリックします。

プラグインのインストールが完了すると、ページ下部に「プラグインを有効化」と言うリンクが表示されます。
これをクリックします。

プラグインを有効化

これで、同ページ内リンクの移動がスクロールするようになりました。

▲もくじへ戻る

同ページ内リンクの応用

URLに注目!

同ページ内リンクをクリックすると、URL欄の表記が、その都度変更されていると言う事に気付いてましたか?
例えば、このページの「▲もくじへ戻る」をクリックすると、URLが以下のように変更されます。

URLの変更

「ふ~ん、そうなんだ・・・。」で終わらせないで下さい。
ここが一つのポイントとなります。

この、ページのURLの最後に付いている「#contents」の部分が、<a>タグで指定した「id」属性部分です。
つまり、ページのURLの最後に「#」と「id」属性名を入力すれば、該当場所に移動すると言う仕組みになっているのです。

▲もくじへ戻る

指定箇所が表示されるリンク

この「id」属性名付きのURLへのリンクを他のページから行った場合はどうなるでしょう?
外部サイトの場合は??

・・・そうです。
あなたの想像した通り、指定した箇所が最初に表示されるようなリンクを貼る事ができるのです。

普通のリンクを貼る場合、リンクをクリックすると、対象のページの最上部が表示されます。
ですが、例えば、当サイトのページにリンクを貼る際、URLの最後に「#contents」を書き加える事で、ダイレクトにもくじの部分が表示されるようなリンクを貼る事ができるのです。

これは、同ページ内リンクを使用していないサイトでも、「id」属性を使用している箇所があれば、そこを表示するリンクを貼る事ができます。
このテクニックを駆使する事ができれば、自分のサイトの訪問者に優しい、親切な外部リンクを貼る事ができます。

▲もくじへ戻る

id属性の探し方

「id」属性名は、ブラウザが表示してくれる通常の画面では見る事ができません。
「id」属性名を確認する為には、そのページを構成するソースコード(HTML構造)を確認する必要があります。

ソースコードの表示は、マウスの右クリックで表示されるコンテキストメニューの中から選択できます。

コンテキストメニュー

「ページのソースを表示」をクリックすると、ソースコード用のタブが新たに表示されます。

ソースコード

ズラーッと並ぶソースコードを見て、面食らわないで下さいね。
一つ一つを分解して見てみると、タグが並んでいるだけです。
タグを理解できない方は、日本語の部分のみを見て、元のページと見比べると良いです。

「id」属性の部分ですが、ブラウザ内検索の機能を使う事で、強調表示する事ができます。
キーボードの「Ctrl」と「F」を同時入力します。

ブラウザ内検索

表示された検索窓に「id="」と入力し、キーボードの「Enter」を入力します。
ソースコード内の「id」属性部分が強調表示されます。

強調表示された「id」属性の値を、「#」と共にページのURLの最後に付け加える事で、場所を指定したリンクを貼る事ができます。
ぜひ、活用して下さい。

▲もくじへ戻る

WordPressユーザーの方は要注意!

id属性の重複に要注意!

当サイトのように、記事にもくじを設定している場合、テーマの構造によっては「id」属性の重複を起こす可能性があります。
「id」属性は、同ページ内に同じ値を使用する事はできないと言う決まりがあるのです。
ページ内に同じ「id」属性の値が複数存在してしまうと、例えば、同ページ内リンクを設定しても、ブラウザがどの「id」属性の事を表すのか、把握できなくなってしまいます。

「id」属性の重複を起こす可能性があると言う点についてですが、トップページやカテゴリページ、タグページの構造が問題になります。
これらのページは、記事ページの内容が引用されてページが構成されています。

試しに、あなたのサイトのタグクラウドの文字を、一つクリックしてみて下さい。

タグクラウド

同じタグを設定した記事が集められている、いわゆる、まとめページのようなページが表示されます。
テーマの構造にもよりますが、表示される各記事が全文表示の設定になっている場合、それだけ、「id」属性が被るリスクが高まります。

もくじを構成する場合、全ページ、同じ「id」属性を使用するケースがほとんどでしょう。
各ページでもくじの「id」属性をいちいち変更していたら、それこそ大変ですから。

そうなると、もくじが原因で「id」属性の重複を起こしてしまう可能性が高い訳です。

▲もくじへ戻る

THE WORLDの場合

当サイトで推奨しているWordPressのテーマ「THE WORLD」の場合、「simple」以外のテーマは全文表示の設定になっています。
ですので、もくじを設定するつもりの方は、「THE WORLD」の「simple」を使用する方が無難です。

「simple」の場合、記事の抜粋は一部分のみです。
しかも、もくじ部分をショートコードのリストを使って作っていれば、抜粋部分から外してくれます。
つまりは、「id」属性の重複のリスクを避ける事ができるのです。

余談ですが、ページの「description」の設定もショートコードの部分を外してくれる設定になっていますので、なかなか「simple」は優秀です。

▲もくじへ戻る

同ページ内リンクの活用例

商品棚

商品棚

上段棚

中段棚

下段棚

muse

photoshop

lightroom

premiere pro

after effects

dreamweaver

flash pro

illustrator

indesign

世界最高峰のプロフェッショナル画像編集ツール。

最先端のモーショングラフィックスとビジュアルエフェクト。

映像編集を自由自在に。

印刷および電子出版のためのプロフェッショナルデザインツール。

進化し続けるベクトルグラフィックツール。

Webサイト構築、アプリデザインおよびコーディング。

コード記述不要のWebサイトデザイン。

撮影から仕上げまで。写真を極めるすべてがここに。

表現豊かなインタラクティブコンテンツをあらゆるプラットフォームに。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :  

ホームページ作成 Webデザイン   コメント:0

この記事に関連する記事一覧

TOPへ戻る