2009年09月13日
ページ上部へするする移動させる
このブログで使っている「オリジナル★テンプレート」では、ページの下の方に「このページの上へ▲」というリンクが付けられています。このリンクをクリックしますと、表示しているページの一番上、すなわちヘッダー画像が表示されます。
「ページ上部への移動リンクを付ける」では、この、「このページの上へ▲」と同じ機能のリンクを、それぞれの記事の終わりに付けましたが。
この時のページの上への移動を、パッ! と一瞬で移動させずに、するする～っと戻ってますよ～という状態を表示しつつ移動させる方法を説明します。
Javascript を使って実現させるのですが。
こちら ↓ のページで公開されている方法を使わせて戴きました。
+ このページの先頭へ、をちょこっとおしゃれに／SIMPLE*SIMPLE +
http://www.simplexsimple.com/archives/2006/09/post.html
変更するテンプレートは、
・ トップページ
・ 個別記事
・ アーカイブ
の 3 つ全てで。
それぞれについて、次の作業を行います。
1. テンプレートに Javascript を記述する
2. リンクの記述を変更する
1. テンプレートに Javascript を記述する
トップページ、個別記事、アーカイブ、それぞれのテンプレートの </head> の直前に、Javascript のプログラムを挿入します。
変更前
</head>
変更後
<!-- 「このページの上へ」をするする移動 -->
<script language="JavaScript">
<!--
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
}
//-->
</script>
<!-- 「このページの上へ」をするする移動 END -->
</head>
上記のように、赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。
2. リンクの記述を変更する
「ページ上部への移動リンクを付ける」の変更を行われていない場合は、
<a class="aposted" href="#top">
の部分を変更します。
「ページ上部への移動リンクを付ける」の変更を行われた場合は、
<a class="aposted" href="#top">
と
<a class="aposted" href="#top" title="このページの上へ">
の部分を変更します。
変更前
<a class="aposted" href="#top">
または
<a class="aposted" href="#top" title="このページの上へ">
変更後
<a class="aposted" href="#top" title="このページの上へ" onclick="backToTop(); return false">
「登録」をクリックしますと、変更内容が保存されます。
これで、編集作業は終わりです。
アーカイブをフォトログ表示にする
ページ上部への移動リンクを付ける
個別記事表示は、記事の先頭から表示する
ファビコンを付ける
タイトルバーに記事名を先に表示させる
ヘッダー画像をランダムに変える（画像リンク付）
ページ上部への移動リンクを付ける
個別記事表示は、記事の先頭から表示する
ファビコンを付ける
タイトルバーに記事名を先に表示させる
ヘッダー画像をランダムに変える（画像リンク付）
Posted by お京 at 16:22
│記事テンプレート
