上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 3FaithBlackテンプレートでは、個別記事ページにて、記事最後、コメントエリア直前に「ナビゲーションエリア」を設けています。
「次の記事」「新着記事」「タグリスト」が表示され、記事を読み終わった訪問者に「他の記事にも情報がある」ことをアピールして、サイトが気に入ってもらえるチャンスを少しでも増やそうという目的があります。

記事フッター部・ナビ

 しかし、このメニューでは少々もの足りません。現在FC2ブログのサービスには、「関連記事表示」という非常に有用な機能が追加されています。これを利用しない手はありません。




新着記事部分を関連記事と置き換える



 まずは、ブログの設定を変えておきます。
「環境設定」→「ブログ設定」→「記事設定」→「関連記事」
 この部分の表示方法を設定。今回の場合はテンプレート変数を利用します。他の場所に表示され、重複されないように、「テンプレート変数のみ」で表示されるように設定します。



 そして、以下のHTMLを書き換えていきます。
 コピペが無難。

HTML
<!--○次のページ○新着○タグリスト○-->
<!--permanent_area-->
<!--preventry-->
<div class="next_entry_title">NEXT Entry</div>
<div class="next_entry_entry">
<a href="<%preventry_url>"><%preventry_title></a>
</div>
<!--/preventry-->

<div class="next_entry_title">NEW Topics</div>
<div class="next_entry_entry">
<!--recent-->
<a href="<%recent_link>" title="<%recent_title>"><%recent_title></a><br>
<!--/recent-->
</div>


<!--topentry-->
<!--topentry_tag-->
<div class="next_entry_title">Entry TAG</div>
<div class="next_entry_entry">
<!--tag_list-->
<a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>  
<!--/tag_list-->
</div>
<!--/topentry_tag-->
<!--/topentry-->
<!--/permanent_area-->


HTML書き換え後
<!--○次のページ○新着○タグリスト○-->
<!--permanent_area-->
<!--preventry-->
<div class="next_entry_title">NEXT Entry</div>
<div class="next_entry_entry">
<a href="<%preventry_url>"><%preventry_title></a>
</div>
<!--/preventry-->

<!--topentry-->
<!--relate_list_area-->
<div class="next_entry_title">RELATED Story</div>
<div class="next_entry_entry">

<!--relate_list-->
<!--relate_entry_other-->
<a href="<%topentry_relate_url>"><%topentry_relate_title></a><br>
<!--/relate_entry_other-->
<!--/relate_list-->

</div>
<!--/relate_list_area-->
<!--/topentry-->


<!--topentry-->
<!--topentry_tag-->
<div class="next_entry_title">Entry TAG</div>
<div class="next_entry_entry">
<!--tag_list-->
<a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>  
<!--/tag_list-->
</div>
<!--/topentry_tag-->
<!--/topentry-->
<!--/permanent_area-->

 これが、普通の感じの関連記事表示です。修正後のHTMLの中の「RELATED Story」は、「関連したストーリー」というタイトルです。自由な名前に変更してください。





「前の記事」を追加する



 例えば、ブログの内容が小説などの場合、「次のページ」「前のページ」を大きく見せるのは非常に効果的です。
 ブログには「次の記事」「HOME」「前の記事」というナビゲーションが付きものですが、ブログの最下段で、しかも小さいですよね。場所もユーザビリティ的にあまり良い場所とは言えない中途半端な場所に置かれています。
 記事が連続している場合は、この3FaithBlackのように、記事直下にさらに大きく配置しておくと、読者はどんどん「次のページ」「次のページ」へと誘導されます。

 情報系のように、記事が個別に完結している場合は、逆にこれを配置せず、関連記事のみ表示しておくと効果的かも知れません。

 今回は、それをもう一歩親切に、「前のページ」も追加する方法です。
 これは、以下の青字の一文を追加します。

HTML
<!--○次のページ○新着○タグリスト○-->
<!--permanent_area-->
<!--preventry-->
<div class="next_entry_title">NEXT Entry</div>
<div class="next_entry_entry">
<a href="<%preventry_url>"><%preventry_title></a>
</div>
<!--/preventry-->

<!--nextentry-->
<div class="next_entry_title">PREV Entry</div>
<div class="next_entry_entry">
<a href="<%nextentry_url>"><%nextentry_title></a>
</div>
<!--/nextentry-->


<div class="next_entry_title">NEW Topics</div>
<div class="next_entry_entry">
<!--recent-->
<a href="<%recent_link>" title="<%recent_title>"><%recent_title></a><br>
<!--/recent-->
</div>

<!--topentry-->
<!--topentry_tag-->
<div class="next_entry_title">Entry TAG</div>
<div class="next_entry_entry">
<!--tag_list-->
<a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>  
<!--/tag_list-->
</div>
<!--/topentry_tag-->
<!--/topentry-->
<!--/permanent_area-->


■注意

 このテンプレートは、情報系テンプレート向きに作られているので、次の記事へを押すと、どんどん古い記事へ進むよう、通常の「反対」になっています。
 古い記事から順番に読ませたい場合は、「NEXT Entry」「PREV Entry」のHTMLを入れ替え、「NEXT Entry」を「PREV Entry」に、「PREV Entry」は「NEXT Entry」と書き換えます。





■メニューに戻る
3FaithBlack徹底攻略・はじめに
このエントリーをはてなブックマークに追加
Fri.06.24.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。