別サイトのリンクをテキストだけでなく、サイトのキャプチャ画像と本文などをあわせて紹介しているサイトってありますよね。 こういうの↓
Wordperssでも4.3からは同様の機能が追加されているようですが、ちょっと大きすぎてイマイチです。もちろん、カスタマイズも可能かもしれませんが、私にはハードルが高いです。
また、過去には「browser-shot」というプラグインを使っていたこともありましたが、利用には一手間必要なので、徐々に使わなくなってしまったという経緯があります。
そんな折、同じようなリンクを簡単に実現できてカスタマイズも可能な「Pz-LinkCard」という素晴らしいプラグインを見つけましてすかさず導入させていただきました。
実は最初のリンク画像も「Pz-LinkCard」を使って表示したリンクになりますが、そのカスタマイズの柔軟性や利用時の手軽さが素晴らしいと思います。おすすめです。
以下、インストール時の覚書です。
「Pz-LinkCard」をインストール
まずはPz-LinkCardをインストールして有効化します。
あとは、ナガツカさんのブログを参考にカスタマイズを行いますが、斜線の部分は私のブログでは行いませんでした。
基本設定
定型書式：「なし」に変更
表示設定
配置設定：（外側の）「上下左右の余白」を「設定しない」に変更、（内側の）「上と左の余白」を「16px」、「右の余白」を「8xp」に変更
カード全体をリンク：「カード全体をAタグで囲って、どこをクリックしてもリンク先を開くようにします。」のチェックを外す
枠線の太さ：薄い色／細い(1px)
外観設定： 「角を丸める」にチェックを入れる 「リンク先のURLを表示する」のチェックを外す サムネイルで「左側」から「右側」に変更 サムネイルで「影を付ける」のチェックを外す 「影を付ける」のチェックを外す
シェア数を表示する：「フェイスブック（シェア数）」のチェックを外す文字設定
以下の内容に変更。
サイト情報
色：#4eacd1
タイトル
色：#3d3f44抜粋文
桁数：160190
内部リンク
サイトアイコン：「WebAPIを利用する」に変更
新しいウィンドウで開く：「モバイル端末以外」に変更
さらにスタイルシートを使って細かい調整を行うのですが、Stinger7ではそのままでは反映されないものも多いため、以下の2点だけをstyle.cssに追加しました。
[css]
/* サイト名を太字に変更 */
.lkc-domain{ font-weight: bold; }
/* 画像の角丸を削除 */
.lkc-thumbnail img{ border-radius:0px; }
[/css]
Pz-LinkCardの使い方
使い方ですが、以下の様にURLのリンクを記述してあげるだけです。
するとこんな感じで表示されます↓