-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
ページトップに戻る小技
2005年 01月 02日 |
1ページに表示する記事を増やしたところ、下の方までページをスクロールすることになり、また上に戻すのが面倒になってきたので、直接ページのトップに戻るリンクを各記事の末尾に貼る事にしました。
ですが、これまで配布したスキンに全部これを加えていくのは流石に面倒なので、やり方だけ公開します。
といっても簡単な事なんですけど(^^;



まずはメインページ用HTML内一番上に
<a name=top> </a>
というのを書き加えます。
ページ上部の色を変えていたりして、このやり方で上に空白部分が出来てしまう場合は、入れる位置を <DIV CLASS=HEADER> の直前あるいは直後にしてみて下さい。

次に、本文用HTML内<$cmtjs$>の直後に
<div class=up><a href="#top" target="_self">▲</a></div>
と書き加えます。
▲は好きな文字や画像に変えて頂いて構いません。
これがトップへ戻るリンクになりますので、例えばタイトルの横など入れる場所を変えれば、好きな場所に表示できます。
(タイトルの横など改行せずに前のテキストに並べたい時は、divをspanなどに変えて下さい。divだと改行されてしまいます。)
これを本文用ではなくメニュー用HTML内に入れれば、メニューにトップへ戻るリンクを表示させることもできます。

そして、最後にCSS内に
.up{text-align:right; font-size :8pt; margin-top:10px; }
という一行を加えます。
ここを変えれば、表示位置や文字のサイズを変えられます。

ページのスクロールが面倒だなって方はやってみて下さいませ。
なおこれを応用すれば、ページの一番下へのリンクを貼る事もできます。
この場合、メインページ用HTML内一番下に
<a name=bottom> </a>
というのを書き加えます。
そして、topと同じく表示したい場所に
<a href="#bottom" target="_self">▼</a>
を書き加えます。
divやspanを使ってCSS指定する事も同じく可能です。
[PR]
<< ドロップスキン配布 PageTop 明けましておめでとうございます >>
XML | ATOM

個人情報保護
情報取得について
免責事項
Blue Paper Skin by Sun&Moon