WordPressで、はてなブログでよく見かける「ブログカード」を表示させることができるプラグイン「Pz-LinkCard」をご紹介します。
「Pz-LinkCard」は日本の方が作成されたものなので、「Pz-LinkCard」の詳細については、作者さんのページを参考にしてください。
参考
WordPressでリンクをカード形式で表示する Pz-LinkCard
「Pz-LinkCard」をインストールします
➀、WordPressの管理画面から左サイドバーにある「プラグイン」より「新規追加」をクリックします。
②、画面右上にある薄い文字で「プラグインの検索」と見える入力ボックスに「Pz-LinkCard」を入力してリターンを押す。
③、画面左上に「Pz-LinkCard」が表示されます「今すぐインストール」をクリックします。
④、インストールできたら、「有効化」をクリックして完了です。
WordPressプラグインは、ショートコードというキーワードを使って”リンク先のURL”を記述すると、カード形式で表示されるようになります。
下記のような感じで記事内に書込みます。
エディタ上での記述例スマートフォンで雑誌読み放題のサービスが良さげ！
blogcard url=”リンク先のURL″
こんな感じで表示されます。
カードの背景画像や背景色については、外部リンクと内部リンクで別々に設定できます。
はてなのブログカード風にカスタマイズする方法
「Pz-LinkCard」をインストールして、デフォルトで表示させると以下のようになります。
「Pz-LinkCard」ではてなブログカード風にする設定のまとめ
「Pz-LinkCard」の設定やデザイン変更は、WordPressの管理画面で、画面左サイドバーにある「設定」から「Pzカード設定」をクリックします。
下記は設定画面の上から順に、変更する内容をまとめています。
基本設定
定型書式：
「なし」に変更
表示設定
配置設定：
（外側の）「上下左右の余白」を「設定しない」に変更
（内側の）「上と左の余白」を「16px」、「右の余白」を「8xp」に変更
カード全体をリンク：「カード全体をAタグで囲って、どこをクリックしてもリンク先を開くようにします。」のチェックを外す
枠線の太さ：薄い色／細い(1px)
外観設定：
「角を丸める」にチェックを入れる
「リンク先のURLを表示する」のチェックを外す
サムネイルで「左側」から「右側」に変更
サムネイルで「影を付ける」のチェックを外す
「影を付ける」のチェックを外す
シェア数を表示する：
「フェイスブック（シェア数）」のチェックを外す
文字設定
以下の内容に変更。
サイト情報
色：#4eacd1
タイトル
色：#3d3f44
抜粋文
桁数：160
内部リンク
サイトアイコン：「WebAPIを利用する」に変更
新しいウィンドウで開く：「モバイル端末以外」に変更
この段階での設定変更イメージ
ここまでが、「Pzカード設定」の設定で変更できる内容です。この段階での設定変更イメージは次のようになります。
だいぶ、はてなブログのブログカードっぽくなってきました。あともう少し、細かいところまで近づけたい方は、スタイルシートで変更するしかありません。その場合の変更内容は以下の通りです。
スタイルシートの変更内容
以下のスタイルシートを追加します。
※当サイトの場合は、SEOに強いWordPressのテンプレート『賢威』の子テーマで運用しているので、子テーマディレクトリの「base.css」と「rwd.css」に追記となります。
1 |
/*-------------------------------------------------------- |
2 |
ブログカード |
3 |
--------------------------------------------------------*/ |
4 |
/* 外枠の角丸が大きいので小さくするのと、余白の変更 */ |
5 |
.lkc-internal-wrap{ |
6 |
border-radius:3px; |
7 |
padding-bottom:5px; |
8 |
} |
9 |
/* サイト名を太字に変更 */ |
10 |
.lkc-domain{ |
11 |
font-weight: bold; |
12 |
} |
13 |
/* 記事タイトルのスタイル変更 */ |
14 |
.lkc-title{ |
15 |
font-size: 17px; |
16 |
line-height: 1.4em; |
17 |
} |
18 |
/* 抜粋文のスタイル変更 */ |
19 |
.lkc-excerpt{ |
20 |
line-height: 1.5em; |
21 |
} |
22 |
/* 画像の角丸を削除 */ |
23 |
.lkc-thumbnail img{ |
24 |
border-radius:0px; |
25 |
} |
1 |
/*-------------------------------------------------------- |
2 |
解像度1200px以下 |
3 |
--------------------------------------------------------*/ |
4 |
@media |
5 |
only screen and (max-width : 1200px){ |
6 |
7 |
/*-------------------------------------------------------- |
8 |
ブログカード |
9 |
--------------------------------------------------------*/ |
10 |
/* 記事タイトルのスタイル変更 */ |
11 |
.lkc-title{ |
12 |
font-size: 15px; |
13 |
} |
14 |
/* 画像のスタイル変更 */ |
15 |
.lkc-thumbnail img{ |
16 |
width:80px; |
17 |
padding-left:6px; |
18 |
} |
19 |
20 |
} |
「rwd.css」はスマホ用のスタイルですが、記事タイトルの文字の大きさと画像を小さくしています。
これで、WordPressに、はてなブログ風のブログカードを表示させることができます。
