ページが縦に長い場合、下からまたスクロールして上へ戻るのは少々面倒です。
このようなとき、同じページのトップに移動するリンクがあれば便利です。
同じページのトップに移動するリンクの設定方法を紹介します。
HTMLの<body>に、次のように赤い記述を加えてください。
<body id="top">
次にページトップへ戻るリンクを表示したい所に次のタグを加えてください。
<a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a>
青い文言は好きな様に変えてください。
これでそのページの上へ戻るリンクが設置できます。
当サイト配布のテンプレートであれば次のような箇所に表示すると良いかも知れません。
lightframeシリーズのフッターの右上に表示する場合
HTMLの次の箇所に赤い記述を挿入してください。
～
<br class="c-both" />
<div class="pagetop_link"><a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a></div>
<!--▼▼ フッター ▼▼-->
～
そしてスタイルシートの末尾に以下を加えてください。
.pagetop_link {
text-align:right; /* 右寄せ表示 */
font-size:9pt; /* 文字の大きさ */
margin-right:5px; /* 右の余白 */
}
standardシリーズのフッターの上（中央）に表示する場合
HTMLの次の箇所に赤い記述を挿入してください。
～
</table>
<div class="pagetop_link"><a href="#top" title="△ページトップへ戻る">△ページトップへ戻る</a></div>
</td></tr>
<!--▲▲▲▲ メインボディ（コンテンツ部分）▲▲▲▲-->
～
そしてスタイルシートの末尾に以下を加えてください。
.pagetop_link {
text-align:center; /* 中央表示 */
font-size:9pt; /* 文字の大きさ */
}
これはあくまで表示する箇所の例ですので、お好きな箇所に表示してください。
１つの記事が長い方は、記事下部にあるナビゲーションに
[日時] カテゴリ | TB(0) | CM(0) |
△TOP等と表示しても良いかもしれませんね。
- 関連記事
-
