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に、はてなブログ風のブログカードを表示させることができます。