はるまるBlog

新潟で趣味系アイテムの企画販売をしている個人事業主のブログです。生活、趣味、仕事、遊び、食べ物、その他いろいろを綴っています。

NEW ARTICLE
久しぶりにラジコン（京商プラズマMKⅢ）買いました。
  • ワードプレスの記事内に画像付きで過去記事を表示できるプラグイン

ワードプレスの記事内に画像付きで過去記事を表示できるプラグイン

ワードプレスの記事内に画像付きで過去記事を表示できるプラグイン

画像付きで過去記事を紹介しているブログを見かけて、格好いいな。と思って見つけたワードプレスのプラグイン「Pz-LinkCard」を紹介します。

目次

プラグイン「Pz-LinkCard」

Pz-LinkCardのダウンロード画像

Pz-LinkCardはショートコードを記事内に書いてリンク先URLを記述するだけで格好いいリンク先表示ができるプラグインです。

[ショートコード url=”URL”]

デザインのカスタマイズもできるので、自分好みの表示が可能です！

Pz-LinkCardのデフォルトデザイン

Pz-LinkCardのデフォルトデザインはこんな感じ。

Pz-LinkCardのデフォルトデザインの画像

デフォルトではグラデーションや影を使った立体的なデザインで表示されます。

カスタマイズ例

yomanakya.com
iPhoneを海外旅行で安く簡単に使う方法 | Life Log
機械や設定が苦手な方にも簡単に安く海外旅行でiPhoneを使う方法を紹介しています。

このブログのテーマ（テンプレート）に合わせた（合ってるかな？）雰囲気にカスタマイズしてみました。

他にも枠と画像の角を丸めたり文字色や文字サイズの変更も可能です。

＞このカスタマイズの設定値はこちら

Pz-LinkCardの導入方法

  1. プラグインの新規追加
  2. プラグインの検索⇒Pz-LinkCard
  3. 今すぐインストール
  4. プラグインを有効化

ワードプレスに慣れている方は、これだけで大丈夫だと思いますが、不慣れな方のために画像つきで解説します。

不要な方は「Pz-LinkCardの設定方法」にお進みください。

＞Pz-LinkCardの設定方法

1.プラグインの新規追加（インストール）

ワードプレスの管理画面、左サイドバーの「プラグイン」⇒「新規追加」をクリック。

プラグインの追加設定画面

2.プラグインの検索⇒Pz-LinkCard

画面右上のキーワードに「Pz-LinkCard」を入力してEnterキーを押します。（キーワードには「」はいりません）

「Pz-LinkCard」を入力

3.今すぐインストール

プラグイン名「Pz-LinkCard」を確認して「今すぐインストール」をクリック。

いますぐダウンロードのボタン画面

4.プラグインを有効化

インストールが完了しました。
と表示されたら「プラグインを有効化」をクリックでインストールは完了です。

プラグインを有効化する画面

Pz-LinkCardの設定方法

プラグインのインストールが完了したら、次は設定に入ります。

デフォルトデザインのままで良い場合は、設定の必要がありませんので、「Pz-LinkCardの投稿方法」にお進みください。

＞Pz-LinkCardの投稿方法

基本設定

ワードプレスの管理画面、左サイドバーの「設定」⇒「Pzカード設定」をクリックで設定画面に入ります。

プラグインの設定画面

ショートコードの設定

ショートコードの設定画面

Pz-LinkCardを記事内に表示するためのショートコードを設定します。

設定したショートコードとリンク先URLを記事内に記述することで、記事中にPz-LinkCardを表示できます。

ショートコードはデフォルトの「blogcard」のままでOKです。

定型書式の設定

定型書式の設定画面

定型書式の設定は12種類の表示デザインから選択して設定します。

自分好みのデザインにしたい場合は「なし」を選択します。

配置設定

配置設定画面

配置設定は表示の余白を設定する項目です。

自分の好みに合わせて上下左右、内外の余白を調節できます。

カード全体をリンク

Pz-LinkCardの表示全体をリンクにするか、しないかの設定です。

チェックマークを入れると、表示のどこをクリックしてもリンク先が開きます。

枠線の太さ

枠線の太さの設定画面

枠線を「なし」と「12種類のデザイン」から選べます。

外観設定

外観設定画面

表示する項目やサムネイル（画像）などを設定する項目です。

シェア数を表示する

TwitterやFaceTimeなど、SNSのシェア数を表示する設定です。

文字設定

文字設定画面

タイトルや抜粋文などの文字色や文字サイズを設定する項目です。

外部リンク

外部リンク設定画面

他サイトを表示するときの設定です。

背景色やサムネイル（画像）などの設定ができます。

こんな感じでおすすめの本を紹介しても良いかもしれませんね。

ワードプレスを始めるならこちらの本がおすすめ！

www.amazon.co.jp
https://www.amazon.co.jp/小さなお店-会社の-WordPress超入門-初...

サムネイル（画像）はデフォルトで「なし」の設定ですが、表示したい場合は「WebAPI」を利用する」に設定します。

内部リンク

内部リンク設定画面

自サイトのURLを指定したときに表示される設定です。

同ページへのリンク

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

同ページへのリンクは、ページ内リンクのことです。

例えば、記事に「目次」などを入れて同ページ内にリンクを貼る場合に使います。

画像取得APIの指定

画像取得APIの指定画面

ファビコンとサムネイル画像取得のAPIを指定する項目ですが、わからない場合はデフォルトでOKです。

詳しい人用（Debug）

詳しい人用（Debug）の設定画面

文字通り「詳しい人用」で、より細かな設定ができる項目です。

こだわらなければ特に設定を変える必要はありません。

Pz-LinkCardの投稿方法

Pz-LinkCardの投稿は設定したショートコードとリンク先URLを記述します。

ショートコードが「blogcard」の場合なら、
Pz-LinkCardの投稿画面
と記述します。

そうすると、このように表示されます。

Pz-LinkCardのデフォルトデザインの画像

カスタマイズ例の設定値

一応ですが、最初にお見せしたカスタマイズ例の設定値をまとめましたので、よろしければご利用ください。

yomanakya.com
iPhoneを海外旅行で安く簡単に使う方法 | Life Log
機械や設定が苦手な方にも簡単に安く海外旅行でiPhoneを使う方法を紹介しています。

基本設定

カスタマイズ用の基本設定

定型書式「なし」、他はデフォルトです。

表示設定

カスタマイズ用の表示設定

カードの横幅「580px」は当サイトの本文表示の幅に合わせた数値です。

他の数値は画像通りに設定変更をしてあります。

カード全体をリンク、枠線の太さ、外観設定

カスタマイズ用のカード全体をリンク、枠線の太さ、外観設定

文字設定

カスタマイズ用の文字設定

その他の設定はデフォルトです。

CSSの追加

デザインのバランスを整えるために「CSS」を追加します。

CSSを知らない人にとっては難しそう。。と思うかもしれませんが、順番通りに設定してもらえれば大丈夫です！

1.CSSのエディター画面を開く

CSSのエディター画面

ワードプレスの管理画面、左サイドバーの「外観」⇒「エディター」をクリック。

2.CSSを記述

エディター画面を開いたら一番下までスクロールします。

エディター画面の一番下

以下のコードをコピペしてCSSの一番下に記述します。

/* Pz-LinkCard */

.lkc-internal-wrap {
 margin: 0 0 20px 0; 
}

.lkc-content {
 border-top: none 
}

.lkc-domain {
 padding: 0 0 0 4px; 
}

.lkc-title {
 display: block;
 padding:0 0 5px 5px;
 border-bottom: 4px solid #e8e8e8;
}

.lkc-excerpt {
 line-height: 1.6em;
 padding: 0 0 0 5px;
}

貼付け後の画像

ファイルを更新して完成です、お疲れ様でした。

WordPressのカスタマイズの参考になれば幸いです。
 
 

☆本日の良さげなもの
仕事がはかどる超ワイドモニター