fc2blogの関連記事リストにサムネイル(アイキャッチ)画像を表示する方法

更新
2013年04月06日(土)

関連記事リストをカスタムしサムネイル(アイキャッチ)画像を表示します。当サイト作者が作成した次のテンプレートについてです。

2013年3月5日追記:この記事は次の記事に改訂されています。

2013年4月6日追記:上記改訂版を作成した理由を次のページで述べています。

概要

  1. 関連記事リストにサイズ100x100のサムネイル(アイキャッチ)画像を表示します。

  2. 記事番号(URL「blog-entry-数字.html」の数字部分)と同じ数字を画像ファイル名に付与します。

  3. サムネイル(アイキャッチ)に使う画像ファイルは、そのファイル名や拡張子に規則性を持たせます。つまり、記事番号以外はすべて同じにするということです。たとえば、次のとおりです。

    • entry-1s.jpg
    • entry-2s.jpg
    • entry-3s.jpg
  4. 実際にアイキャッチ画像を表示しているサンプルブログは愛猫チェリッシュです。

メリット

  1. 関連記事リストでもサムネイル(アイキャッチ)画像を表示すれば、記事の内容をビジュアルで伝えられます。

  2. サムネイル(アイキャッチ)画像がない記事は、その旨を伝える画像を表示できます。

  3. 他のfc2blogと差別化を図れます。

環境設定の変更

  1. 追加するHTMLやfc2変数が反映されるように環境設定の変更をします。これをしないと、いくらテンプレートのHTML編集をしても、サムネイル(アイキャッチ)画像が表示されません。

  2. ブログ管理画面で環境設定の変更をクリックします。

    valid-seo-3c-130-kanren-eyecatcher-1.gif
  3. ブログの設定をホバーすると表示される記事の設定をクリックします。

    valid-seo-3c-130-kanren-eyecatcher-2.gif
  4. 関連記事リスト 表示場所 の右にある選択リストから テンプレート変数のみ を選択し  更新  します。

    valid-seo-3c-130-kanren-eyecatcher-3.gif
  5. 環境設定の変更は以上です。

画像をアップロード

  1. サムネイル(アイキャッチ)画像として使う画像をアップロードします。サンプルブログでは、サイズ100x100の画像を11枚用意しました。そのファイル名は次のとおり規則的につけました。記事番号の後にsをつけている理由は、サムネイルを自動生成した場合に対応させるためです。

    • entry-1s.jpg
    • entry-2s.jpg
    • entry-3s.jpg
    • entry-4s.jpg
    • entry-5s.jpg
    • entry-6s.jpg
    • entry-7s.jpg
    • entry-8s.jpg
    • entry-9s.jpg
    • entry-10s.jpg
    • entry-11s.jpg
  2. サイズ100x100のサムネイル画像を必ずしも用意する必要はありません。サイズ100x100よりも大きな画像をアップロードする際に、サムネイルの横の同時に作成するにチェックを入れ、サイズ100x100を設定しておきます。この際、ファイル名は entry-1.jpg というように、記事番号の後にsを付けません。理由は、 entry-1.jpg のサムネイル画像のファイル名が entry-1s.jpg になるからです。

    valid-seo-3c-130-kanren-eyecatcher-12.png
  3. オンラインで使える画像切り抜きツールや縮小ツールを載せておきます。

テンプレートのHTMLを編集

外部JavaScriptファイル

  1. 必要な外部JavaScriptファイルを読み込む設定をします。次のコメントアウトを探します。下図で反転している部分です。(過去バージョンのテンプレートの場合、</head>の上辺りで)

    <!-- ▼▼▼ アクセス解析タグ挿入場所候補1 開始 ▼▼▼ -->
    valid-seo-3c-130-kanren-eyecatcher-4.gif
  2. 上記コメントアウトのに次のコードを追加します。追加後は下図のようになります。なお、customtemplate をご利用の場合やjQueryを既に読み込んでいる場合は、上から2行目あたりのグレイの部分は削除した方がいいです。

    <!-- ▼▼▼ jQueryなど読み込み 開始 ▼▼▼ -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    var img_name_first="entry-";
    var img_name_last= "s.jpg";
    var eyecatch_from= "0";
    var no_eyecatch_entries="0";
    var css_link="<%css_link>";
    </script>
    <script type="text/javascript" src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/121017-eyecatcher.js"></script>
    <!-- ▲▲▲ jQueryなど読み込み 終了 ▲▲▲ -->
    valid-seo-3c-130-kanren-eyecatcher-5.gif

アイキャッチ表示設定

  1. 関連記事リストにサムネイル(アイキャッチ)画像が表示されるようにするコードを追加します。次のコードを探します。下図で反転している部分です。

    <!--more--><div id="more"><%topentry_more></div><!--/more-->
    valid-seo-3c-130-kanren-eyecatcher-6.gif
  2. 上記コードのに次のコードを追加します。追加後は下図のようになります。なお、上から4行目にあるグレイのkanren-yoko を削除することで、関連記事リストの各項目を横長から縦長に変更できます。

    <!-- ▼▼▼ 関連記事リスト アイキャッチ表示設定 開始 ▼▼▼ -->
    <!--relate_list_area-->
    <hr />
    <dl class="relate kanren-yoko no-aimg">
    <dt class="relate-title"><span>&#9758; 関連記事</span></dt>
    <dd class="relate-body">
    <ul class="relate-entries">
    <!--relate_list-->
    <li class="relate-entry<!--relate_entry_now_showing--> relate-entry-now<!--/relate_entry_now_showing-->">
    <ul class="relate-entry-lists">
    <li class="relate-entry-img">
    <a href="<%topentry_relate_url>"><script type="text/javascript">var relate_url="<%topentry_relate_url>";relate_img(100,100);</script></a>
    </li>
    <li class="relate-entry-title">
    <a href="<%topentry_relate_url>"><!--relate_entry_now_showing--><span class="relate_now">(今ここ) </span><!--/relate_entry_now_showing--><%topentry_relate_title></a>
    </li>
    <li class="relate-entry-date pale small">
    <%topentry_relate_year>年<%topentry_relate_month>月<%topentry_relate_day>日
    </li>
    </ul><!-- /.relate-entry-lists -->
    </li><!-- /.relate-entry -->
    <!--/relate_list-->
    </ul><!-- /.relate-entries -->
    </dd><!-- /.relate-body -->
    </dl><!-- /.relate -->
    <!--/relate_list_area-->
    <!-- ▲▲▲ 関連記事リスト アイキャッチ表示設定 終了 ▲▲▲ -->
    
    valid-seo-3c-130-kanren-eyecatcher-7.gif
  3. HTML編集はとりあえず以上です。

テンプレートのCSSを編集

  1. CSSを編集し、関連記事リストの装飾を2種類から選べるようにします。次のコメントアウトを探します。下図で反転している部分です。

    /*記事 > ページ送り*/
    valid-seo-3c-130-kanren-eyecatcher-8.gif
  2. 上記コメントアウトのに次のコードを追加します。追加後は下図のようになります。IE6/7用のコードがW3Cでinvalidになります。気になる人は適宜調整してください。

    /*関連記事リスト アイキャッチ表示設定*/
    dl.relate,.relate dd{margin-left:0;}
    .relate ul{margin-bottom:0;}
    .relate li{list-style:none;margin-left:0;width:100px;}
    .relate-entry{display:inline-block;padding:5px;}
    .relate-entry{/display:inline;/zoom:1;}/*ie6/7*/
    .relate-entry:hover{background:#ffc;outline:1px dashed #3cc;}
    .relate-entry-now{background:#fafafa;}
    .relate-entry-lists li{overflow:hidden;}
    .relate-entry-title,.relate-entry-title a{line-height:1.1;height:85px;}
    .relate-entry-title a{display:block;}
    .relate-entry-date{text-align:center;border-top:1px dotted #ccc;height:14px;}
    .relate img{background:url(http://blog-imgs-49.fc2.com/e/y/e/eyecatcher/no-image-available.png);border-radius:5px;}
    /*1行上でアイキャッチがない場合の画像や、画像に角丸を適用する設定をしています。*/
    
    /*関連記事リスト 横長設定*/
    .kanren-yoko .relate-entry{width:200px;}
    * html .kanren-yoko .relate-entry{width:210px;}/*ie6*/
    .kanren-yoko .relate-entry-title,.kanren-yoko .relate-entry-date{float:right;}
    .kanren-yoko .relate-entry-img{float:left;}
    
    valid-seo-3c-130-kanren-eyecatcher-9.gif
  3. 以上でデフォルト設定は完了です。

関連記事リスト表示例

  1. 上記のデフォルト設定では次のように表示されます。下図では、valid-seo-3c ver1.2.0 の記事部分(#content)横幅を660pxにしたものを使用しています。

    valid-seo-3c-130-kanren-eyecatcher-10.png
  2. 上の画像に補足説明を入れたのが下の画像です。画像内の番号と下のリスト番号が対応しています。

    1. 関連記事リスト内の各項目にカーソルを合わせると、背景色とアウトラインでホバー状態を示します。
    2. ホバー状態や現在の記事でない表示例です。背景色がハイライトや淡いグレーになっていないことから分かります。
    3. 同上。
    4. アイキャッチ画像がないので、その旨が画像で「No Image Available」と表示されています。また、アイキャッチ画像中央に赤丸で示した部分で、画像がリンク切れである旨が表示されています。リンク切れ表示はchromeでの例です。別のブラウザでは別の表示になります。
    5. 関連記事リスト内に、その記事自体が含まれているとタイトルの先頭に(今ここ)と表示されます。また背景色が淡いグレーになります。
    6. 関連記事リストを6件表示するように設定していますが、同一カテゴリに記事が5つしかないため、6つ目が表示されていません。
    7. 続きを読む関連記事の間に区切り線が表示されます。
    valid-seo-3c-130-kanren-eyecatcher-11.png
  3. 関連記事リスト各項目の縦長表示例は次のとおりです。

    valid-seo-3c-130-kanren-eyecatcher-14.png

カスタム具体例

サムネイル画像のファイル名をカスタム

  1. すでにアイキャッチ画像を各記事に設定している場合、それらのファイル名を entry-(数字)s.jpg という形式に変更するのは骨が折れます。

  2. たとえば、entry_img_(数字).jpgというファイル名なら、追加するコードのJavaScript部分を次のようにします。元画像のサイズにかかわらず、100x100で表示されます。

    <!-- ▼▼▼ jQueryなど読み込み 開始 ▼▼▼ -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    var img_name_first="entry_img_";//記事番号よりも前の部分
    var img_name_last= ".jpg";//記事番号よりも後の部分
    var eyecatch_from= "0";
    var no_eyecatch_entries="0";
    var css_link="<%css_link>";
    </script>
    <script type="text/javascript" src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/121017-eyecatcher.js"></script>
    <!-- ▲▲▲ jQueryなど読み込み 終了 ▲▲▲ -->

これからアイキャッチ画像を各記事に設定

  1. 記事番号500(blog-entry-500.html)まではアイキャッチ画像を設定していなかったが、記事番号501からアイキャッチ画像を設定する場合で述べます。

  2. デフォルト設定では、アイキャッチ画像がない場合でもアイキャッチ画像を表示しようとします。関連記事リスト表示例の4つめのサムネイルに「リンク切れ」が表示されていたのはこれが理由です。

  3. ない画像を探している間、ページの表示が少し遅れます。これを回避するために、特定の記事以降でアイキャッチ画像を探すように設定できます。これにより「リンク切れ」状態を解消できます。

  4. 記事番号501以降でアイキャッチ画像を表示する場合、追加するコードのJavaScript部分を次のようにします。

    <!-- ▼▼▼ jQueryなど読み込み 開始 ▼▼▼ -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    var img_name_first="entry-";
    var img_name_last= "s.jpg";
    var eyecatch_from= "501";
    var no_eyecatch_entries="0";
    var css_link="<%css_link>";
    </script>
    <script type="text/javascript" src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/121017-eyecatcher.js"></script>
    <!-- ▲▲▲ jQueryなど読み込み 終了 ▲▲▲ -->

アイキャッチ画像がない記事がたまにある場合

  1. 上記例を再度使います。記事番号501以降はアイキャッチ画像を設定していたが、550と600と650でアイキャッチ画像を入れなかったとします。550と600と650が関連記事リストに表示される場合、表示が少し遅れます。

  2. 550と600と650はアイキャッチ画像を探さない設定にする場合、JavaScript部分を次のように編集します。なお、アイキャッチ画像を探さない記事番号はカンマで区切って追加できます。

    <!-- ▼▼▼ jQueryなど読み込み 開始 ▼▼▼ -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    var img_name_first="entry-";
    var img_name_last= "s.jpg";
    var eyecatch_from= "501";
    var no_eyecatch_entries="550,600,650";
    var css_link="<%css_link>";
    </script>
    <script type="text/javascript" src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/121017-eyecatcher.js"></script>
    <!-- ▲▲▲ jQueryなど読み込み 終了 ▲▲▲ -->

テンプレート編集時にプレビューしてもアイキャッチを表示

  1. デフォルト設定では、テンプレートの設定でテンプレート編集時にプレビューした場合、アイキャッチ画像が表示されません。

  2. プレビューでも表示されるようにするには、JavaScript部分をたとえば次のように編集します。変更後の文字列は、各ブログによって異なります。

    <!-- ▼▼▼ jQueryなど読み込み 開始 ▼▼▼ -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    var img_name_first="entry-";
    var img_name_last= "s.jpg";
    var eyecatch_from= "0";
    var no_eyecatch_entries="0";
    var css_link="http://blog-imgs-49-origin.fc2.com/e/y/e/eyecatcher/css/sample.css";
    </script>
    <script type="text/javascript" src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/121017-eyecatcher.js"></script>
    <!-- ▲▲▲ jQueryなど読み込み 終了 ▲▲▲ -->
    
  3. valid-seo-3c-130-kanren-eyecatcher-13.png

今後の改訂では

  1. 何らかの改良をした場合、上記説明やキャプチャー画像と異なる部分があると思います。ご了承願います。

以上です。

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