ページ上部への移動リンクを付ける

お京

2009年09月13日 08:27

このブログで使っている「オリジナル★テンプレート」では、ページの下の方に「このページの上へ▲」というリンクが付けられています。

このリンクをクリックしますと、表示しているページの一番上、すなわちヘッダー画像が表示されます。


この、「このページの上へ▲」と同じ機能のリンクを、それぞれの記事の終わりに付けることにしました。

右が、リンクを付ける前の状態です。


そしてこちらが、リンクを付けた後の表示です。

」の▲の部分をクリックしますと、表示しているページの一番上を表示します。


変更の手順は、次のようになります。

1. 「個別記事」テンプレートに「」印を付ける
2. 「アーカイブ」テンプレートに「」印を付ける


1. 「個別記事」テンプレートに「▲」印を付ける

次の部分を変更します。

変更前

<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory></div>


変更後

<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>│<a
class="aposted" href="#top" title="このページの上へ">▲</a>
</div>


上記のように、赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。


2. 「アーカイブ」テンプレートに「▲」印を付ける

次の部分を変更します。

変更前

<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>


変更後

<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>│<a
class="aposted" href="#top" title="このページの上へ">▲</a>



上記のように、赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。

これで、編集作業は終わりです。


関連記事