テンプレート変数を使った関連記事リストの表示 cinema-daysに拍手する

2016年 08月 05
関連記事リストにアイキャッチ画像が表示できるようになったので
その表示をテンプレート変数を使ってやってみた。


① サムネイルのURL出力
<!--relate_list--><%topentry_relate_thumbnail><!--/relate_list-->
② これを画像に置き換えると横並びのサムネイル表記となる
<!--relate_list--><img src="<%topentry_relate_thumbnail>"><!--/relate_list-->

③ これにタイトルと日付を付ける場合
<!--relate_list--><img src="<%topentry_relate_thumbnail>"><a href="<%topentry_relate_url>">
<%topentry_relate_title>(<%topentry_relate_year>年<%topentry_relate_month>月
<%topentry_relate_day>日)</a>
<!--/relate_list-->

④ 画像を縦並びにする場合
<ul><!--relate_list--><li><img src="<%topentry_relate_thumbnail>">
<a href="<%topentry_relate_url>"><%topentry_relate_title>
(<%topentry_relate_year>年<%topentry_relate_month>月
<%topentry_relate_day>日)</a></li><!--/relate_list--></ul>

⑤ 画像のサイズを 90px×90px に変え、タイトル・日付を画像の右に配置する場合
  画像の枠線を消し、右余白を15px 空け、タイトル・日付を画像右上に配置
<ul><!--relate_list--><li><img src="<%topentry_relate_thumbnail>"
style="float:left;border:none;height:90px;width:90px; margin-right:15px"
<a href="<%topentry_relate_url>"><%topentry_relate_title>
(<%topentry_relate_year>年<%topentry_relate_month>月
<%topentry_relate_day>日)</a> <br clear="all" /></li><!--/relate_list--></ul>

⑥ 表示中の元記事を除外する場合
<ul><!--relate_list--><!--relate_entry_other--><li>
<img src="<%topentry_relate_thumbnail>"><a href="<%topentry_relate_url>">
<%topentry_relate_title>(<%topentry_relate_year>年<%topentry_relate_month>月
<%topentry_relate_day>日)</a></li><!--/relate_entry_other--><!--/relate_list--></ul>

⑦ 記事の要約を載せる場合
FC2 さん <%topentry_relate_discription> ってのも作ってくれないかなぁ。
要約が載せれなかったので、CSSで2列表記にした。

設置場所は、追記</more>の直前が良いかと思います。

【スポンサーリンク】
 



Loading …

 劇場映画鑑賞(10件)  Google AJAX Feed API サービス終了に伴いjQuery使用に変更 (^^;)



 Comment 投稿欄
コメント大歓迎。投稿されたコメントはブログ開設者の承認後に公開されます。
 但し、記事と無関係と思われるものは、削除させて頂きます。


装飾文字・キャラクター絵文字をお使いの場合は下記の「プレビュー」ボタンを
クリック頂くとこちらで表記をご確認頂けます。


任意 : 後から修正や削除が可能
 非公開コメントとして投稿 (管理人にのみ公開)
   



Comment (0件) 皆様からのご意見・ご感想
 現在のところ、コメントはありません。


「返信」ボタンを押すとタイトル欄に
相手方の名前が入った投稿欄に切り替わります。

Thanks for Comments 


 Trackback (0件) 他のブログの批評・感想・レビューを紹介
   
 この記事にトラックバックする(FC2ブログユーザー)

トラックバック大歓迎。
 但し、記事と無関係と思われるものは、削除させて頂きます。


Trackback (0件) 他のブログの批評・感想・レビューを紹介
 現在のところ、トラックバックはありません。


Thanks for TrackBacks 








この記事が、お役に立ちましたら、クリックをお願い致します。
  • cinema-daysを「にほんブログ村」で応援
  • cinema-daysを「FC2」で応援
  • cinema-daysを「人気ブログランキング」で応援
  • cinema-daysを「blogram」で応援



TweetsWind










このエントリーをはてなブックマークに追加








申し訳ありません。 該当する記事は削除した可能性があります。

  妻夫木聡 結婚      HOME     『皆殺しの流儀』