コメントに投稿者のサムネイル画像表示、fc2プロフ連携で自動表示可能

更新
2013年03月23日(土)

コメント投稿者のサムネイル画像をコメント欄に表示する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. コメント投稿者の画像を表示できます。

  2. コメント投稿者が次の条件を満たすと、コメント投稿者の画像が自動表示されます。

    • コメント投稿者がコメント投稿時のURL欄に、自身のfc2blogのURLを入力
    • コメント投稿者がfc2プロフを利用し、オリジナル画像を設定
    • fc2blogIDとfc2プロフIDが同一
  3. fc2blogIDとfc2プロフIDが同一であれば、異なるfc2ID間でも自動表示可能です。要は、URLに含まれるIDが同じならOKということです。JavaScriptでID部分が同一のプロフ画像を読み込む設定にしているので。

    130323cm-img-1.png
  4. 上記条件を満たしていても、blog管理者は自動表示に優先して別の画像を設定できます

  5. 表示される画像は120x120です。fc2プロフで設定できる画像サイズの最大値(2013年3月14日現在)にしました。ちなみに、左の画像は作者が現在fc2プロフで設定している画像です。

    customtemplateのプロフィール
  6. fc2ブログ(blog)とfc2プロフ(profile)は字面が似ているので、見間違いに注意しましょう。

メリット・デメリット

  1. 誰によるコメントかが分かりやすくなります。

  2. ブログ管理者の手間を減らせます。コメント投稿者がfc2プロフの画像を変更すれば、コメント欄の画像も自動で変更されます。

  3. このページで述べる設定をする前の過去のコメントでも、上記条件が満たされていれば自動表示されます。

  4. プロフ画像の設定で画像を変更しても、画像URLは変更されません。たとえば、作者のプロフ画像はいくら差し替えても次のURLです。今後のfc2さんの仕様変更でどうなるかわかりませんが。

    http://pr.fc2.com/c/u/s/customtemplate/profiles.jpg
  5. コメント投稿者の画像が不適切な場合に管理者権限で変更できます。真面目なテーマのブログを運営している場合でも安心です。

  6. コメント投稿者の自己申告による「名前」と「URL」で判定します。第三者による他人の名前やURLの入力を防げません。

  7. IE7以下は非対応です。IE6でコメント部分のレイアウト崩れを確認しています。

テンプレートのHTMLを編集

外部CSSファイル読み込み設定

  1. 次のコードを探します。

    <link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
  2. 上記コードの下に次のコードを追加します。eyecatcherシリーズでは既に記載されていますので、追加する必要はありません。

    <!--permanent_area--><link rel="stylesheet" type="text/css" href="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/130314cm-img-min.css" media="all" />
    <!--/permanent_area-->

bodyにクラスcm-img付加

  1. body にクラス cm-img を付加し、クラス fukidashi を削除します。

外部JSファイル読み込みと優先設定

  1. 次のコードを探します。

    <div id="commented">
  2. 上記コードの上に次のコードを追加します。eyecatcherシリーズでは既に記載されていますので、追加する必要はありません。

    <!-- ▼▼▼ コメント投稿者画像の表示設定 開始 ▼▼▼ -->
    <script type="text/javascript" src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/130314cm-img-min.js"></script>
    <script type="text/javascript">
    var cm_name={
    customtemplate:'http://pr.fc2.com/c/u/s/customtemplate/profile.jpg',
    冥王星:'http://blog-imgs-44.fc2.com/c/u/s/customtemplate/pluto.jpg',
    }
    </script>
    <!-- カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-107.html -->
    <!-- ▲▲▲ コメント投稿者画像の表示設定 開始 ▲▲▲ -->
  3. 上記コードで反転している部分でコメント投稿者の「名前」を指定し、その右のコーテーションのペア内に表示したい画像を設定します。この設定はfc2プロフ連携による自動表示よりも優先されます。

  4. 反転している部分がある行は任意に変更できます。例として記載しているだけです。また、行を増やせば優先設定を増やせます。

画像表示用コードに変更

  1. 既に投稿されたコメントを表示するスペース」 の開始から終了までを次のコードに入れ替えます。eyecatcherシリーズでは既に下記コードが記載されていますので、入れ替える必要はありません。

    <dl id="comment<%comment_no>" class="comments round cm-<%comment_name>">
    <dt class="comment-title" id="comment<%comment_no>-title"><%comment_title></dt>
    <dd class="comment-body"><%comment_body></dd>
    <dd class="comment-footer">
    <ul>
    <li class="comment-no">
    <span class="comment-no-in-blog" title="<%blog_name>全体でのコメント番号">[<%comment_no>]</span></li>
    <li><%comment_year>年<%comment_month>月<%comment_day>日(<%comment_wayoubi>) <%comment_hour>:<%comment_minute><span class="some-time-ago"> <script type="text/javascript">newe(<%comment_year>,<%comment_month>,<%comment_day>,<%comment_hour>,<%comment_minute>);</script></span></li>
    <li class="comment-name">
    <script type="text/javascript">
    <!--
    var u='<%comment_url>';var n='<%comment_name>';
    if(u!=''){n='<a href="<%comment_url>" target="_blank"><%comment_name></a>';}
    document.write(n);
    //-->
    </script>
    <noscript><%comment_url+name> </noscript>
    </li>
    <li id="comment-mail<%comment_no>" style="display:none;"><a id="comment-mail-a<%comment_no>" name="comment-mail-a<%comment_no>">Mail</a></li>
    <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>" rel="nofollow" class="small"><%template_edit></a></li><!--/comment_edit-->
    </ul>
    <script type="text/javascript">
    var mail="<%comment_mail>";
    if(mail!=""){
    document.getElementById("comment-mail<%comment_no>").style.display="inline";
    document.getElementById("comment-mail-a<%comment_no>").setAttribute("href", "mailto:<%comment_mail>")}
    </script></dd>
    <dd class="comment-img">
    <script type="text/javascript"><!--
    cm_img(<%comment_no>,u,'<%comment_name>');
    //-->
    </script>
    </dd>
    </dl>
  2.  更新 すれば完了です。

サムネイル有無の切替

  1. body のクラス cm-img を削除し、クラス fukidashi を付加すればデフォルトの表示に戻ります。

  2. 上述の追加したコードを削除する必要はありません。

デモページ

  1. 優先設定をしていない場合(質問受付跡地)。今後、冥王星さんがfc2プロフで画像をアップロードすると、下の参考画像とは異なる画像が表示されます。

    130314cm-img-1.png
  2. 冥王星さんのコメントに優先設定をしている場合(customtemplateの説明ページ)。

    130314cm-img-2.png
  3. このページのコメント欄でもサムネイル表示を確認できます。

今後のテンプレート改訂時には

  1. 上記説明やキャプチャー画像と相違があるかもしれません。ご了承願います。

以上です。

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

コメント

サムネイル表示例
テンプレート作者によるテスト投稿です。
次の条件を満たす投稿ならサムネイルが自動表示されます。

・URL欄に自分のfc2blogのURLを入力
・fc2プロフでオリジナル画像を設定
・fc2blogとfc2プロフのIDが同一
Re: サムネイル表示例
URLの入力がなくても、名前をもとにサムネイル表示可能です。
詳細は記事本文で確認できます。

コメントの投稿

非公開コメント

(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)