fc2ブログでタグごとの関連記事一覧を表示、Google AJAX Search API使用

記事に付けられたタグに関連する記事一覧を表示する方法です。Google AJAX Search APIを使用します。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 記事ページで、その記事に付けられたタグに関連する記事一覧を表示します。

  2. Google AJAX Search APIを使用します。

  3. 基本的にコピペでOKです。Google APIキー不要です。

メリット

  1. タグごとの関連記事を表示できるので、その記事を読んだ読者が他の記事に興味を持つ可能性が上がります。

  2. タグごとの記事表示件数を指定できます。デフォルトでは10件です。

  3. デフォルトでは、記事タイトルと公開年月日を表示しますが、投稿者名(管理人名)や記事概要も表示できます。

  4. CSSをカスタムすれば装飾を好きなように変更できます。

  5. 現在ページをハイライトできるので、読者に親切です。

テンプレートのHTMLを編集

  1. 次のコメントアウトを探します。下図で反転している部分です。

    <!-- ▲▲▲ 各記事下部の固定表示スペース 終了 ▲▲▲ -->
    130717relate-tags-1.png
  2. 上記コメントアウトの下に次のコードを追加します。下図で反転している部分が追加後です。

    <!--permanent_area-->
    <!-- ▼▼▼ タグごとの関連記事 開始 ▼▼▼ -->
    <!--
    タグごとの関連記事 ver130717
    http://customtemplate.blog112.fc2.com/blog-entry-142.html
    -->
    <dl class="relate_dl" id="relate-tags" style="display:none;">
    <dt class="relate_dt">この記事に付けられたタグごとの関連記事</dt>
    <dd class="relate_dd plugins">
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript"><!--
    // load the AJAX Feed API
    google.load("feeds", "1");
    function initialize() {
    // create a feed control
    var feedControl = new google.feeds.FeedControl();
    <!--tag_list-->
    feedControl.addFeed("<%url>?xml&utag=<%topentry_tag_list_parsename>","<%topentry_tag_list_name>");
    <!--/tag_list-->
    feedControl.setNumEntries(10);//タグごとの記事表示件数
    feedControl.setLinkTarget(google.feeds.LINK_TARGET_SELF);//SELFをBLANKに変更すればリンクは別タブで開く
    feedControl.draw(document.getElementById("feedControl"),
    {
    drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED
    });
    }
    google.setOnLoadCallback(initialize);
    //-->
    </script>
    <div id="feedControl" class="tell-this-page"><img src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/now-loading.gif" alt="loading" width="100" height="100" class="no-outline no-aimg" /></div>
    </dd>
    </dl>
    <script type="text/javascript">
    //タグを設定している記事だけ「タグごとの関連記事」が表示される設定
    var tags_exist=0;
    <!--tag_list-->tags_exist+=1;<!--/tag_list-->
    if(tags_exist>0){document.getElementById("relate-tags").style.display="block";}
    </script>
    <!-- ▲▲▲ タグごとの関連記事 終了 ▲▲▲ -->
    <!--/permanent_area-->
    
    130717relate-tags-2.png
  3. コード内で赤文字部分は、その右側でコメントアウトで説明しているカスタムが可能です。

テンプレートのCSSを編集

  1. CSS編集で、任意の場所に次のコードを追加します。

    /*
    タグごとの関連記事 ver130717
    http://customtemplate.blog112.fc2.com/blog-entry-142.html
    */
    #feedControl .gf-title                {display:inline;}              /*記事タイトル*/
    #feedControl .gf-author               {display:none;}                /*管理人名*/
    #feedControl .gf-spacer               {display:none;}                /*スペーサー*/
    #feedControl .gf-relativePublishedDate{display:inline;font-size:90%;}/*公開年月日*/
    #feedControl .gf-snippet              {display:none;}                /*概要*/
    #feedControl .gfc-tabhActive          {background:#cff;border:0;color:#222;}/*選択中のタブ*/
    #feedControl .gfc-tabhInactive        {border:0;}                    /*非選択中のタブ*/
    #feedControl .gfc-tabhInactive:hover  {background:#ffc;color:red;}   /*タブをホバー時*/
    .gray #feedControl .gfc-tabhActive    {background:#333;color:#fff;}  /*クラスgray適用時*/
    .maru .gfc-tabHeader                  {border-radius:10px 10px 0 0;} /*角丸適用時*/
    .kake .gfc-tabHeader                  {border-radius: 4px  4px 0 0;} /*角欠け適用時*/
    #relate-tags .plugins{background:transparent;border:0;box-shadow:none;margin:0;padding:0;}
    
  2. 「タグごとの関連記事」の装飾をカスタムする場合、各行右端のコメントアウトが参考になります。

  3. displayの右にあるinlinenoneblockに変更すれば、それぞれの項目が別々の行になります。

  4. コピペやカスタム後に、 設定 をクリックすれば完了です。

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

  4. このページの制作時間

    • 2013年06月27日:下調べに1時間。当テンプレート用にカスタムしたり、タグなし記事では表示しないようにしたりなどで2時間。クラスgray適用時の調整などに1時間。合計4時間。
    • 2013年07月17日:この記事の作成~公開に1時間。
    • 作者多忙のため、この記事完成までに途中で間が開いてしまったが、製作時間は合計5時間だった。

他サイトの参考になるページへのリンクです。日付は各ページの公開日もしくは最終更新日です(このページの公開日現在)。ありがとうございます。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)