日々のお役立ち情報からiHerbおすすめサプリまで、備忘録的なメモ代わりに雑多な情報を記録していきます。

がちゃのーと。 Gotcha-Note

WordPress

WordPressで「はてブ」のように記事を埋め込めるPz-LinkCardを導入

投稿日:

2570514012_e00ca63340_z 

別サイトのリンクをテキストだけでなく、サイトのキャプチャ画像と本文などをあわせて紹介しているサイトってありますよね。 こういうの↓  

iHerb(アイハーブ)の購入方法を解説 ~注文から支払い方法まで~【クーポン割引】
 iHerb(アイハーブ)で買い物をしたいけど、海外通販というだけで『英語だと注文方法が分からない…』とか『送料が高そうだから…』といった理由で購入を諦めている方が少なくありません。私自身、友...
 

Wordperssでも4.3からは同様の機能が追加されているようですが、ちょっと大きすぎてイマイチです。もちろん、カスタマイズも可能かもしれませんが、私にはハードルが高いです。

また、過去には「browser-shot」というプラグインを使っていたこともありましたが、利用には一手間必要なので、徐々に使わなくなってしまったという経緯があります。

そんな折、同じようなリンクを簡単に実現できてカスタマイズも可能な「Pz-LinkCard」という素晴らしいプラグインを見つけましてすかさず導入させていただきました。

実は最初のリンク画像も「Pz-LinkCard」を使って表示したリンクになりますが、そのカスタマイズの柔軟性や利用時の手軽さが素晴らしいと思います。おすすめです。

以下、インストール時の覚書です。

「Pz-LinkCard」をインストール

まずはPz-LinkCardをインストールして有効化します。

あとは、ナガツカさんのブログを参考にカスタマイズを行いますが、斜線の部分は私のブログでは行いませんでした。

基本設定

定型書式:「なし」に変更

表示設定

配置設定:(外側の)「上下左右の余白」を「設定しない」に変更、(内側の)「上と左の余白」を「16px」、「右の余白」を「8xp」に変更

カード全体をリンク:「カード全体をAタグで囲って、どこをクリックしてもリンク先を開くようにします。」のチェックを外す

枠線の太さ:薄い色/細い(1px)

外観設定: 「角を丸める」にチェックを入れる 「リンク先のURLを表示する」のチェックを外す サムネイルで「左側」から「右側」に変更 サムネイルで「影を付ける」のチェックを外す 「影を付ける」のチェックを外す

シェア数を表示する:
「フェイスブック(シェア数)」のチェックを外す

文字設定

以下の内容に変更。

サイト情報
色:#4eacd1

タイトル
色:#3d3f44

抜粋文
 桁数:160 190

内部リンク

サイトアイコン:「WebAPIを利用する」に変更
新しいウィンドウで開く:「モバイル端末以外」に変更

引用元: http://webdesigner.fans-web.net/3906

さらにスタイルシートを使って細かい調整を行うのですが、Stinger7ではそのままでは反映されないものも多いため、以下の2点だけをstyle.cssに追加しました。

/* サイト名を太字に変更 */ 
.lkc-domain{ font-weight: bold; }

/* 画像の角丸を削除 */
.lkc-thumbnail img{ border-radius:0px; }

 

Pz-LinkCardの使い方

使い方ですが、以下の様にURLのリンクを記述してあげるだけです。

pzlinkcard-example

するとこんな感じで表示されます↓

iHerb(アイハーブ)の購入方法を解説 ~注文から支払い方法まで~【クーポン割引】
 iHerb(アイハーブ)で買い物をしたいけど、海外通販というだけで『英語だと注文方法が分からない…』とか『送料が高そうだから…』といった理由で購入を諦めている方が少なくありません。私自身、友...

スポンサードリンク

スポンサードリンク

-WordPress

Copyright© がちゃのーと。 Gotcha-Note , 2017 AllRights Reserved.