スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

関連記事表示

関連記事表示
いつの間にかFC2が関連記事の表示に対応していたので、早速俺のブログでも表示されるように設定してみた。
ただ、俺のブログは古い頂き物のテンプレートを俺流に物凄い勢いでカスタマイズしているので、当然ながら関連記事が表示されるようなタグは入っていない。
標準機能で自動的に表示される方法もあるんだけど、デザイン的に非常にカッコ悪いので使いたくない。
仕方が無いので関連記事表示用のタグを自分で入れてみることにした。

FC2ブログの「テンプレート用変数一覧」を見ると、まず関連記事表示エリアの設定、その中に関連記事リストエリアの設定、で、さらにその中に今現在表示中の記事とそれ以外の記事エリアがそれぞれ設定出来る。
それと、ブログ自体の設定でも項目を設定しなければならない。

手順1:関連記事表示設定
管理ページの「環境設定の変更」から「ブログの設定」「記事の設定」と辿っていくと、「関連記事リスト 表示場所」と言う項目があるので、「テンプレート変数のみ」を選択する。
関連記事リスト関係
ちなみにここで「個別ページの記事下」等を選択すれば、他に設定しなくても一応表示してくれるようになるので、面倒な人はそれだけでOK。

手順2:テンプレートのカスタマイズ
テンプレートの記事の下のあたりに以下のようなものを書く。
詳細は「テンプレート用変数一覧」を参照のこと。
<div class="kanren-list">
<!--relate_list_area-->
<span class="kanren-title">※関連記事</span><br>
<!--relate_list-->
<!--relate_entry_other-->
<ul>
<li>
<a href="<%topentry_relate_url>">
<%topentry_relate_title></a>
</li>
</ul>
<!--/relate_entry_other-->
<!--/relate_list-->
<!--/relate_list_area-->
</div>

それから、スタイルシートの方にも関連記事用の記述を追加する。
/* 関連記事 */
.kanren-list {
border: 1px dashed #660000;
margin: 15px;
padding: 10px;
}

/* 関連記事タイトル */
.kanren-title {
padding: 0 5px ;
color: #ffffff;
background-color: #660000;
}
これで、このブログに表示されているような形式での関連記事表示が有効になる。
もしこの記事を見てやってみようという人は、各自、自分のブログ用にカスタマイズして使用して欲しい。

コメント欄で質問があれば分かる範囲で対応しようとは思ってるけど、俺もなんとなく雰囲気でやってるのであまり期待しないでくださいw

theme : FC2ブログカスタマイズ
genre : ブログ

comment

Secret

カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
最近の記事
最近のコメント
最近のトラックバック
カテゴリー
過去ログ
食べログ
プロフィール

JUN

Author:JUN
プログラムみたいなもの組んだりする仕事してるおっさん。子持ち。ベガルタを生暖かい目で見守る日々。ブランメル時代の殺伐とした応援が少し懐かしくもある今日この頃。

つぶやき
人気記事
RSSフィード
リンク
VEGALTA
その他


モリタポの寄付
J . B . A n t e n n a - VEGALTA SENDAI -
にほんブログ村 サッカーブログ ベガルタ仙台へ
にほんブログ村 グルメブログ B級グルメへ
にほんブログ村 子育てブログ パパの育児へ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。