ページトップボタンの作り方

　ブログやホームページには"トップページ"に戻るボタンがありますが、これはそのサイトのトップページ(HOME)に戻ることを指しています。

　一方、フッターの右下の箇所などには"ページトップ"ボタンというもあり、そのページの上部（page top）に戻るボタンのことを指してます。
この場合、飛び先をname指定した上で設定する必要があります。

name指定でのPageTopボタン（上へボタン）の作り方

　通常の"トップページに戻る"ボタンの作り方は、そのサイトのトップページへのリンクを普通に貼ればいいだけです。
一方で、そのページの上部に戻る PageTop▲ ボタンの方は同一ページ内でのリンクなので、name指定で飛び先を指定する必要があります。

これは、

<a href="#pagetop">PageTop▲</a>

と

<a name="pagetop"></a>

の両方を設定して作ることになります。

どちらも同じようなタグですが、前者の a href はリンクタグで、後者の a name は"名前指定"のタグなのでリンクタグではありません。

意味としては

<a href="#pagetop">PageTop▲</a>　【始点】

のリンクをクリックすると、

<a name="pagetop"></a>　【目的地】

で指定した場所に移動します。

これは「つづきを読む」のリンクの場合も同じで、この pagetop を more に変えて、PageTop▲を「つづきを読む」に変えれば同じ機能を果たすことになります。

<a name="more"></a>
<a href="#more">続きを読む</a>

「つづきを読む」の場合は文の途中（moreで指定した場所）へジャンプするのに対して、PageTop▲の場合はそのページの上部（pagetopで指定した場所）へとジャンプします。

---

作り方としては、

<a name="pagetop"></a>

の部分をヘッダーに、

<a href="#pagetop">PageTop▲</a>

の部分をフッターに入れるとよいでしょう。

#pagetop の部分の文字は任意の文字列になります。
小文字の英数字で書き、ほかのid属性とかぶらないようにしましょう。

たとえば、こんな感じで、pagetop でなくても top とかも大丈夫です。

<a name="top"></a>

と

<a href="#top">このページの上部へ</a>

---

～ より簡単な作り方 ～

より省略した形で作る場合は、a name で飛び先を個別に指定する変わりに、今ある body タグ直後の"id 属性"の場所を指定する方法があります。
<div id="container">など、id="ほにゃらら"の場所は固有の識別名になるため、飛び先にその箇所を指定するとよいでしょう。

この場合は a name で飛び先を指定する必要がないため、フッターにタグをひとつ書くだけで済みます。

例えば、シーサーブログやmovable Typeの場合は、body の直後に div id="container" という要素があるので、この container のid属性をそのまま利用して指定するのがスマートです。

<a href="#container">PageTop▲</a>

WordPressの場合はdiv id="wrapper"の箇所とか、blogger の場合は id="navbar"とか何かしらありますので、一番上の部分にあるID属性を選んで指定すると便利です。

また、<a name="pagetop"></a>での指定を省略して、<a href="#">PageTop▲</a>のみをフッターに入れる方法もありますが、これはブラウザによっては機能しないこともあるようです。

---

～ シーサーブログでの作り方の例 ～

「デザイン － html」でＨＴＭＬの追加ボタンをクリックし、フッターに以下のようなタグを追加します。

<div class="pagetop"><a href="#container">PageTop↑</a></div>　

表示してみて位置がおかしい場合はスタイルシート「デザイン - デザイン一覧」で調節します。この場合はこのような感じタグをCSSに書き加えて調整するとよいでしょう。

.pagetop {
font-size:12px;
text-align:right;
padding:0px 20px 0px 0px;
}

文字の大きさが12px、右寄せで表示させ、右からの余白を20pxあけるといいう意味です。余白はpadding:上 右 下 左;の関係になってます。