Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

FC2ブログ、スマートフォン表示でも関連記事機能実装　設定と方法

　FC2ブログをスマートフォンで表示した場合も同じカテゴリに所属する関連記事が表示されるようになりました。設定の方法と表示件数などはPC版と共有しています。既にPC版で設定している方は特に変更する必要はありません。

　設定箇所は[環境設定][ブログの設定][記事の設定]にあります。

　ただし、スマートフォン版は個別ページ以外の一覧ページでは関連記事は表示されません。下記のような記事個別ページのみです。

http://id.blog.fc2.com/blog-entry-1.html
http://id.blog.fc2.com/?no=1

　スマートフォン個別記事のテンプレートプレビューの確認はFC2ブログスマートフォンテンプレート編集 プレビュー用スクリプトを利用します。

　好きな位置に関連記事を表示したいときは、表示場所を『テンプレート変数のみ』を選択します。テンプレートの編集がよくわからないときや面倒なときは『個別ページの記事下』または『個別、一覧ページの記事下』を選択します。

　関連記事リスト機能を無効にするときは、表示件数を 0 にします。

『個別ページの記事下』『個別、一覧ページの記事下』『上記全て』

　いずれかに設定するとテンプレートのHTMLを変更することなく、記事下に関連記事が表示されるようになります。

　これらの設定において、自動挿入される関連記事リストは決められた位置に決まったコードを出力します。

　拍手利用 → 拍手ボタンの直後に挿入。
　拍手がなく記事に追記がある → <%topentry_more> 変数（追記部分）の直後に挿入。
　拍手がなく記事に追記がない → <%topentry_body> 変数（本文）の直後に挿入。

■挿入されるコード（3件表示の場合）
※実際のコードは改行やスペースなどのインデントはなく、一行に繋がっています。また、現在表示している記事はリンクされません。

<dl class="relate_dl">
 <dt class="relate_dt">関連記事</dt>
 <dd class="relate_dd">
  <ul class="relate_ul">
   <li class="relate_li"><a href="?no=5">同じカテゴリの前の記事</a></li>
   <li class="relate_li_nolink">開いている記事</li>
   <li class="relate_li"><a href="?no=3">同じカテゴリの次の記事</a></li>
  </ul>
 </dd>
</dl>

　表示されるのは記事タイトルと月日（mm/dd）のみです。年や曜日、タグなどは表示されません。

　[関連記事リスト 日付表示] を [表示する] に設定すると記事タイトルの直後に日付が追加されます。

記事タイトル (mm/dd)

<li class="relate_li"><a href="?no=5">同じカテゴリの前の記事 (01/03)</a></li>
<li class="relate_li_nolink">開いている記事 (01/02)</li>
<li class="relate_li"><a href="?no=3">同じカテゴリの次の記事 (01/01)</a></li>

表示方法の設定

『前後の記事を新しい順に』『前後の記事を古い順に』表示する

　関連エントリは、開いている記事を中心とした前後の記事を出力します。

表示件数 5 件 : 記事C を開いたとき → 前後に 2 件ずつ

 記事E（01/05）
 記事D（01/04）
 記事C（01/03）開いている記事
 記事B（01/02）
 記事A（01/01）

　表示件数分の記事がなかった場合は、反対方向に加算されて表示されます。

表示件数 5 件 : 記事A を開いたとき → 前後に 2 件ずつ
　→ 記事A（01/01）よりも前の記事がない → 反対方向に 2 件加算して 5 件表示

 記事E（01/05）←表示
 記事D（01/04）←表示
 記事C（01/03）
 記事B（01/02）
 記事A（01/01）開いている記事

前後の記事を新しい順に : 記事C（01/03）を開くと関連記事は次のように表示されます。

 記事D（01/04）
 記事C（01/03）開いている記事
 記事B（01/02）

古い順 : 記事C（01/03）を開くと関連記事は次のように表示されます。

 記事B（01/02）
 記事C（01/03）開いている記事
 記事D（01/04）
『最新記事を』『最古記事を』表示する

　どの記事を開いても、最も新しい記事または最も古い記事から表示されます。

　例えば、表示件数が3件で全部で5件の記事があったとします。

 記事E（01/05）
 記事D（01/04）開いている記事
 記事C（01/03）
 記事B（01/02）
 記事A（01/01）

最新記事を : どの記事を開いてもリストの先頭には最新の記事が表示されます。

 記事E（01/05）
 記事D（01/04）開いている記事
 記事C（01/03）

最古記事を : どの記事を開いてもリストの先頭には最古の記事が表示されます。

 記事A（01/01）
 記事B（01/02）
 記事C（01/03）

※現在開いている記事がリストにない場合は、現在の記事はリストに表示されません。

『記事をランダムに』表示する

　記事の投稿日時を無視して、同じカテゴリの記事をランダムに表示します。

 記事E（09/05）
 記事D（08/04）
 記事C（04/03）
 記事B（05/02）
 記事A（06/05）

表示件数の設定

　関連記事リストの表示方法によって選択できる件数が決まっています。

■『前後の記事を新しい順に』『前後の記事を古い順に』表示する

　表示件数は　0 , 3 , 5 , 7 , 9 , 11 , 13 , 15 件から選択します。
　それぞれ前後に　1件　2件　3件　4件　5件　6件　7件　ずつ表示します。

■『最新記事を』『最古記事を』『記事をランダムに』表示する

　表示件数は　0 ～ 15 件の中から選択します。

　表示件数を 0 にすると、関連記事リスト機能が無効になります。

　表示件数には開いている記事の数も含みます。

　3件 → 前の記事 ＋ 開いている記事 ＋ 次の記事

表示場所 : 『テンプレート変数のみ』

　記事出力部分 <!--topentry-->～<!--/topentry--> 内であれば、関連記事リストをどこにでも設置できます。記事下に表示するときは[A]のコードを貼り付けます。それ以外の個所に設置するときは[B]を貼り付けます。

※表示場所の設定変更を考慮して、クラス名、マークアップなどは公式のものをそのまま利用しています。

[ A ] 記事出力部分の中に設置（通常の設置）

　記事出力部分 <!--topentry-->～<!--/topentry--> 内、表示したい箇所に次のコードを入れます。

<!--permanent_area-->
<!--relate_list_area-->
<dl class="relate_dl">
 <dt class="relate_dt">関連記事</dt>
 <dd class="relate_dd">
  <ul class="relate_ul">
<!--relate_list-->
 <!--relate_entry_other-->
  <li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
 <!--/relate_entry_other-->
 <!--relate_entry_now_showing-->
  <li class="relate_li_nolink"><%topentry_relate_title></li>
 <!--/relate_entry_now_showing-->
<!--/relate_list-->
  </ul>
 </dd>
</dl> 
<!--/relate_list_area-->
<!--/permanent_area-->
[ B ] メニューやフッターなど記事出力部分の外に設置する場合

　次のコードを表示したい箇所に入れます。関連記事の変数は <!--topentry--> 内で有効になるため、<!--topentry--> で囲みます。

<!--permanent_area-->
<!--topentry-->
<!--relate_list_area-->
<dl class="relate_dl">
 <dt class="relate_dt">関連記事</dt>
 <dd class="relate_dd">
  <ul class="relate_ul">
<!--relate_list-->
 <!--relate_entry_other-->
  <li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
 <!--/relate_entry_other-->
 <!--relate_entry_now_showing-->
  <li class="relate_li_nolink"><%topentry_relate_title></li>
 <!--/relate_entry_now_showing-->
<!--/relate_list-->
  </ul>
 </dd>
</dl> 
<!--/relate_list_area-->
<!--/topentry-->
<!--/permanent_area-->

　上記[ A ]または[ B ]のコードにある「<%topentry_relate_url>」の直後に「&sp」や「<%tail_url>」を追加します。

<a href="<%topentry_relate_url>&sp">

記事タイトルの横に年や月日を入れる

　変更箇所は次の部分です。「<%topentry_relate_title>」の前後に変数を入れます。

<a href="<%topentry_relate_url>"><%topentry_relate_title></a>

　記事タイトル（月/日） とする場合は次のようにします。

<a href="<%topentry_relate_url>"><%topentry_relate_title>（<%topentry_relate_month>/<%topentry_relate_day>）</a>

2010年09月09日 記事タイトル とする場合は次のようにします。

<%topentry_relate_year>年<%topentry_relate_month>月<%topentry_relate_day>日 <a href="<%topentry_relate_url>"><%topentry_relate_title></a>

　現在表示している記事タイトル横にも日付などを入れる場合は、同様に変更します。

記事タイトル（月/日） とする場合は次のようにします。

<li class="relate_li_nolink"><%topentry_relate_title>（<%topentry_relate_month>/<%topentry_relate_day>）</li>

　時間や曜日なども入れるときは、次の変数一覧を参考にして変数を加えます。

関連記事リストの変数一覧

　関連記事の変数は <!--topentry--> 内で使います。

　関連記事リストを入れるときは必ず <!--relate_list_area--> で囲むようにします。そうすると不要な要素を除いてくれるはずです。

　リストの繰り返しは <!--relate_list--> です。

<!--relate_list_area-->
  関連記事見出し
 <!--relate_list-->
  関連記事リスト
 <!--/relate_list-->
<!--/relate_list_area-->

　<!--relate_entry_other--> は現在表示中の記事と同じではない場合のみ表示されるブロック変数です。 <!--relate_list--> 内で使います。例えば、下記のようにすると、現在表示中の記事以外のタイトルが表示されます。

<!--relate_list-->
<!--relate_entry_other-->
<%topentry_relate_title>
<!--/relate_entry_other-->
<!--/relate_list-->

　<!--relate_entry_now_showing--> は現在表示中の記事と同じ場合のみ表示されるブロック変数です。 <!--relate_list--> 内で使います。例えば、下記のようにすると、現在表示中の記事タイトルのみリンクされません。

<!--relate_list-->
<!--relate_entry_other-->
<a href="<%topentry_relate_url>"><%topentry_relate_title></a>
<!--/relate_entry_other-->
<!--relate_entry_now_showing-->
<%topentry_relate_title>
<!--/relate_entry_now_showing-->
<!--/relate_list-->
変数説明
<%topentry_relate_title>記事タイトル
<%topentry_relate_url>記事URL（?no=記事番号）
<%topentry_relate_year>年
<%topentry_relate_month>月
<%topentry_relate_day>日
<%topentry_relate_hour>時
<%topentry_relate_minute>分
<%topentry_relate_second>秒
<%topentry_relate_youbi>曜日（Mon）
<%topentry_relate_wayoubi>曜日（月）

デザインについて

セレクタ
/* FC2relate
-------------------------------------------------------- */
.relate_dl { /* 全体 */

}
.relate_dl .relate_dt { /* 関連記事（見出し部分） */

}
.relate_dl .relate_dd { /* リスト外枠 */

}
.relate_dl .relate_dd .relate_ul { /* リスト部分 */

}
.relate_dl .relate_dd .relate_ul li { /* 記事のリスト */

}
.relate_dl .relate_dd .relate_ul .relate_li_nolink { /* 現在開いている記事 */

}
関連記事上下の余白を変更する

　.relate_dl に margin や padding を指定します。

/* FC2relate
-------------------------------------------------------- */
.relate_dl {
 margin: 35px 0 15px;
}

　変わらない場合は !important を追加します。

 margin: 30px 0 20px !important;
文字サイズを変更する

　.relate_dl などに font-size を指定します。

/* FC2relate
-------------------------------------------------------- */
.relate_dl {
 font-size: 11px;
}

　変わらない場合は !important を追加します。

 font-size: 11px !important;
リストにマーカーをつける

　.relate_ul に次のコードを追加します。

.relate_dl .relate_ul {
 list-style-type: disc;
}

　disc は黒丸。circle は白丸。square は黒四角。none はなし。

  • list-style-type: disc;
  • list-style-type: circle;
  • list-style-type: square;
  • list-style-type: none;

　変わらない場合は !important を追加します。

 list-style-type: disc !important;

　それでも変わらない場合は .relate_ul li に次のコードを追加します。

.relate_dl .relate_ul li {
 list-style-type: disc !important;
}

　背景画像があり、その背景画像を削除する場合は .relate_ul li に次のコードを追加します。

.relate_dl .relate_ul li {
 background: none !important;
}
リンクの色を変更する

　上から順に未訪問、訪問済み、カーソルを乗せたとき。

.relate_dl .relate_ul .relate_li a:link {
 color: #0088cc;
}
.relate_dl .relate_ul .relate_li a:visited {
 color: #0088cc;
}
.relate_dl .relate_ul .relate_li a:hover {
 color: #dd0000;
}

　変わらない場合は !important を追加します。

 color: #0088cc !important;

リスト内の現在表示している記事タイトルを非表示にする

　『テンプレート変数』を使用している場合は[ A ][ B ]どちらも利用できますが、出力そのものをなくす[ B ]推奨です。変数を使っていない場合は[ A ]を利用します。

[ A ] スタイルシートで非表示

　.relate_li_nolink に次のコードを追加します。

.relate_dl .relate_ul .relate_li_nolink {
 display: none;
}

　非表示にならない場合は !important を追加します。

 display: none !important;
[ B ] テンプレート変数のみ

　設置したコードを変更します。

<!--relate_entry_other-->
 <li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
<!--/relate_entry_other-->
<!--relate_entry_now_showing-->
 <li class="relate_li_nolink"><%topentry_relate_title></li>
<!--/relate_entry_now_showing-->

　上記の赤字部分を削除します。

<!--relate_entry_other-->
 <li class="relate_li"><a href="<%topentry_relate_url>"><%topentry_relate_title></a></li>
<!--/relate_entry_other-->

デザインサンプル

　とりあえずのスタイルです。関連記事の表示がおかしい場合に使うと整うかもしれません。次のいずれかをスマートフォンテンプレートのスタイルシートに追加します。

■[ A ]

■[ B ]

■[ C ]

■[ D ]

関連記事
  1. comment

  2. test 2012-07-13 22:27 No.1288 #-URL

    testです

  3. anonymous 2014-09-25 20:21 No.4518 #-URL

    ＞記事タイトルの横に年や月日を入れる

    の見出しが重複していませんか？間違ってたらスマソ

コメント

Icon ※必須 :
Pass 　※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

https://paro2day.blog.fc2.com/tb.php/972-ab032581

  1. trackback