› ちょこっと試した備忘録 › 記事テンプレート › 個別記事表示は、記事の先頭から表示する
このブログで行っている変更部分は、「CUSTOMIZE」をクリックすると表示します

最近の記事

Powered by SEO

2009年08月29日

個別記事表示は、記事の先頭から表示する

記事のタイトルをクリックすると…例えば、トップページを表示していて …。
右のように、記事のタイトルをクリックしますと …。


個別記事ヘッダー画像が上に表示個別記事が表示はされるんですけれど、右のように、ブログのヘッダー画像がブラウザの一番上に来るような表示になります。


このブログの場合、ヘッダー画像自体の高さは低めになっているんですけれど。
その下にカスタムプラグインを使ってメニューを表示していたり、最近の記事を表示していたりしますので、個別記事を表示させようとしているにも関わらず、目的の個別記事の先頭を探さなくてはならなくなるという不都合が発生していました。

個別記事の先頭あたりを表示そこで。
個別記事を表示させるために、個別記事へのリンクをクリックしたら …。
個別記事の先頭あたりを表示するように、テンプレートを変えてみました。


(広告の固定配信を停止していないブログの場合、広告配信の仕様上、個別記事の先頭からずれた位置を表示してしまいますが、ご了承ください)

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

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>


「登録」をクリックしますと、変更内容が保存されます。

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



同じカテゴリー(記事テンプレート)の記事画像
アーカイブをフォトログ表示にする
ページ上部へするする移動させる
ページ上部への移動リンクを付ける
ファビコンを付ける
タイトルバーに記事名を先に表示させる
ヘッダー画像をランダムに変える(画像リンク付)
同じカテゴリー(記事テンプレート)の記事
 アーカイブをフォトログ表示にする (2009-09-16 19:53)
 ページ上部へするする移動させる (2009-09-13 16:22)
 ページ上部への移動リンクを付ける (2009-09-13 08:27)
 ファビコンを付ける (2009-08-27 18:58)
 タイトルバーに記事名を先に表示させる (2009-08-15 16:08)
 ヘッダー画像をランダムに変える(画像リンク付) (2009-08-12 22:32)