WordPress プラグイン「Pz-LinkCard」余白などのレイアウトをカスタマイズする方法

ショートコード1発で外部リンクや内部リンクのブログカードを簡単に作成してくれる超便利な WordPress プラグイン「Pz-LinkCard」。

しかし、この Pz-LinkCard の欠点として「デフォルトのレイアウトはダサい＆詰まっている感（圧迫感）がすごい」ことなのです。

本当に便利なプラグインだけに、この欠点はとっても残念なのです。

というわけで、今回は・・・

本ブログの Pz-LinkCard の余白は本記事の手順で調整済み

Tanweb.net の Pz-LinkCard の余白は本記事で紹介する手順ですでに調整済みです。

Contact Form 7 海外からのスパム対策！お問い合わせ本文が全て外国語の場合は送信...

長いこと WordPress ブログを運営していると必ずといってよいほど発生する「お問い合わせフォームからの外国語スパムメール」。海外からバシバシ送られてくるんですよね…。対策として画像認証やテキスト認証の導入も検討しましたが、ユーザビリティ的にちょっとよろしくないと思うんです。だって送信する側の面倒が増えるでしょ。なんとか日本語メールだけを受信する方法はないものか…。そういうの、あるんですっ！今回は「お問い合わせフォームから送信される英語メールだけをピンポイントでシャットアウトする方法」を紹介します。 ...

Tanweb

▲こんな感じで、以下で紹介する CSS で余白を調整しています。あとは管理画面の Pz-LinkCard の設定からコンテンツ幅めいっぱいに広がる＆表示項目の調整をかけて見栄えを良くしています。

なかなか良いでしょ？

囲い枠の余白とカード幅の調整は管理画面から

Pz-LinkCard リンクカードを囲っている枠（ボックス）の余白調整とリンクカードの幅の調整は、管理画面の Pz カードの設定「配置」タブから調整可能です。

コンテンツ幅めいっぱいに横幅を広げるには「幅 100%」に設定します。

リンクカードは、コンテンツの横幅めいっぱいに広がって表示された方が、確実に見栄えが良いです。

Pz-LinkCard の設定を変更する場所は、管理画面メニュー「設定 → Pz カード設定」です。

その他、囲い線の太さや色、背景色、テキストのサイズや色、リンクカードに表示する項目の選別なども Pz カードの設定から行うことができます。

リンクカードのテキスト間やサムネイルの余白を調整する

デフォルト状態だと余白が詰まりすぎている

Pz-LinkCard はデフォルト状態だと、テキスト間やサムネイル間の余白がキツキツに詰まっていて、とにかく圧迫感がすごいです。これでは美しくありません。

これらの余白は管理画面の「Pz カードの設定」から調整することはできず、テーマの CSS に別途レイアウトコードを自分で記述していく必要があります。

リンクカードのテキスト間とサムネイル間の余白調整手順

Pz-LinkCard のテキスト間とサムネイル間を調整するための CSS 構造はこんな感じ。

この CSS クラスに margin や padding を指定して余白を設定していきます。

子テーマの「style.css」に以下の CSS をコピーして貼り付けて利用してください。

どれがどの部分の CSS クラスなのかわかるようにしてあるので、必要な箇所を任意で値の記述をして調整してくださいね。

※項目の配置によって上下左右の余白はまちまちなので class だけを記述してあります。

例）因みに当ブログの場合は、こんな感じで調整をしています。

タイトル下方の余白、サムネイル右側の余白、サイト情報上の余白の3箇所です。

あとがき

Pz-LinkCard は、ブログ記事内にリンクカードを簡単に設置できる便利な WordPress プラグインですが、デフォルト状態では見てくれが結構悪いです。

とお悩みのブロガーさんいらっしゃましたら、ぜひ本記事のカスタマイズをお試しくださいね。