例えば、トップページを表示していて …。
右のように、記事のタイトルをクリックしますと …。
個別記事が表示はされるんですけれど、右のように、ブログのヘッダー画像がブラウザの一番上に来るような表示になります。
このブログの場合、ヘッダー画像自体の高さは低めになっているんですけれど。
その下にカスタムプラグインを使ってメニューを表示していたり、最近の記事を表示していたりしますので、個別記事を表示させようとしているにも関わらず、目的の個別記事の先頭を探さなくてはならなくなるという不都合が発生していました。
そこで。
個別記事を表示させるために、個別記事へのリンクをクリックしたら …。
個別記事の先頭あたりを表示するように、テンプレートを変えてみました。
（広告の固定配信を停止していないブログの場合、広告配信の仕様上、個別記事の先頭からずれた位置を表示してしまいますが、ご了承ください）
変更の手順は、次のようになります。
1. 「個別記事」テンプレートに記事の始まりの印を付ける
2. 「トップページ」「個別記事」「アーカイブ」テンプレートを変更する
1. 「個別記事」テンプレートに記事の始まりの印を付ける
次の部分を変更します。
変更前
<h2 class="date"><%EntryDate%></h2>
変更後
<!-- 記事の始まりの印 -->
<a name="entrytop"></a>
<!-- 記事の始まりの印 END -->
<h2 class="date"><%EntryDate%></h2>
「<h2 class="date"><%EntryDate%></h2>」の前に、
赤い文字のコードを追加してください。
「登録」をクリックしますと、変更内容が保存されます。
2. 「トップページ」「個別記事」「アーカイブ」テンプレートを変更する
まず、
・ トップページ
・ 個別記事
・ アーカイブ
の 3 つのテンプレートの、次の部分を書き換えてください。
変更前
<h3 class="title"><%EntryTitle%></h3>
変更後
<h3 class="title"><a href="<%EntryPermalink%>#entrytop"><%EntryTitle%></a></h3>
次に、
・ トップページ
・ アーカイブ
の 2 つのテンプレートの、次の部分を書き換えてください。
変更前
<a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a>
変更後
<a class="aposted" href="<%EntryPermalink%>#entrytop"><%EntryTime%></a>
「登録」をクリックしますと、変更内容が保存されます。
これで、編集作業は終わりです。