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

ブログカードとは?

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

最新版の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」
/*--------------------------------------------------------
ブログカード
--------------------------------------------------------*/
/* 外枠の角丸が大きいので小さくするのと、余白の変更 */
.lkc-internal-wrap{
	border-radius:3px;
	padding-bottom:5px;
}
/* サイト名を太字に変更 */
.lkc-domain{
	font-weight: bold;
}
/* 記事タイトルのスタイル変更 */
.lkc-title{
	font-size: 17px;
	line-height: 1.4em;
}
/* 抜粋文のスタイル変更 */
.lkc-excerpt{
	line-height: 1.5em;
}
/* 画像の角丸を削除 */
.lkc-thumbnail img{
	border-radius:0px;
}
「rwd.css」
/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

/*--------------------------------------------------------
ブログカード
--------------------------------------------------------*/
/* 記事タイトルのスタイル変更 */
.lkc-title{
	font-size: 15px;
}
/* 画像のスタイル変更 */
.lkc-thumbnail img{
	width:80px;
	padding-left:6px;
}

}

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

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