コメント欄に投稿者の画像を表示

元記事は「ファンブログの人のコメントにサムネを表示させるスクリプト」なんですが、
コメント欄に書いた人を識別できる、サムネイル画像を表示するスクリプトです。
見た目は下のようになります。誰が書いたのか、ひと目でわかります。

スポンサーリンク


2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

こんにちは。いつも人の記事をかっぱらってアクセス稼いでいるTomです。

今回もおーとえす氏の記事パクりました。
元記事は「ファンブログの人のコメントにサムネを表示させるスクリプト」です。

詳しいことは、そちらを見ていただくとして何ができるのかと言うと
コメント欄をこんな風に出来ます。

これは、このブログの実際のコメント欄をキャプチャーした画像です。
コメント欄


これはおーとえす氏の公開しているものとは少し違うんですが、わたしが独自に手を加えました。

この画像ではコメントの左に発言者を識別するサムネイル画像が出ますが、元になった
おーとえす氏のソースでは、コメント後の名前の前に出ます。

元のスクリプトではURLがない、またはファンブログ以外のURLの時は、画像が出ませんが
私の場合は、no imageが出ます。

見た目の違いはそのふたつです。

技術的な違いはおーとえす氏はライブラリにjQueryを使っていますが、
わたしはライブラリを使わずに書き直しました。

詳細は「ファンブログの人のコメントにサムネを表示させるスクリプト」を見てください。
改変したコメント欄、作成の様子はここのコメント欄にあります。

ソースコードの場所
サムネイル表示のソース
サムネイル表示モジュール(初心者向け。機能は同じです。わずかですが上より重い)

関連コンテンツ

スポンサーリンク

「コメント欄に投稿者の画像を表示」への33件のフィードバック

  1. 凄いです!
    TOMさんのソースをコピペさせていただき、
    1記事に追加したら出来ました\(^o^)/
    ますます ブログが楽しくなります。
    ありがとうございました。
    でも 実はどこに入れていいか迷いました・・(^_^;)

    近いうちに TOMさんとはおーとえすさんを紹介させていただきますね

  2. こんばんは~。

    かこさんトコもここも、コメントたくさんあるから、
    自分がしたコメント、さかのぼって探すの大変でしたが、
    分かり易くなりましたね~。

  3. おーとえすさん、ありがとうございます♪
    発想がいいんですよー。思いもつかなかった。

    みかんさんも、ちゃんとできてますね~。
    お仲間ですね。今回は、Tomさん呼び出さずにできちゃいましたね!

    心姫さんも、そうか。自分を探しやすくなりますね。たしかに。
    自分の顔写真とかにしてなくってよかった。
    と、あれだけ並ぶと思います。

  4. 今回は色々ありがとうございました。

    ネタ元云々、ってのはそこまで気にせずに、jQueryを使わずに書いたjava scriptのコードとかはこの記事とか、新たに記事書いて紹介しても良いですよ。
    自分の記事へのリンクも気が向いたら貼る、くらいでも大丈夫ですw

  5. こんにちわ

    画像はでましたが

    どうも失敗!??

    画像に「リンクされていません。

    お暇な時でのいいので 遊びに来てください・・m(__)m

  6. ねぇ。みかんさん。かなさんはコピペでうまくいってるんだから
    また、どっか勝手に書き換えてない?抜かしたり。

    ソースもう一回貼りなおしてみたら?

  7. みかんさん。ゴメン。
    おーとえすのところに貼ったやつは、画像にリンクをつけていませんでした。
    かこに送る前に気づいて、直したんです。
    だから、かこのところのソースをコピーした人はリンクできています。

    http://fanblogs.jp/ayzfqir5/archive/388/0

    ここに、完全版を書いたので、貼り替えてください。
    スタイルシートも忘れずに。

  8. noriさん。
    今、かこのとこ開いて、見比べてみたんですけど、画像の大きさですかね。

    それとも、コメント欄のもともとのレイアウトが違うからそのせいかな?

  9. あげは、りょうちゃん、それからマミコロさんもつけてくれてた。
    大ヒットだな。

  10. そうだねー。大ヒット。寝る前にあげられてよかった。

    ちょいコツにしなくても、サムネイル表示のソース
    http://fanblogs.jp/ayzfqir5/archive/388/0
    はかなり分かりやすいと思ったけど。貼る場所以外。
    ちょいコツするのやめようかと思ったくらい。

    わざと場所の説明抜かした?

  11. すごくいいわ。みんながいつもそばにいてくれてる感じで。
    進めてもらってよかった。ありがとう。
    トムちゃん。かこちゃん。おーとえすくん。

  12. ごめん遅くなった。
    理解してからだと、5分以内に出来た。
    最初は、絶対無理だと思ってたけど、わかろうと思って読んだら
    簡単にできました。

    でも、コピーの、やりかた知らない人には、ちんぷんかんだと思うよ。

  13. ありゃここもだ
    かこんちもここもiPhoneで見たら
    コメントの字が大きい人や小さい人さまざまだったけど
    いまパソコンで見たら同じ・・・???

  14. >でも、コピーの、やりかた知らない人には、ちんぷんかんだと思うよ。

    このコメントに関しては、かこが回答します。

  15. はいっ。かこです。

    >でも、コピーの、やりかた知らない人には、ちんぷんかんだと思うよ。

    コピーのやり方を知らない人は
    残念だけど、スタイルシートやテンプレート、いじらないほうがいいです。
    危険だから。

    カスタマイズせずに、記事を書いて楽しみましょう。
    ちょいコツって言っても、すべての人が使えるわけじゃないんだよ~。

    で、サイドバーに貼るモジュールを使った方が、安全です。
    こっちの方が、カンタン。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください