ワードプレスの内部リンクって、初期の状態だと文字だけが表示されるため、ちょっと見た目が悪いですよね。はてなブログのように、サムネイル画像付きのかっこいいリンクを設置してみたいものです。
そこで今回は、ワードプレスでも「サムネイル画像付きのリンク」が作れるプラグインを紹介します。
サムネイル画像付きリンクとは?

ワードプレスの初期設定では、リンクを挿入すると文字だけが表示されますよね。
しかし、上の画像のように、サムネイル付きのかっこいいリンクにデザイン変更したいと思う人は多いはずです。
そんな時は、ワードプレスのプラグイン「Pz-LinkCard」を使いましょう!
このプラグインがあると、簡単にサムネイル画像付きリンクを作成できます。
▽Pz-LinkCardの詳細
このプラグインはショートコードでURLを指定することで、リンクをブログカード形式で表示させるものです。
外部リンクと内部リンクで、カードの色や新しくウィンドウを開くかなど、設定を変更することができます。
引用元:https://ja.wordpress.org/plugins/pz-linkcard/
外観を良くするためには、最初にちょっとだけ設定が必要ですが、特に難しいことはありません。次の章の説明文を読めば、カンタンにリンクをつくることができます。
(ちなみに、上の写真は設定画面で「シンプル」を選択しただけなので、画像の大きさなど面倒な変更は一切加えていません)
▽必須プラグインの紹介はこちら
ワードプレスでAkismetとJetpackを連携する設定方法は?使い方を解説
プラグイン「Pz-LinkCard」の設定方法
という訳で、まずは「Pz-LinkCard」をインストールしましょう。
ワードプレスの管理画面から『プラグイン』→『新規追加』を選び、検索欄に「Pz-LinkCard」と入力すれば、トップに同じ名前のものが表示されます。
インストールボタンを押して、有効化すれば使えるようになります。
はい、カンタンですね!最初に言った通り、たったこれだけの作業で「サムネイル画像付きリンク」が使えるようになりました(笑)
ワードプレスの記事で実際に使ってみよう
「Pz-LinkCard」を有効化したら、実際にワードプレスの記事内で使ってみましょう。使い方もすごーく簡単なので、安心してくださいね(^^♪
ザックリ説明すると、URLを記事に挿入し、ワードプレスのテキスト編集画面で「リンクカード」(下の画像の赤で囲まれた部分)と書かれたボタンを押すだけです。

とはいえ、これだけだと若干わかりにくいので、一つずつやっていきましょう。
【サムネイル画像付きリンクを挿入する方法】
①まずは記事内に、リンクさせたい記事のURLを張り付けます(「リンクの挿入/編集」からコピーするとラクです)
②URLを張り付けたら、「ビジュアル」から「テキスト」の編集画面に移動し、URLをマウスで選択します。
③URLを選択した状態で、先ほど紹介した「リンクカードボタン」を押します。
④ビジュアル編集画面に戻ってみると、サムネイル画像付きリンクが表示されています。
※サイトをSSLに設定していると、サムネイル画像がちゃんと表示されない場合があります。その場合は、下の方法で設定を変更してくださいね。
関連:pz-linkcardが使えない?サムネイルが表示されない時の解決策
画像の大きさを設定する方法
サムネイル画像付きのリンクを挿入するだけなら、プラグインを有効化させるだけで簡単にできます。
とはいえ、初期の状態だと画像が大きすぎて「見た目が気に入らない」と思う人もいるでしょう。そんな時は、『Pzカード設定』でリンクを見やすい大きさと色に変えましょう。
「『Pzカード設定』なんて項目、どこにあるのさ?」
・・・という話ですが、「Pz-LinkCard」をした後に、管理画面の『設定』にカーソルを持っていくと『Pzカード設定』という項目が表示されます。
これ選択して、「Pz-LinkCard」の設定画面に移動しましょう。
すると、なんだか面倒そうな項目がいろいろと表示されますね。自分で細かくカスタマイズするとなると、結構設定が大変です。
設定が面倒な場合は、一番上にある「かんたん書式設定」でリンクの見え方をいろいろ変更するのがオススメです。ちなみに、私もこれを使っています。
かんたん書式設定を使えば、シンプルな表示にしたり、セロハンテープで張り付けたような見た目にしたりと、いろいろ外観を変えられます。何パターンか選んで、試してみてもいいですね。
サムネイル画像の大きさを直接変えたい場合は、『表示設定』の中にある『外観設定』で変更すればOKです。この項目で、角を丸めたり影を付けたりすることもできます。
コメントを残す