ライフスタイルクリエイターズ

神田 翼 (管理人)のプロフィールはこちら

WordPressでブログカードが表示できるPz-LinkCardプラグインの使い方とカスタマイズ

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

今日はブログの記事に、他のページのリンクを貼る時に便利なプラグインをご紹介します。ブログカードと言われるもので、予め用意されたショートコードにURLを入力するだけで、「アイキャッチ画像・タイトル・シェア数・本文」などが表示される優れものです。百聞は一見にしかず・・・ブログカードで表示したものを貼ってみます。

↓Pz-LinkCardで表示した例(内部リンクの場合) 自分のサイト


↓Pz-LinkCardで表示した例(外部リンクの場合) プラグイン作者の方のサイト

いかがでしょうか?普通にURLを貼り付けるよりも見やすいし、目立ちますよね。これで自分のサイトの他の記事も見てもらえたり、外部リンクを紹介することも可能です。外部リンクのURLはクリックすると別タブで開く設定もできます。まずは、導入して使ってみて下さい。

スポンサーリンク

Pz-LinkCardプラグインのインストール方法

Pz-LinkCardのプラグインのインストールは、こちらのページからインストールしてください。もしくは、WordPressの管理画面→プラグイン→新規追加→検索窓「Pz-LinkCard」で検索して下さい。

これで下記画像のように1番上に表示されますので、インストール・有効化してください。

Pz-LinkCardの使い方

まずは設定なしで使ってみましょう。投稿→新規追加で投稿画面に移動してください。今回はビジュアルエディタとテキストエディタどちらからでも「Pz-LinkCard」を追加できるように、それぞれ説明します。

ビジュアルエディタから追加する場合

まず、「リンクカード」という項目が自動で追加されているので、「リンクカードを作成」をクリックします。


次に、URLを入力する窓が開きますので、ここにPz-LinkCardで表示したいURLを挿入して下さい。


下記のようにショートコードが表示されていれば完了です。プレビューで確認してみてると、ブログカードが記事に追加されています。

テキストエディタから追加する場合

こちらも基本的にはほぼ同じですが、簡単にやり方を紹介します。テキストエディタの場合は、「リンクカード」という項目が出てくるので、これをクリックします。するとショートコードが出現するので、URLを指定箇所に挿入して完了です。


Pz-LinkCardのデザインが好みじゃない方はカスタマイズしましょう

現段階では設定は何も行っていないので、ブログカードのデザインはこんな感じです。余白、シャドウ、角丸あたりが自分のサイトのデザインに合わないので、カスタマイズしたいと思います。もっとシンプルに美しく表示したい。

↓カスタマイズ前のブログカード

Pz-LinkCardのカスタマイズ

管理画面→設定→Pz カード設定 からPz-LinkCardのカスタマイズを行います。上から変更が必要な項目のみ順番に説明していきます。

基本設定

【かんたん書式設定:なし】
シンプルに表示するために、余計な装飾をつけないように「なし」にします。

配置の設定

【余白】外側の余白:すべて4px/内側の余白:すべて16px/幅:100%

表示の設定

【外観設定】画像のとおりに変更
【枠線の太さ】色を「#ccc」に変更 ※好きな色でOKです

文字の設定

【それぞれの文字の設定】画像のとおりに変更、色は好きな色でOKです

外部リンクの設定

【背景色】「#f9f9f9」に変更 ※好きな色でOKです

内部リンクの設定

【背景色】「#f9f9f9」に変更 ※好きな色でOKです

同ページへのリンクの設定

【背景色】「#f9f9f9」に変更 ※好きな色でOKです

詳しい人向けの設定

【追加するスタイルシート】下記のCSSをそのまま貼り付ける ※サムネイルの右横の余白を15pxとるためのコードです


以上で設定は完了です。

pz-linkcardのCSS設定について

僕も今回どうしたら新規でCSSを追加できるのか悩みましたが、「詳しい人向けの設定」の追加するスタイルシートという枠内に直書きすれば反映されるみたいです。「css/linkcard.css」とか入力してみて、新たにCSSファイルを作成してみたりしましたが、全然違うかったみたいです(笑)

最後に

できるかぎり詳しく画像つきで説明したら長くなってしまいました。逆に分かりづらくなってしまってますかね。難しい。せっかくブログカードを導入してみたので、僕のブログのおすすめ記事をpz-linkcardを使って「あわせて読みたい記事」という風に載せておきます。いくつも並べて載せると美しいですね〜。満足。

ブログ運営・WordPress関連のあわせて読みたい記事




スポンサーリンク

デザイナー/フリーランスパパ@神田翼
神田翼

フリーランスのWebデザイナーの神田 翼です。2児の父親です。父親でもガッツリ子育てがしたいという思いから、フリーランスとして働くことにしました。このブログではフリーランス・子育て・WordPress・ブログ運営のことを書いています。(プロフィール)

最新の記事一覧

月別表示

トップへ戻る