リンクをカード形式で表示するプラグイン「HatenaBlogCard」を修正しました。（記事投稿時ver0.27、修正版ver0.27.1）
[2015/08/09 追記]設定画面も備えた新プラグイン「Pz-HatenaBlogCard」を「公式プラグインディレクトリ」にて公開しました。
WordPressでもカード形式で表示したい
はてなブログだと「はてな記法」というのがあって、角括弧でURLを囲むと「はてなブログカード」という形式で表示させる機能があります。
同じような表示ができないかと色々探したところ、ブックマークレットを使うのが一番使いやすかったものの、
- 「ページを開く→ブックマークレットを開く→HTMLをコピーする→記事内にテキスト貼り付けする」というのが地味に手間がかかる。
- 何かいいプラグインが見つかったときに、過去記事のリンクを直すのは無理。（置き換えできない）
こんな感じのデメリットがあったので、WordPressプラグインタイプのものが欲しいと思いました。
何だかんだ探した結果、はてなブログカードははてなブログ以外でもiframeで表示が可能なようなので、それを使うプラグインを自分で作ることにしました。
という記事こちら。
プラグインのダウンロードと登録
↓敢えて旧バージョンを利用される方のために、「popo-HatenaBlogCards ver 0.27.1」のリンクも残しておきます。
下記リンクから「popo-HatenaBlogcards.zip」をダウンロードして、WordPress管理画面のプラグインから追加して、有効化してください。
↓ZIPファイルダウンロード
サイトからのダウンロードは終了しました。プラグインディレクトリからのインストールをお願いします。
ダウンロードzipファイルから直接プラグイン登録する方法は、こちらの記事を参考にしてみてください。
修正点した内容について
内部リンクのサムネイル取得を修正しました
内部リンクの場合、サムネイルをget_the_post_thumbnail関数で取得しますが、カスタム画像サイズ「thumb100」を指定していたため、STINGER5以外のテーマを使用している場合に大きいサイズのままの画像を取得してしまいそうだったので、「thumbnail」に修正しました。
また、サムネイルのスタイルに「max-height:100;」と「max-width:100px;」を追加してみました。
外部リンクの挙動を修正しました
外部リンクは「はてなブログカード」をそのまま表示していますが、「title」パラメータを指定した場合には、オリジナル形式で表示して、「title」と「content」パラメータの内容を表示するように修正しました。
なお、このときサムネイルは表示されません。（表示するためのヒントは次項にて。）
[blogcard url="https://popozure.info/20150301/6867" title="ニトリのモチモチクッションの『モチモチ加減』がぱない！Σ(ﾟロﾟ)oﾞ" content="触った瞬間に、「あら、やだ、モチモチ！」。そんな、モチモチ体験してみませんか。"]
「はてなブログカード」の場合、リンク先が切れているとカードそのものが表示されなくなってしまいます。
記事が古くなってくると、リンク切れが起きたり、リンク先の内容が変わってきたりする場合があるので、自分が紹介したい時点のタイトルと紹介文（記事抜粋文）を表示させたい場合に良いと思います。
スタイルシートなどの微調整を行利ました
前回記事に「700px表示で、センタリングできませんか」というコメントがありました。
幅を修正するために直さないといけない行が複数あったため、少し整理しました。
外部リンクは「はてなブログカード」をそのまま表示させているため、センタリング表示などに対応できず、<div>～</div>を追加してみました。（活用するためには今のところ、使う方がソースを直す必要があります）
自分で直してみたい人へ
設定メニューを作りたいとは思っているものの、今ひとつ腰が重くて手を付けていません(^-^;
ファイル構成は前回（ver0.25）から変わっています。具体的には、定義の部分とプラグイン本体のファイルを分けました。（今後メニュー部分を作るときとかにもファイルが分かれていた方がメンテしやすいと思いまして…）
- readme.txt … 使い方などがざっくり書いてあります。
- plugins.php … WordPressプラグインとして登録する定義など。
- functions.php … プラグイン本体です。動きを直したい場合、このファイルを修正してください。
- style.css … スタイルシートです。見た目を直したい場合、このファイルを修正してください。
外部リンクをオリジナル形式で表示させるときに、サムネイルを表示させる。
titleパラメータを指定すると、外部リンクでもオリジナル形式で表示されますが、このときサムネイルは表示されません。
サムネイルを取得するWebサービスを利用することで、外部サイトでもサムネイルが取得できるようになります。
コードとしては書いてあるので、「//」を外すことで、サムネイルの取得ができるようになります。
// タイトル指定がある場合には、オリジナル形式 // $thumbnail='<img src="http://capture.heartrails.com/100x100?'.$url.'" class="linkcard-thumbnail-image" style="width:100px;height:100px;border:1px solid #444;" />'; // heartrails.com // $thumbnail='<img src="http://s.wordpress.com/mshots/v1/'.$url.'?w=100" class="linkcard-thumbnail-image" style="width:100px;height:100px;border:1px solid #444;" />'; // wordpress
「HeartRails Capture」でサムネイルを取得する場合、
// タイトル指定がある場合には、オリジナル形式 $thumbnail='<img src="http://capture.heartrails.com/100x100?'.$url.'" class="linkcard-thumbnail-image" style="width:100px;height:100px;border:1px solid #444;" />'; // heartrails.com // $thumbnail='<img src="http://s.wordpress.com/mshots/v1/'.$url.'?w=100" class="linkcard-thumbnail-image" style="width:100px;height:100px;border:1px solid #444;" />'; // wordpress
横幅を変更する
最少幅は指定していないので、表示される幅に合わせて小さくなるので、レスポンシブ対応のテーマなどで使ってもちゃんと表示されると思います。
通常は500px程度の大きさで表示されるように最大幅を指定しています。
記事の領域に合わせて、いくらでも大きくしたいという場合には、max-widthを取ります。
オリジナル形式（内部リンク）の幅を最大幅で表示する。
.linkcard-wrapper {
border: 1px solid #ddd;
border-radius: 4px;
margin: 12px 0;
/* margin: 12px auto; */
max-width: 470px;
padding: 12px;
}
「max-width: 470px;」の行を削除するか、「/*」～「*/」で囲んでコメントにします。
（700px程度の幅にしたい場合、「max-width: 670px;」にします。）
/* max-width: 470px; */
はてなブログカード形式（外部リンク）幅を最大幅で表示する。
.hatena-webcard-wrapper {
max-width: 500px;
margin: 0;
/* margin: 0 auto; */
}
「max-width: 500px;」の行を削除するか、「/*」～「*/」で囲んでコメントにします。
（700px程度の幅にしたい場合、「max-width: 700px;」にします。）
/* max-width: 500px; */
センタリング（中央寄せ）で表示させる
左右のマージンを「auto」（自動）指定にします。
style.cssに記載してあるので、コメントを外すだけでも良いです。
内部リンク→5行目の「/*」と「*/」を消す。（4行目を「/*」～「*/」で囲むとなお良い）
.linkcard-wrapper {
border: 1px solid #ddd;
border-radius: 4px;
/* margin: 12px 0; */
margin: 12px auto;
max-width: 470px;
padding: 12px;
}
外部リンク→72行目の「//」を消す。（71行目を「/*」～「*/」で囲むとなお良い）
.hatena-webcard-wrapper {
max-width: 500px;
/* margin: 0; */
margin: 0 auto;
}
サムネイル画像を左側にする
「みんなサムネイル画像が右側でつまらない！Σ(ﾟロﾟ)oﾞ」という方向けに。（ただし、オリジナル形式にしか適用されません。）
「linkcard-thumbnail」クラスのfloatを「right」→「left」に変更します。
ついでにpaddingで隙間を作っておくと見やすいと思います。
.linkcard-thumbnail {
max-height: 100px;
max-width: 100px;
float: right;
margin: 0;
}
↓
.linkcard-thumbnail {
max-height: 100px;
max-width: 100px;
float: left;
padding: 0 5px 0 0;
margin: 0;
}
雑記など
外部リンクもオリジナル形式に差し替えたいとは思うのですが、タイトルと抜粋文をキャッシュして、ある程度のタイミングで更新するのを考えると、
「『はてなブログカード』でいいじゃないΣ(ﾟロﾟ)oﾞ」
と思ってしまっています。
設定メニューも作りたいとは思うのですが…
「プログラム直接直せばいいじゃないΣ(ﾟロﾟ)oﾞ」
と思ってしまって…いや、メニュー画面作ったことが無いからとっかかりがよく分かってないだけなんですが…！Σ(ﾟロﾟ)oﾞ
コメント
はじめまして、弁保社長と申します。
以前から、はてなブログを読むたびに、「この内部リンクのデザインいいなー、WPでもこれが実装できればなあ。。」と思っていたので、とても感動しました！
早速使わせて頂きましたが、まさに理想通りで、高さや画像の位置などもCSSで簡単にカスタマイズが出来たので、非常に助かりました＾＾
欲を言えば、はてブ数だけでなく、いいね数も取得できるようにして頂けると言うことなしです。（欲張ってしまいすみません^^;）
ご検討のほどよろしくお願いいたしますm(__)m
弁保社長さん、使っていただいたようでありがとうございます。
こちらのプラグインは外部リンクを「はてなブログカード」を表示する機能をそのまま使っているので、基本的にはてブのカードそのままなのです。
オリジナル形式で表示させるタイプのものも近々公開できると思うので、そちらはその手のカスタマイズもできるかもしれません。（いいねボタン…勉強しておきます！）
ぽぽろんさん
「Pz-HatenaBlogCard」の公開ありがとうございます！
早速使ってみました。
1サイト目は問題なく使えたのですが、賢威のテンプレートを使っているサイトで使ってみると
http://www.fastpic.jp/viewer.php?file=1072621383.jpg
この様に右側と下部分がフレームアウトしてしまいました。
CSSでサムネイル自体の縦幅をいじってみましたが、この現象は変わらずでした。
ちなみに、スマホで見ると（レスポンシブです）、問題なくサムネイルが全て表示されています。
何か思い当たる原因はありますでしょうか？
お手数ですが、ご確認のほどよろしくお願いいたします。
弁保社長さん、さっそく使っていただいてありがとうございます。
やはり色々なテンプレートなどで試していただけると見えてくることがあってありがたいです。
有償のテンプレートのようなので、こちらでは再現が難しいですね(^-^;
さて、サムネイルを表示させる部分は、サムネイル画像そのものに「linkcard-thumbnail-image」という名前を付けて、その周りを「linkcard-thumbnail」という名前の箱で囲っています。
そして、外側の箱は「max-width: 100px;」と「min-width: 100px;」が指定されています。
サムネイル画像には特にサイズを指定していないものの、外側の箱に自然と収まって「100px × 100px」で表示される想定でした。
どうやら、サムネイル画像に使われている「150px × 150px」の大きさで表示されてしまい、右側50pxと下側50pxがはみ出している気がします。
可能であれば、「pz-hatenablogcard-style.tmp」というファイルの73～77行目の「.linkcard-thumbnail-image { ～ }」の間に、「max-width: 100px;」と「max-height: 100px;」の行を追加してから、設定画面で「変更を保存」ボタンを押してみてはいただけないでしょうか。
こちらでもできるだけ試してみようと思います。
「サムネイルの位置」が、「右側」と設定すると左側へ、「左側」と設定すると右側へ表示されてしまう不具合がありましたので、修正しました。
これによって、「今まで『カードの左側』と設定して右側に表示させていた」場合、左側へ表示されるようになります。
get_the_post_thumbnailの取得結果によって、サムネイルがはみ出してしまう不具合を暫定対応しました。
ダウンロードはこちらからどうぞ。
もしも今回の修正で改善されなかった場合、WordPress管理画面の「設定」→「メディア」で、メディア設定のサムネイルのサイズのパラメータを教えていただくことはできますでしょうか。
当方は、「サムネイルのサイズ：幅150×高さ150」「サムネイルを実寸法にトリミングする」にチェックが入っています。
すごく助かっちゃいました！
記事にてこちらの記事を紹介させていただきました。
事後連絡すみません＞＜
ruruさん、紹介&コメントありがとうございます。
不具合などあれば、なるべく対応していきたいと思います。
設定画面もつけられそうなので、公開時には試していただけると幸いです。
ぽぽろんさん
お世話になってります。
今回も迅速な対応ありがとうございました。
これで私の希望通りのブログカードとなりました。
元々は検索してぽぽろんさんのサイトにたどり着きましたが、
今後はこのサイトと読者として楽しみにさせて頂きます。
ありがとうございました。
フジタタロウさん、返信コメントありがとうございます。
少しでも希望に沿うことができて良かったです(^-^)o
ほとんど『自分のメモ』として、不定期・好き勝手に書いていることが多いので、困ったときだけ見にきていただいても大丈夫ですよ♪
では、またどうぞ(^-^)o
ぽぽろんさん
ご対応いただきましてありがとうございました。
新しいプラグインを試してみました。
max-widthを取って最大幅で表示していますが、
自サイトリンクのスマホ表示の時に
抜粋文章と自サイトのリンク（ファビコン付きのリンク）が
重なってしまっています。
幅が広い時は大丈夫なのですが、、、
ご迷惑ばかりお掛けしていますが、
ご検討いただければ幸いです。
今後ともよろしくお願いいたします。
フジタタロウさん、さっそくの確認ありがとうございます。
こちらでも抜粋文が領域からはみ出して表示されてしまう不具合を確認できましたので、修正しました。
「.linkcard-content{ ～ }」のところに「overflow: hidden;」を追加しました。
なお、記事中のリンクは最新版に差し替え済みです(^-^)o