ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress リンク表示をはてなのブログカードと同じにする

      2015/03/06

WordPress リンク表示をはてなのブログカードと同じにする

2014年の9月にはてなブログで発表されたこちらの記事。

はてなブログでは、先日公開した「ブログカード」を拡張し、インターネットの一般的なWebサイトに対応しました。URLを貼るだけで、さまざまなWebページをコンパクトな「ブログカード」形式で紹介することができます。

見た目が良い感じだなと思ったのでさっそく導入してみます。ちなみにdmgadget(ディーエムガジェット)で前にWordPressのプラグイン「Browser Shots」を使ったリンクをスクリーンショットと共に載せる方法はこちら、

Google Chromeの拡張機能である「Create link」を使ってリンクを作成していたのですが、今回、はてなのブログカードを作る際にもこの「Create link」を使って簡単にリンクを作成したいと思います。「Create link」の導入がまだの方は上記のリンクより文章に沿って導入してみてください。

スポンサーリンク

Google Chromeの拡張機能の「Create link」とWordPressのプラグイン「Browser Shots」を使ったリンク表示はこちら、

同じくGoogle Chromeの拡張機能の「Create link」を使ってはてな風ブログカードのリンク表示はこちら、

WordPressのプラグイン「Browser Shots」を使ったリンク表示はRSSなどではURL表示になってたりと色々困ってたので少し改善出来そうです。

Create Linkの設定

Create Linkの設定に移ります。Google Chromeの右上の「Create Link」のリンクをクリック

WordPress リンク表示をはてなのブログカードと同じにする

そしてメニュー一番下の「Configure」クリック

WordPress リンクをはてなのブログカードと同じ表示にする

Chrome右上の「Create Link」ボタンを押して一番下の「Configure」を押す。するとCreate Linkのページがブラウザ上に表示されます。

WordPress リンク表示をはてなのブログカードと同じにする

Create Linkのページ上、左下の「+」をクリックしてください。そして、前回行った「Capture」が表示されていますが、その下にはてなブログカード用の「Hatena Capture」を追加します。左の「Name」に「Hatena Capture」 と書いて右の「Fotmat」には下記のコードをコピペします。

スポンサーリンク

使い方は簡単です。リンクとして表示したいページを開いて、先程の「Create Link」のメニューを開きます。

WWordPress リンク表示をはてなのブログカードと同じにする

そして先程作った「Hatena Capture」をクッリックするだけです。作成中のブログに戻ってペースとすれば完成です。

めちゃくちゃ便利です。ただこのはてなのブログカードを使った表示方法は「リファラ」がはてなになってしまいますので注意が必要です。Browser shotと組み合わせて使うのも良いかもしれません。

HTTPリファラ(英: HTTP referer)あるいは単にリファラは、HTTPヘッダの1つで、インターネット上の1つのウェブページまたはリソースから見て、それにリンクしているウェブページやリソースのアドレス[1]を指す。リファラを参照することで、どこからそのページに要求が来たのかを知ることができる。リファラをログすることでウェブサイトやウェブサーバで訪問者がどこから来ているかを把握でき、プロモーションやセキュリティの目的に使うことができる。

読んで頂いてありがとうございました。

追記1

mbdbさんのページで書かれていた、

リファラーを見ていて気づいたんですが、ブログカードでリンクを挿入すると、参照先がhttp://hatenablog.com/となり、リンク先ブログのアクセス解析からは自分が発リンクしたことが伝わりません。
WordPressのピンバックはもちろん、Google Analyticsのトラックバックからもログを参照できないので、「それは嫌だなぁ」という人は普通にリンクを挿入したほうが良いと思います。

との事です。今までのBrowser Shotもまだ必要ですね。あとここのブログだとブログカードの下に隙間が出来てしまいます。色々解決策を探している段階ですが、原因がわかりません。どなたか詳しい方がいらっしゃいましたらこっそり教えて欲しいです、、、

追記2

ブログカードの下に隙間が出来てしまう問題ですが、どうやらfunction.phpに記載してあるiframeのレスポンシブ対応設定が問題で隙間が出来てしまっていたました。

スポンサーリンク

 - WORDPRESS

Message

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

CAPTCHA


  関連記事

WordPressにAmazonアソシエイトのプラグイン「AmazonJS」を導入
WordPress[AmazonJS] Amazonアソシエイトのプラグインを導入
WordPress[Stinger3] LINEで送るボタンを設置
WordPress[Stinger3] LINEで送るボタンを設置
WordPress[Stinger3]サイドバーに人気記事を表示させる方法
WordPress[Stinger3] サイドバーに人気記事を表示させる方法
WordPress[Better Delete Revision] 過去の不要なリビジョンを削除する方法
WordPress[Better Delete Revision] 過去の不要なリビジョンを削除する方法
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
wordpress人気テーマSTINGER3の広告を2つ並べるカスタマイズ
WordPress[Stinger3] 広告を2つ並べるカスタマイズ
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ