ブログやサイトで記事内にリンク先のプレビューを表示する方法!あれブログカードっていうんだね。。

どうもどうもどうも

備忘録的にブログをはじめてみたのですが
早くもネタ切れ気味の@ちゃっぺです

他の人のブログを参考にみてたんですが
みんな記事内にリンク先のプレビューが以下みたいに
きれいに表示されてて「どうやってんだ?」と色々調べてました。

スポンサーリンク

どうやってるんだろ。。。

いままでは(というかまだほとんど記事ありませんが。。)以下のような感じで過去記事とかもふつうにタイトル書いてリンク張ってました。

dマガジンで雑誌読むタブレットならiPad Airが最高!

でも他の人のサイトは以下みたいになっています。

ぐぐってみた

ブログ、記事、プレビュー表示とかでググってみたところ以下のようなのがみつかった。

ThumSniper(プラグイン)

記事をマウスオーバーすると、リンク先のサムネイルを表示してくれるプラグイン。リンクにはすべてプレビューがつく。ちょっとイメージと違うなぁ。アニメーション的なのはあんまり。でもこれはこれですごい!

linkactions

上のプラグインだとすべてのリンクがにプレビューのサムネイルがつくらしいんですが、class=”previewlinkを準備してプレビュー表示したいリンクだけを指定してプレビュー表示にできる。ただ表示方法は↑と同じ感じなんでイメージとは違いました。

Brouser Shots

これはけっこうよさそう!でも他のサイトでみたやつとちょっとちがうんですよね~

スポンサーリンク

見つけた!ブログカードっていうんだ(へぇ)

記事のタイトルのような検索キーワードで探してたんですが
なかなかみつかりませんでした。やっと見つけました。

↓参考にした記事
 これは「はてなブログのブログカード」らしい!
しかもGoogleChromeの拡張機能を使うと簡単につくれるんだって!
へぇ!
へぇ!
・・・
95へぇ!!
サイトのソースみたらリンクに「hatena…」となってたんで検索したらひっかかりました。(最初からそうしろってねw)

実装した方法

以下の記事を参考にしました!

ChromeにCreateLinkというアドイン(?)をインストールすると簡単にコピペでリンクがつくれます!!すごっ!なんかこのリンクだけでブログが充実してきた感が!!

↑プラグインつくっちゃったという強物も。。

プラグイン増やすのが嫌だったんで使わなかったですが、Create

Linkも面倒なひとはこちらもよいかもしれません!

注意点

リンク先のURLをみるとわかると思うのですが、はてなブログを経由しています。
 mbdbさんは以下のように書いてます。たしかに( ; ゚Д゚)

リファラーを見ていて気づいたんですが、ブログカードでリンクを挿入すると、参照先がhttp://hatenablog.com/となり、リンク先ブログのアクセス解析からは自分が発リンクしたことが伝わりません。

WordPressのピンバックはもちろん、Google Analyticsのトラックバックからもログを参照できないので、「それは嫌だなぁ」という人は普通にリンクを挿入したほうが良いと思います。

あっ。まだbotと自分しかアクセスしてないですからあんま関係ないか( ´ー`)

そういうのピンバックっていうらしんだけど、改善した版を作った人も!みんなすごいなぁ。気になる人はこちらをどうぞ

まとめ

長くなっちゃいましたが見てくださった方、ありがとうございます。同じような記事いっぱいあるんで参考にならなかったかもしれませんが、自分の場合はブログカードという言葉が思いつかなかった(しらなかったので)この方法にたどりつくのに苦労しました。そういう感じで初心者の方の通り道になってくれればうれしいです!ブログカード感動してこの記事ではめっちゃ使いました笑

最後まで読んでいただいてありがとうございます!

だんだん( ´∀` )b

この記事が気に入ったら
いいYo!しよう

著者にYoが届いて喜びます(/▽゚\)

→「いいYo!」ってなあに?

Twitterでちゃっぺをフォローしよう!

スポンサーリンク
ad_pc1
ad_pc1

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>