ページ上部への移動リンクを付ける
このブログで使っている「オリジナル★テンプレート」では、ページの下の方に「
このページの上へ▲」というリンクが付けられています。
このリンクをクリックしますと、表示しているページの一番上、すなわちヘッダー画像が表示されます。
この、「このページの上へ▲」と同じ機能のリンクを、それぞれの記事の終わりに付けることにしました。
右が、リンクを付ける前の状態です。
そしてこちらが、リンクを付けた後の表示です。
「
▲」の▲の部分をクリックしますと、表示しているページの一番上を表示します。
変更の手順は、次のようになります。
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>
上記のように、赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。
これで、編集作業は終わりです。
関連記事