モッピー!お金がたまるポイントサイト

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

2018/09/22

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

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

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

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

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

[adsense]

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」には下記のコードをコピペします。

[adsense]

<iframe style="width:100%;height:155px;max-width:100%;margin:0 0 1.7rem;display:block;" title="%title%" src="//hatenablog.com/embed?url=%url%" width="300" height="150" frameborder="0" scrolling="no"></iframe>

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

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

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

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

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

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

追記1

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

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

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

追記2

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

[adsense]

この記事を書いた人

ディーエムガジェット 

非IT系エンジニア。日々の出来事や自分の好きな物などの紹介をメインに色々発信していきます。2012 年から禁煙を開始して68キロぐらいだった体重が2012年6月には75キロまで増加。ヤバい!と感じてダイエットを開始。一回65キロまで落としましたが、2018年8月現在また72キロまで増加。こんな身体でもトライアスロンに出場予定「プロフィールはこちら

このエントリーをはてなブックマークに追加

WORDPRESS

Posted by dmgadget