Pz-LinkCardのインストールとサムネイルサイズの変更,

はじめに

最近ayijkさんのページを見ていると, ブログやQiita等のサイトがキレイにブログカードとして表示されていることに気が付きました.

↓ こんな感じのやつです.

それでも世界はループ！ | and yet it loops.

ayijk.com

このサイトではこれまでただのリンクとして表示していただけでしたので, この機会にこのブログカードを表示できるようにしてみました.

Pz-LinkCardのインストール

Pz-LinkCardとはぽぽずれさんが公開されている, リンクをカード上に表示してくれるworpdpressプラグインです.

インストール時点ですでに見た目のテンプレートが数種類用意されていますが, 今回は以下のサイトを参考にしてスタイルを設定してみました.

301 Moved Permanently

webdesigner.fans-web.net

Pz-LinkCardのサムネイルサイズ変更

Pz-LinkCardは標準でサムネイルサイズが100pxに設定されています.

少し小さく感じたためこれを120pxに変更.

CSSの変更

style.cssに以下のコードを追記.

サムネイル取得APIの設定変更

先程のCSSでは画像が表示される枠組みのサイズを変えただけなので, 取得する画像自体のサイズも変更する必要があります.

dashboard→設定→pzカード設定からAPIの内容を変更

まとめ

所要時間30分程度でいい感じのリンク表示が実装でしました.

wordpressはver4.4から一応, wordpressサイトのブログカード表示はできるのですが, 他サイトには対応していません.  今回のPz-LinkCardプラグインは導入も手軽なので試してみてはいかがでしょうか.