リンクをカード形式にする「Pz-LinkCard」おすすめ設定

Pz-LinkCard

WordPressのブログでリンクをブログカード形式で表示してくれるプラグインが
Pz-LinkCard
です。

素の青文字リンクのままだと寂しい。と思うことありませんか?

リンク先のサムネイルを表示させたり、抜粋を見せたり、枠をつけたり色をつけたり、リンクを目立たせて画面のアクセントにしたり、クリックを促したりする効果が期待できるのがカード形式のメリットです。

Pz-LinkCardはショートコード一文を記述するだけで使えるお手軽な使い心地と、自分の好みの見た目にとことんこだわれるカスタマイズ性の高さがオススメポイントです。

Pz-LinkCardの使い方

※プラグインのインストール方法については
WordPressプラグインのインストール方法
を参考にしてください

Pz-LinkCardの使い方はとっても簡単です。

文章中のカード形式のリンクを入れたい箇所に
[blogcard url="リンク先のURL"]
というショートコードを一文記入するだけです。
ビジュアルエディタでもテキストエディタでも同じです。

この一文だけで、投稿した記事でリンクがカード形式(↓こんなの)になります。

カード形式にしたいリンクにだけこのショートコードを適用すればいいので、素の青文字リンクと混在させることももちろんできます。

Pz-LinkCardはカスタマイズ度が高い

Pz-LinkCardで表示されるリンクカードは見た目やリンクの挙動(新しいタブで開くなど)などを事細かに設定することができます。

設定範囲を列記すると

  • プリセットデザインの中から選んで使える「簡単書式設定」
  • 複数のデザインを使い分けたい場合にショートコードを3つまで使い分け
  • リンクを引用扱いにする
  • カードを文章中にどのように配置するか「配置設定」
  • カードの見た目をコントロールする「外観設定」
  • SNSでのシェア数表示のオンオフ
  • カード中の文字色
  • 外部リンク用カードの背景(色あるいは画像)
  • 外部リンクへのnofollowオンオフ
  • 内部リンク用カードの背景(色あるいは画像)
  • 同ページ内リンク用カードの背景(色あるいは画像)
  • リンクを開く時の挙動(新しいウィンドウで開くのオンオフ)
  • 画像取得APIの指定
  • SSL検証のオンオフ
  • リダイレクト処理のオンオフ
  • リンク切れチェックのオンオフ
  • ・・・等々

一つ一つの項目の詳しい解説は、このプラグインの開発者ぽぽろんさんのページが一番正確で詳しいので、こちらを参考にされるのが良いと思います。

memolog.infoではこう設定している。2017年度版

設定項目が多岐に渡るため、何をどのように設定すれば良いのか迷ってしまう方もいると思われるので、参考程度に当サイトで使っている設定を公開します。

ごくごくシンプルな見た目の設定です。
まずこの設定をパクッてからより自分好みになるように調整していくのもアリです。

各項目について簡単に説明もしますので参考まで。

かんたん書式設定 なし
プリセットデザインは使いません
ショートコード 設定なし
ショートコード1つで充分なのでここは特に触る必要なしです
表示設定 「カード全体をリンク」をチェック
カード全体どこをクリックしてもリンクになるようにしています
配置設定

Pz-LinkCard表示設定

ポイントは「幅」を%指定したところ。
様々なデバイスに対応するには%指定した方が安心できる。
逆に高さはpx指定の方が思い通りになる。

外観設定

Pz-LinkCard外観設定

試行錯誤の末、今のところこれで落ち着いてます。

枠線の太さ

Pz-LinkCard枠線の太さ

黒線は主張が強すぎるのでグレーで抑える

CSSリセット チェックしたままでOKです
シェア数の表示 なし
シェア数の表示は表示が遅くなる原因になるそうなので無し。
文字設定 ここは特に触るところなし
外部リンク
内部リンク

Pz-LinkCard背景色

背景色を薄いブルーに変更。目立たせてクリックしてもらうため。
外部リンク・内部リンクともに同じ設定

新しいウィンドウ
で開く

すべての端末
nofollowを付与 チェック

当サイトでのカスタマイズ設定は以上です。
参考になれば幸いです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする