ファンブログ カスタマイズ　ぽあろの休日

今回は、このブログの記事詳細で設置している
前後記事リンクの作成方法を解説します。

基本的に、ファンブログで提供されているオリジナルタグのみで
作成しています。
オリジナルタグだけで、ここまで出来るということを
知ってもらえると嬉しいです。

ちょっと長いので目次を入れます。

１．デフォルトテンプレートの問題点

　普段使っている標準のテンプレート。
　なにか不満や使いにくいところはありませんか？

　私の場合、このブログを使い始めた当初から、記事間のつながりに
　不満がありました。
　これは、使用しているテンプレートによるかもしれないのですが、
　詳細記事から次の記事、もしくは前の記事へのリンクがないのです。



　　



　例えば、ある記事を読んだあと、このブログをもっと読んでみたいな、と思った時、
　現状では、新着記事からしかリンクを辿れないのです。
　カテゴリーを使うこともできますが、記事タイトルが解らない分、
　ちょっと、訴求力に欠けますよね？
　それに、新着記事は最新の１０記事分しか表示されませんから。



　　



　ただ、これが問題となるのは、私のように記事を本文と追記に書いてある場合です。
　本文の記述のみでブログを書いている方には、TOPページに記事全文が
　表示されるわけですから、それほど影響がないかもしれません。


　　【関連記事】記事の表示方法を色々試してみよう


　しかし、検索から記事に来られた方は、TOPページではなく、
　記事詳細に移動することになるので、同様の問題が発生する可能性はあります。

　では、この問題を解消する方法を次に見ていきましょう。

２．記事への導線を増やしてみよう

　前項で見た問題点は、他の記事への導線が少ないということです。
　なので、それを増やす方向で対策を練っていきます。

　私が、このブログで行っていることは、以下の３点です。
　（記事詳細に関するものだけです）


　　１）zenbackを使用して、関連記事を表示させる

　　２）カテゴリーメニューを設置する

　　３）前後記事へのリンクを設置する



　１）zenbackを使用して、関連記事を表示させる

　　これは、こちらの記事でも紹介したことがあるのですが、
　　zenbackというツールを使用しています。


　　　【関連記事】zenbackをいれてみた


　　このツールの最大の魅力は、自分のブログ全体から、
　　今いる記事と関連していると思われる記事を表示してくれることです。



　　



　　各種ソーシャルボタンも良い感じですよね。
　　少々重くなりますが、お薦めのツールです。



　２）カテゴリーメニューを設置する

　　このブログはカスタマイズ記事をメインにしているので、
　　各カスタマイズ記事から、他のカスタマイズ記事に移動しやすいように、
　　このような専用のリンクを設置しています。


　　　【関連記事】
　　　　　・もっと快適に記事を読んでもらう為にはどうすればよいか？【1/2】
　　　　　・もっと快適に記事を読んでもらう為にはどうすればよいか？【2/2】



　　



　　これは、過去に書いた記事を見直している時、自分自身がすごく不便に感じたので、
　　設置したものです。



　３）前後記事のリンクを設置する

　　これは今回の記事のテーマとなるので、次項より詳しく解説していきます。

３．オリジナルタグの基礎知識

　前後記事のリンクを作成する前に、今回のメインとなるオリジナルタグについて
　簡単に仕様の説明をしておきます。


　ファンブログのオリジナルタグ一覧
　　ファンブログ独自のタグの一覧表です。
　　簡単な機能説明もされています。



　１）使用できるオリジナルタグ

　　各オリジナルタグは、使用できるテンプレートが決まっています。
　　下記の画像を見てください。



　　　



　　この２つのタグの場合、{$BlogName$}は全てのテンプレートで使用できます。
　　しかし、{$ContentsBody$}は、ポータルとプロフィールでしか使用できないのです。

　　オリジナルタグを使用する場合は、この点に注意してください。



　２）エリア・条件判定タグ

　　オリジナルタグの中で、緑の背景色のタグは、エリア・条件判定に使用されるタグです。



　　　



　　例えば、‹BlogArchivePrevious›（前の記事表示エリア）というタグの場合、
　　‹BlogArchivePrevious›のタグで囲まれたコードを、前の記事に対して実行するのです。



　　　



　　つまり、このタグと記事タイトル名のタグ‹$BlogArchiveTitle$›を使うと、
　　前の記事のタイトルが取得出来るわけです。



　　　



　　リンクURLも同様に取得できます。

　　ここでは詳細を割愛しますが、条件タグは条件が正ならば、
　　タグ内のコードを実行するものです。

４．前後記事のリンクを作ってみよう

　では、実際にオリジナルタグを使ってリンクを作成してみましょう。


　１）使用するオリジナルタグ

　　今回作成するリンクは、以下の４つのオリジナルタグを使用します。

オリジナルタグ名	タグの機能
<BlogArchivePrevious>	前の記事表示エリア （初期設定では、ヘッダ下に表示されています。）
<BlogArchiveNext>	次の記事表示エリア （初期設定では、ヘッダ下に表示されています。）
{$BlogArchiveLink$}	記事リンクURL
{$BlogArchiveTitle$}	記事タイトル名

　２）前後記事のリンクを作る

　　　コードの記述場所は、「一記事」のテンプレートになります。
　　　前項の記事を参考に、まずは前の記事のリンクを作成してみましょう。
　　　こんな感じですね。

 


	{$BlogArchiveTitle$}
    

　　次の記事へのリンクも同様に作ります。






【スポンサード リンク】