ブログカードを作成・カスタマイズできるPz-LinkCardプラグイン

WordPress個別サポート

リンク先の情報を表示するブログカード、便利ですよね。タイトルやアイキャッチ画像、抜粋などを見やすく表示して、サイトのPVを増やすのにも役立ちます。

ブログカードの例
ブログカードの例

そんなブログカードのレイアウトをカスタマイズできるPz-LinkCardプラグインを紹介します。

スポンサーリンク

Pz-LinkCardによるブログカードの作り方

「プラグイン」‐「新規追加」メニューからPz-LinkCardプラグインをインストール、有効化します。

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

ビジュアルエディタで「リンクカードを挿入」をクリックします。

「リンクカードを挿入」をクリック
「リンクカードを挿入」をクリック

リンクカードを作成するURLを入力して「挿入」をクリックします。

作成対象のURLを入力
作成対象のURLを入力
ブロックエディタの場合は次の方法があります。

  • クラシックエディタを使う
  • ショートコード [blogcard url="URL"] を使う(URLは要変更)

ショートコードが追加されます。これで完成です。

ショートコードが追加される
ショートコードが追加される

表示すると、ブログカードとして表示されます。

ブログカードが表示される
ブログカードが表示される

ブログカードの表示設定

「設定」‐「Pzカード設定」メニューから、ブログカードの表示方法を設定できます。

かんたん書式設定

「基本」‐「かんたん書式設定」メニューでレイアウトを選ぶことができます。

かんたん書式設定
かんたん書式設定

選択例をいくつか紹介します。

囲み
囲み
ノーマル
ノーマル
紙がめくれた効果
紙がめくれた効果
インフォメーションオレンジ
インフォメーションオレンジ
WindowsXP
WindowsXP

配置(サイズや余白)

「配置」ではブログカードのサイズや余白を設定できます。

ブログカードのサイズ・余白設定
ブログカードのサイズ・余白設定

見出しの表示

ブログカードの上に「こちらもどうぞ」や「この記事も読まれています」などの見出しを表示するには、次のように設定します。

「外部リンク」の「付加情報」に見出しの文字を入力します。

見出しの文字を入力
見出しの文字を入力

「表示」の「付加情報を見出し表示にする」をチェックします。

「付加情報を見出し表示にする」をチェック
「付加情報を見出し表示にする」をチェック

設定した付加情報が見出しとして表示されるようになります。

見出しが表示される
見出しが表示される

URLや抜粋の表示設定

「表示」ではサイト名やURL、抜粋などの表示/非表示を設定できます。

各パーツの表示設定
各パーツの表示設定

カードの角を丸くしたりマウスオーバー時のアクションなども設定できるので、いろいろ試行錯誤してみてください。

CSSを使ったカスタマイズ例

CSSを使ってレイアウトをカスタマイズすることもできます。こんな感じに仕上げてみました。

ブログカードのスタイル設定例
ブログカードのスタイル設定例

※「かんたん書式設定」は「なし」にしてください。

使ったCSSは次のようになります。「外観」-「カスタマイズ」-「追加CSS」メニューなどに入力してみてください。

/* ブログカード */
.lkc-external-added {
    top: -16px;
    left: 20px;
    padding: 10px 15px;
    background-color: darkred;
    border-radius: 5px;
    color: #fff !important;
    font-weight: bold;
    font-size: 16px !important;
}

.lkc-external-wrap {
    border: 3px solid darkred;
    border-radius:5px;
}

.lkc-favicon,
.lkc-domain,
.lkc-share {
    display: none !important;
}

「darkred」の部分が枠線の色設定です。好きな色(カラーコード)に変更してください。

以上、Pz-LinkCardプラグインを使ったブログカードを紹介しました。興味がある方は、ぜひお試しください。

WordPressプラグイン