Home > FC2ブログ > カスタマイズ > FC2ブログ 同一カテゴリの関連記事を指定の場所に設置する方法

FC2ブログ 同一カテゴリの関連記事を指定の場所に設置する方法

 関連記事を指定の場所に表示する方法です。

 最初に環境設定のブログの設定で【関連記事リスト表示場所】を【テンプレート変数のみ】に変更して更新。それから作成したコードをテンプレートHTML内の設置したい場所に貼り付けます。

コード作成

設置場所
見出し
関連記事
  • グリッド表示最初の記事
  • 記事冒頭文の特定ワード削除
  • グリッド・リスト表示
  • ヘッダー全体に背景画像

 設置する場所は「<!--topentry-->」から「<!--/topentry-->」までの間ならどこでも構いません。お好みの位置に貼り付けてください。

 個別ページとトップページで設置場所を変更する時は【個別ページのみ】を選択して作成したコード【トップ一覧ページのみ】で作成したコードの2つをそれぞれの設置場所に貼り付けてください。両方同じ位置の場合は【個別+一覧ページ等】のコードだけを使用してください。

 はてなブックマークを表示する時は以下のコードをスタイルシートに追加してください。

.relate_dl .relate_dd .relate_li img {margin: 0; border: 0; vertical-align: middle;}

関連記事リストの表示設定

1. 管理画面のサイドメニューの設定にある【環境設定】をクリック。

2. ブログの設定の【記事の設定】をクリック。

3. 【関連記事リスト表示場所】を【テンプレート変数のみ】に変更して更新ボタンをクリック。

 以上の設定で作成したコードをテンプレート内に貼り付けると好きな場所に関連記事を表示できます。ついでに件数や表示方法も指定しておくといいでしょう。

個別記事で関連記事リストが表示されない

 設置した場所が「<!--topentry-->」から「<!--/topentry-->」までに入っていない可能性があります。作成したコードを「<!--topentry-->」と「<!--/topentry-->」で挟んでみてください。

<!--topentry-->

ここに作成したコード

<!--/topentry-->

リンクの色や文字サイズの変更

 必要なコードをスタイルシートに追加してください。不要なものは行ごと削除してください。

.relate_dt {
  color: #000000 !important; /* 関連記事見出しの色 */
  font-size: 90% !important; /* 関連記事見出しの文字サイズ */
}
.relate_li a {
  color: #0099ee !important; /* リンク色 */
  font-size: 90% !important; /* 関連記事リンクの文字サイズ */
}
body .relate_li a:hover {color: #66aaee !important;} /* カーソル重ねた時のリンク色 */

 関連記事全体の上下の余白を調整する時は以下を追加。20pxが上の余白で10pxが下の余白です。

.relate_dl {margin: 20px 0 10px !important;} /* 関連記事の上下の余白 */

 関連記事の見出しを非表示にする時は以下を追加。

.relate_dt {display: none !important;}

設置例

 最初に【関連記事リスト表示場所】を【テンプレート変数のみ】に変更してください。

公式テンプレート:basic_white

 このテンプレートはトップ一覧ページに設置する余裕が無いので【個別ページのみ】を選択して作成したコードを使用します。

 次の位置に貼り付けると記事の最下部に設置できます。

<!--permanent_area-->
 <div class="entry_body">
  <%topentry_body>
  <!--more--><div class="more"><%topentry_more></div><!--/more-->

<!--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-->


 </div>

公式テンプレート:business-u1

 次の位置に貼り付けると個別記事の最下部に設置できます。

<!--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-->


</div><!--/entry_body-->

関連記事
スポンサー リンク
コメント
#111 : No title
may様、こんばんわ。
複数列表示やカテゴリ&タグ表示を質問した者です。

質問に関連したカスタマイズ記事を上げていただき、大変感謝しております。
どうもありがとうございます。

実は、カテゴリと共にタグリストもグリッド上に表示させたんですが、コンテンツに収まりきらなくなったため、「続きを読む」リンクを削除いたしました(バックアップはとっています)。
そのため、個別記事へのリンクが記事タイトルのみとなりました。

そこで、「続きを読む」リンクではなく、サムネイルをクリックすることで、個別記事に遷移させることはできないでしょうか?

また、外部のリンク先へ飛ばす場合、グリッド上のサムネイルをクリックしただけで、個別記事に遷移せずに外部リンク先へ飛ばすようにすることはできないでしょうか?

上記2つのカスタマイズができれば、ほぼ私の思い通りのテンプレが完成するので、是非ご教示いただければと思います。

お忙しいところ恐れ入りますが、どうぞ宜しくお願いいたします。

では。



#113 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#114 : サイドバー崩れ
コンバンハ。
ブログだけでは判断できないので実際にテンプレートHTML部分を見てみないとわかりませんが、<!--more_link-->変数または<!--more-->変数の部分に不具合があるのだと思います。

続きを読むの</FONT>後にある</p>をすぐそばの</div>の直後に移動させて、「<p class="entry_more">~</p>」までを<!--more_link-->と<!--/more_link-->で囲んでください。
以下はこちらで予想した修正後の状態です。

<!--more_link-->
<p class="entry_more">
<div align="right"><FONT size="6"><a href="<%topentry_link>" title="<%template_abs_link>">続きを読む!</a></FONT>
</div>
</p>
<!--/more_link-->

<p class="entry_more">の後に「<!--more_link-->」があり、「続きを読む!」後の</div>の前に「<!--/more_link-->」を持ってきているのが原因と予想されます。
タグは必ず入れ子状態になるように設置しないと崩れることがあります。
○以下は正常
[1]more_link
 [2]p
  [3]div
   [4]FONT
    [5]a
    [5]/a
   [4]/FONT
  [3]/div
 [2]/p
[1]more_link

×以下はダメ([2][1][3]の位置が対称ではなくバラバラ)
[2]p
 [1]more_link
  [3]div
   [4]FONT
    [5]a
    [5]/a
   [4]/FONT
  [2]/p
 [1]more_link
[3]/div

崩れた場合は変更した部分を元に戻したりしてどこがおかしいのかを確認することを推奨します。他の人にはテンプレートがどうなっているかを確認できせん。
崩れの原因がテンプレートにない場合は投稿した記事の中にタグの閉じ忘れなどがないかをご確認くださいませ。
#116 : ありがとうございます!
サイドバーの崩れご指摘ありがとうございます。
なんとか右にずらすことが出来ました!!

しかし、記事の横にそろえられませんでした。
こちらのページを参考にしながら試行錯誤して
続きを読むをすぐ記事の下に入れることが出来て
喜んでたのも束の間 他に不具合がでてしまいました(笑)

正直、HTMLの知識はほとんど無く見よう見まねでここまで作りました。
なので勝手にぐちゃぐちゃになったりしてしまったり
基礎的なことができてなく申し訳ないです。


現在のHTMLはこんな感じです。
やはりこの辺に問題があるのでしょうか?

<%topentry_body>



<!--more_link-->
<p class="entry_more">

<div align="right"><FONT size="6"><a href="<%topentry_link>" title="<%template_abs_link>">続きを読む!</a></FONT>
</div>
</p>
<!--/more_link-->

<!--more--><!--/more-->



<p class="entry_more">



<p class="entry_more">



</div>


#117 : サイドバー崩れ
コンニチハ。
スタイルシートにある「#main {」のmargin-rightが「-px」となっていますので「#main_contents {」の2番目の数値にマイナスをつけた値「-400px」を指定してください。
#main {
float: left;
position: relative;
width: 1200px;
margin-top: 35px;
mrgin-right: -400px; /* 修正 */
text-align: left;
}
#main_contents {
margin: -36px 400px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
padding-top: 35px;
}
以上で修正されると思われます。

追記部分の最後に二つ並んでいる「<p class="entry_more">」は入れ子になっていないので削除してください。きちんと</p>で閉じなければなりません。
<!--more--><!--/more-->

<p class="entry_more"> ←削除

<p class="entry_more"> ←削除

</div>

テンプレートを変更する時はプレビューでの随時確認やいつでも修正前の状態に戻せるように複製したテンプレートを残しておくことをオススメします。
また原因がわからない場合は複製しておいたテンプレートに戻すこともご検討くださいませ。
#118 : No title
この方法はスマホ版のテンプレでもオッケーなんですか?
#120 : No title
may様お久しぶりです!いつもお世話になっています。
最近は写真の素材もはじめたんですね。
がんばってください!


カスタマイズの質問があります!

SNSのボタンの横などに”はてぶボタン”や”facebookのイイネボタン”
を設置したいなと思いまして 調べた上でコードを貼り付けてみたのですが

どうもボタンが表示されなくて困っています!
救済処置があれば教えてくださいまし。。


お忙しい中ごめんなさい。
#131 : スマホ&SNSボタン表示
コンバンハ。
#118:スマホ
スマートフォンで関連記事を有効にする場合はスマホのテンプレートにも同じコードを貼り付ける必要があります。

#120:SNSボタン
トップページのボタンは表示されているようなので、<%topentry_more>の直後にも同じボタンのコード「<div class="sns_button"><ul>~</ul></div>」を追加してみてください。
<div class="more"><%topentry_more></div>
↓変更
<div class="more"><%topentry_more>

<div class="sns_button">
<ul>
省略
</ul>
</div>

</div>

ボタン左側の黒丸を消す時は以下をスタイルシートに追加。
#main .sns_button li {list-style-type: none; margin: 0;}
#305 : No title
先日はご質問にお答え頂きありがとうございました。
また、問題が出てきたので、質問させてください。

個別記事ページのコメント上にバナーやSNSボタンや関連記事を入れているのですが、
どうしても途中で途切れてしまいます。

どうしてでしょうか?
お忙しいとは思いますが、ご教示頂けますと幸いです。
#326 : パンくずリスト
こんばんは。

いつも参考にさせて頂いております。

出来ましたら、basic_whiteでのパンくずリストの作り方を教えて頂けないでしょうか。
#365 : 教えてください
とても参考になる記事ありがとうございます!
早速カスタマイズしてみたのですが、いくつか疑問点があり、質問させてください。

記事見出し?(こちらの記事を~)と各記事のリンクの間がかなり隙間があいてしまい、
少しバランスが悪いので縮めたいのですが、どうすればいいですか?

また見出しを太字にしたり、部分的に色をつける(最後に❤をつけて❤のみ指定の色にする、等)はできるのでしょうか。

初心者で全くわからず困っているので、教えていただけると助かります。
よろしくお願いいたします。

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered