ページのTOP（最上部）へ誘うナビゲーションリンクの作り方

ファンブログカスタマイズ：リンク編投稿日：2009年07月22日 02:00

ファンブログ　カスタマイズ　シンプル系スキン限定

ファンブログの記事表示数は設定ができないので、必ず１ページにつき10記事が表示されてしまいます。
私のように追記を使用している方は１番下までスクロールするのにそんなに時間はかかりませんが、追記を使用していない方はかなり下まで記事が続くことになります。

この追記については前回お話したとおり、記事が折りたためる便利な機能なんですが、訪問者さんのことを考えますと、いちいち「続きを読む」を押さなくてはならない不親切な機能でもありますので、ご自分のサイトで必要なければ、使用しない方が訪問者さんには親切なのかもしれません。

かといって、使用しないと10個の記事が延々と続くことになり、訪問者さんがそのページの上に戻るには、マウスでスクロールするか、右側のスライドバーで戻るしかありません。

そんなとき便利なのが、「このページのＴＯＰへ」というナビゲーションリンクです。このリンクを押すと一瞬で、そのページの最上部へ移動することができますので１記事ごとにこのリンクがあれば訪問者さんもラクラクです。

※ このリンクはTOPページ（HEMEページ）へのリンクではなく、閲覧しているページの最上部に移動するものなので、「HOMEページ」を「TOPページ」として表記している方は、このナビゲーションリンクを使用する際には、
「TOPページ」を「HOME」と改めるとか、「このページのTOPへ」の「TOP」を日本語表記の「最上部」に変更して、
訪問者さんが困惑しないような仕組みを考える必要があると思います。

このナビゲーションリンクは一般の URL を記述するリンクでなく、FAQ などでよく使われています特定の場所（フラグメント）を指定する方法で、id 属性を指定して作成します。

id 属性は、最初から HTML に記述されているものを利用します。一般的なのはページの最上部へ飛びます、
<div id="container"> か、ヘッッダーの真下の <div id="main"> を指定します。この２つの違いは、言葉で説明するよりも試してもらった方がわかりやすいので、見本を２つ作りました。どのように違うのか体感してください。

このページのTOPへ ▲　最上部へ　#container
このページのTOPへ ▲ 　ヘッダーの真下へ　#main

違いがわかっていただけたと思いますので、これから作り方の説明をします。お好きな方で作成してください。

▼　この説明は「シンプル系スキン」限定です。他のスキンの場合はタグの記述が異なります。 ▼

▼ それでは作り方の説明です ▼

記述はとてもカンタンです。最上段に飛ぶ場合は、#container を、ヘッダーの真下に飛ぶ場合は、#main をリンクタグの URL の場所に記述するだけです。テキストのこのページのTOPへ ▲ は、お好みのテキストや記号に変更していただいても構いません。

<a href="#container">このページのTOPへ ▲</a>
<a href="#main">このページのTOPへ ▲</a>

※ このようなナビゲーションリンクは、同じ窓で開くリンクにするのが一般的です。ファンブログの省略タグの
<リンク:"～"> では別窓で開いてしまいますので、 HTML で記述する必要があります。

いかがでしたでしょうか？このタグを記事の最後に記述すれば、訪問者さんはそのページの最上部へカンタンに移動することができます。だけど、過去記事まで全てこのタグを記述するのはとっても面倒で大変です。

ということで、次回は「このページのTOPへ」のリンクを表示させたいページの HTML に直接追記して、
全ての記事と記事の間に一発で表示させる方法を説明しますですよ。(´・ω・`)ｂ

※上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります

≪　前の記事に戻る　｜　次の記事を読む　≫