FC2ブログの関連記事リストを表示する方法

ブログが作りたい!FC2ブログの作り方 > FC2ブログの関連記事リストを表示する方法

FC2ブログの関連記事リストを表示する方法

FC2ブログで関連記事を表示する方法

「もっと他の記事も見てほしいのに!」と思ったら

さて問題です。ブログを運営していて、次のような場合にやっておくと良い基本的な施策とは何でしょうか?

  • 「PV(ページビュー)を上げたい!」
  • 「ユーザの直帰率を下げたい!」
  • 「ユーザの滞在時間を長くしたい!」

・・・はい、大正解。関連記事リストの表示ですよね。もちろん他にも方法はあるかもしれませんが、これは基本中の基本の施策と言えます。

しかし、関連記事リストをいちいち作るのって面倒ですよね。とくに剣道をしている人も、たしかによくそんなことを言っているようです。

そこで今回ご紹介したいのが、FC2ブログの関連記事リスト機能なのです。もし良かったら、どんなものかご一緒に試してみませんか?


FC2ブログの「関連記事リスト」とは?

1:「関連記事リスト」とは?

「関連記事リスト」とは、次の図をご覧いただいても分かるように、その記事に関連する記事をリスト表示したもののことをいいます。一般的には、記事の下部に表示します。

「関連記事リスト」とは?

2:「関連記事リスト」のメリット

個々の記事に「関連記事リスト」を表示しておくと、わりと他の記事(関連する記事)にも関心をもってもらいやすくなる利点があります。

その記事を読み終わったときに、「あら、こんな情報もあるのね」ということで、次につながりやすくなります。

ゆえに、PVやユーザの直帰率、ユーザの滞在時間などの改善がはかられる可能性も高まるというわけです。

以下、サンプルです。(※:クリックしても何も起こりません

FC2ブログの「関連記事リスト」サンプル

ちなみに、私も「関連記事」を表示していますが、自分の好きなようにリストアップしたいので手動でやっています。

3:FC2ブログの「関連記事リスト」の仕様

FC2ブログの「関連記事リスト」は、次のような仕様になっています。ただ、現在(2010/08/22)はまだ公式に発表されていないようなので今後どうなるかは分かりません。

  • 個々の記事の下の方に表示される。
  • blog-entry-???.htmlのページだけに表示される。
  • 同カテゴリ内の記事がリスト表示される。
  • 表示件数は、0、3、5、7、9、11、13、15のうちの1つを指定できる。
  • 記事リスト内の表示順は、「新しい順」、「古い順」のどちらかを指定できる。
  • 記事リストを表示している記事自身も、記事リスト内に表示される。(リンクはなし)

ちなみに、表示位置は、<%topentry_more>タグと拍手アイコンの間あたりになります。

なぜか分かりませんが、未分類カテゴリ(category-0)内の記事には「関連記事リスト」が表示されないみたい。バグかしらん。


FC2ブログで関連記事リストを表示する方法

簡単に設定できます。さっそく試してみましょう。

1:FC2ブログの管理者ページへ

(01)

FC2ブログの管理者ページへ行きます。

左側のメニュー「環境設定」の「環境設定の変更」をクリックしましょう。([環境設定]-[環境設定の変更])

「環境設定」の「環境設定の変更」をクリック

(02)

「環境設定の変更」のページが表示されます。

上部メニュー「ブログの設定」をクリックしましょう。

ブログの設定をクリック

2:「関連記事リスト」の設定

(03)

少し下に画面をスクロールさせると、次の項目を見つけることができるはずです。

  • 関連記事リスト 表示件数
  • 関連記事リスト 表示順

関連記事リストの表示件数を変更してみましょう。(お好きな数を選んでいただいて構いません)

関連記事リストの表示件数を変更

(04)

少し下に画面をスクロールさせて、[更新]ボタンをクリックしましょう。

[更新]ボタンをクリック

3:ブログの確認

(05)

ブログを表示して、個別記事(blog-entry-???.html)の下の方を確認してみてください。

FC2ブログの「関連記事リスト」サンプル

「FC2ブログ関連記事リスト」の装飾

「FC2ブログ関連記事リスト」は、標準の状態ではかなりシンプルなので、少しCSSによる装飾をほどこしておくと、おされ度が増します。

1:「FC2ブログ関連記事リスト」のHTMLタグ

「FC2ブログ関連記事リスト」のHTMLタグ構造は、次のような感じになっています。

2:「FC2ブログ関連記事リスト」の装飾サンプル

例えば、CSSを使うと、「FC2ブログ関連記事リスト」のデザインを次のように変更することもできます。

FC2ブログの「関連記事リスト」サンプル(モダンブラウザ)

CSSコードは、次のような感じです。(ざっくり書いています)

でも、CSS3に対応していない IEなどのブラウザでは、次のように表示されてしまいます。はい、残念。

FC2ブログの「関連記事リスト」サンプル(IEなど)

そのようなわけで、CSSによる装飾のサンプルは、Parodyさんがガッチリ書いてくれているので、参考にさせていただくとよろしいかと思います。(『記事下に同じカテゴリの記事を表示する関連記事リスト機能を実装』)

前の記事へ
次の記事へ

次回予告

お疲れさまでした。次回は、Inkscapeに関する記事を書く予定です。(Inkscapeでマンガの吹き出しを描く


関連記事

FC2ブログの作り方をご紹介している記事です。

作成日:2010/08/22 更新日:2010/08/22

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

F2Cブログの関連記事リストを表示する方法

kumacrow様。
いつも、貴重な情報をありがとうございます。
Google analyticsやQLOOKの導入する際には、お世話になりました。
これからは、GIMP2の記事を集中的に読ませてもらおうと思っています。

今回の記事なのですが、
わざわざ、URLを調べてリンクを貼るのは面倒だと思っていたので、さっそく、やってみました。
だけど、関連記事を3個表示するを選んだら、いま表示されている記事自体が、関連記事の中に表示されてしまいますね。
(新しい順か、古い順かの2通りしか指定できなくて、その中に表示中の記事が入っていても、それも一緒に表示されてしまう模様。)
あと、表示されたり、されなかったりもします。
(これは、カテゴリの絶対数が少ないのが原因かもしれません?)

やっぱり、過去の記事も読んでもらうためには、手動で直接、過去記事へのリンクを貼るのも必要だと思いました。

シゲル

関連記事を表示する他の方法

sigeruさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

そうなんですよねー。

FC2ブログの公式機能だし、
誰でも簡単に導入できそうなのでご紹介したんですが、

正直なところ機能的には、ごにょごにょですよねー。(´Д`;)
今後マッシュアップされていくといいんだけど。


ちなみに、ブログに関連記事を表示する方法は、
他にもいろいろとあるようです。

そのうちご紹介させていただこうと考えていたんですが、
以下の記事などが参考になると思うので良かったらご覧ください。

「この記事を見た人は以下も読んでます」を表示するプラグイン
「feedControl」をFC2ブログに設置
 →http://toshiiy.blog22.fc2.com/blog-entry-108.html

ちょっと、導入はややこしいですけど、機能的には期待できそうです。


追記:
 「様」はご勘弁のほどを。(-人-;)

はじめまして

FC2をはじめてからちょこちょこお邪魔しています(*^_^*)

とても参考になる記事ですね!早速導入したいと思います♪
最近FC2が大好きになってきたのでもっとカスタマイズできたらなぁ

はじめまして♪

incoさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

どうでしょう。簡単にできるのは良いのですが、
GoogleのAPIを使った方法のほうがいいかもしれません。

Webデザイナーさんなんですねー、
ぐりぐりカスタマイズしちゃってくださーい。(´▽`)♪

No title

KumaCrowさん、こんばんは。
今日、kumaCrowさんのお薦めの書籍、「現場のプロから学ぶ、XHTML+CSS」を買ってきました。
あと、GIMPの本も買いたいと思ったのですが、売っていませんでした。
(大阪ミナミの、日本で有数の繁華街で一番大きい書店なのですが。)
ただ、PHOTOSHOP関連の本は、やたら多くて、その書店では全部で50種類くらいのPHOTOSHOPの本をおいていました。

GIMPとPHOTOSHOP

sigeruさん、こんにちは!( ・∀・)ノヘロー
コメントありがとうございます。

『現場のプロから学ぶ、XHTML+CSS』は、
分かりやすいし、きっと役立つと思います。(´▽`)♪


GIMP本は、なかったんですねー。なぜでしょうね。

GIMPはたいていムック本の場合が多いので、
少しサイズが大きめです。ちょっと棚が違ったのかも。

PC系の雑誌が置いてある棚などを探してみると、
見つかるかもしれませぬ。


PHOTOSHOPは、費用対効果があり(元をとる見込みがあり)、

そしてバージョンアップごとに買い続けることができるのなら、
PHOTOSHOPを買ってしまう方がいいですよね。

それこそ、おっしゃる通り、情報も多いし、
機能もすごいことになっているし・・・そう思います。

こんな機能が出来てたんですね

この記事を参考に関連記事の挿入が出来る様になりました!
有益な情報をありがとうございます^^

クマクロさんのCSSデザインがとても気に入ったので
カラーだけ変更して使わせて頂いたのですがよろしいでしょうか??

ブラウザーのAutoPage系拡張機能で挿入されたページにも
きちんと表示されてるので非常に便利です。

関連記事のやーつ

まっこりーにさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

そういえば、「関連記事」のやつって、この記事を書いたときより、
機能が追加されたみたいですが、設定とか大丈夫でしたかしらん。

まっこりーにさんなら、大丈夫か。
余計な心配やわ。(´Д`;)

CSSのサンプルは、どうぞどうぞー。
あまりブラウザ確認していませんので、よろしくどうぞー。

びゅーん。ε≡≡ヘ( ´Д`)ノすたこらすたこら

ありがとうございます!

殆ど変わって無いと思いますよ。

選択出来る項目が少し増えてましたが、基本的には
関連記事が表示されるルールは変わってないみたいですし、
クマクロさんが参考にされた記事を参考にして
なんとか設定出来ました。

HTML、CSSの知識は相変わらず皆無のくせに
テンプレートを色々と弄ってるので、一覧に関連記事が
表示されなくて少々手こずりましたがw

IE8以外のブラウザー(Firefox、Chrome)では
CSS3はちゃんと表示されましたよ^^

僕の殺風景なブログがちょっとだけおされになったので
とても満足してますw

IEのやーつ

おされまっこりーにさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

これは、これは、ご丁寧に恐縮です。
ありがとうございまーす。(´▽`)♪

あまり違わないようで、良かったです。

IEでもやろうとすると、
表示が重くなる方法しか知らないからなぁ。(´Д`;)

簡単で軽い方法があるといいんだけど・・・。
ま、いっかー。ヽ(´ー`)ノ

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/670-e550b133
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて