ブログカードを表示させるプラグイン

スポンサーリンク
Pocket

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」に追記となります。

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

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください