プラグイン - WordPress

WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」

WordPressで、はてなブログでよく見かける「ブログカード」を表示させることができるプラグイン「Pz-LinkCard」をご紹介します。

[widgets_on_pages]

ブログカードとは?

はてなブログを見ていると、記事内で自分の記事や他のサイトの記事を紹介する際に、ブログ記事タイトルやリンクの他に、そのブログ名や写真などが枠になって表示されていることがありますが、これが「ブログカード」と呼ばれているものです。

最新版のWordPressでも、このブログカードが実装されたのですが、はてなブログのような情報量ではなく、シンプルなものです。

そこで、「Pz-LinkCard」を利用して、はてなブログのような内容にカスタマイズする方法をご紹介します。

Pz-LinkCardの作者さんのページが参考になります

WordPressのプラグインは海外の方が作成したものが多い中、「Pz-LinkCard」は日本の方が作成されたものなので、「Pz-LinkCard」の詳細については、作者さんのページが詳しくて分かりやすいです。

参考WordPressでリンクをカード形式で表示する Pz-LinkCard

「Pz-LinkCard」をインストールする方法

  1. WordPressの管理画面から左サイドバーにある「プラグイン」より「新規追加」をクリック
  2. 画面右上にある薄い文字で「プラグインの検索」と見える入力ボックスに「Pz-LinkCard」を入力かコピペしてリターンを押す
  3. 画面左上に「Pz-LinkCard」が表示されているはずなので、「今すぐインストール」をクリック
  4. 画面が切り替わったら「プラグインを有効化」をクリックして完了

はてなのブログカード風にカスタマイズする方法

「Pz-LinkCard」デフォルトのブログカードデザイン

「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」
「rwd.css」

「rwd.css」はスマホ用のスタイルですが、記事タイトルの文字の大きさと画像を小さくしています。

これで、WordPressに、はてなブログ風のブログカードを表示させることができます。

[widgets_on_pages id=2]

POSTED COMMENT

  1. […]  WebデザイナーFAN  2 shares 3 usersWordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttp://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見か […]

  2. はてなのブログカード風に表示できるプラグインを入れてみた より:

    […]  WebデザイナーFAN  9 usersWordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttp://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブロ […]

  3. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttp://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブログカード […]

  4. […] こちらではてなブログカード風にする設定が記載されています。 […]

  5. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttp://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブログカード […]

  6. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttp://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブログカード […]

  7. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttp://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブログカード […]

  8. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttp://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブログカード […]

  9. […] 化することができる(「」はエディタで[]に置き換え)。設定はWordPressでブログカードを表示させるプラグイン「Pz-LinkCard」を参考にした。ソーシャルカウントの取得は時間が掛かるらし […]

  10. […] WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」http://webdesigner.fans-web.net/3906 […]

  11. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttps://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブログカード […]

  12. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttp://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブログカード […]

  13. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttps://webdesigner.fans-web.net/3906WordPressで、はてなブログでよく見かける「ブログカード […]

  14. […]  WebデザイナーFANWordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANWordPressで、はてなブログでよく見かける「ブログカード」を表示させることができるプ […]

  15. […] WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANWordPressで、はてなブログでよく見かける「ブログカード」を表示させることができるプラグイン「Pz-LinkCard」 […]

  16. […]  WebデザイナーFAN WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」 | WebデザイナーFANhttps://webdesigner.fans-web.net/3906 WordPressで、はてなブログでよく見かける「ブログカード」 […]

  17. […] 参考 WordPressでブログカードを表示させるプラグイン「Pz-LinkCard」WebデザイナーFAN […]

COMMENT

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