ブログ記事の中で、カード形式のリンクをついクリックしてしまうことはありませんか?
本記事では、おしゃれなリンクカードを簡単に設置できるプラグイン、Pz-LinkCardについてご紹介させていただきます。
Pz-LinkCardとは?
本プラグインは、カード形式のリンクを自動で作成してくれる便利なプラグインです。
単純なテキストリンクであれば、記事を読んでいる時に気づかない場合もありますが、下記のようなリンクカードであれば、リンク先の内容まで簡単に伝えることができます。
リンクカード化によるメリットは、おしゃれなデザインになるだけではなく、リンク先に関する情報が付加できることによって、クリック率の向上が見込めることです。
ただ、リンクが多い記事での使用時には、記事の読み込み速度が低下する可能性があります。
リンク先の読み込み時間に左右されるため一概には言えませんが、同一記事内に10個以上のリンクカード化を設置する場合は、読み込み速度が低下するかもしれませんので、ご注意ください。
また、使用しているテーマとの相性によっては、デザインが反映されない場合があります。
私の場合は、致命的な相性の悪さではありませんが、テーマによってはデザイン編集が上手くいかない場合があるかもしれませんので、ご注意ください。
プラグインをインストールしてみよう
まずは、どのようなリンクカードが作成できるのか確認するためにも、プラグインをインストールしてみましょう。
ワードプレスにログインし、上記のとおり、【プラグイン】→【新規追加】と選択します。
すると、メイン画面に検索ページが表示されますので、右上にある検索窓へ、Pz-LinkCardと入力してみましょう。
検索結果に当該プラグインが表示されているはずですので、【インストール】をクリックしましょう。
インストールが無事に終了すれば、インストール済みプラグインの一覧に当該プラグインが新たに追加されれば、完了です。
Pz-LinkCardによるリンクカードの作り方
次は、実際にリンクカードを作成する方法を説明します。
インストールが完了したら、自動的に執筆画面(ビジュアルエディタ)に専用のボタンが追加されますので、リンクカードを挿入したい箇所にカーソルを置いてから、クリックしてみましょう。
ボタンをクリックすると、上記のようにURLの入力画面が出てきますので、リンクカードを作成したいURLを入力し、【OK】をクリックしましょう。
ここでは、参考に本ブログのメインURLを入力しています。
すると、上記のように、リンクカード用の記述が自動的に挿入されますので、これでリンクカードの作成は完了です。
どうでしょう、とっても簡単でしょう?
リンクカードのデザインを編集してみよう
リンクカードの作り方が分かったところで、次はリンクカード自体のデザインを編集してみましょう。
設定画面は日本語になっていますので、各設定の効果は色々試していくことで好みのデザインを探してみてください。
ここでは、設定項目のうち、おすすめの設定項目についてご紹介します。
かんたん書式設定
すべてのデザインを自分で設定したい場合は、【なし】を選択することになりますが、本プラグインの設定内容だけで細かなデザインを設定できるようにはなっていません。
例えば、【なし】を選択した状態で、設定内容をどれだけ編集しても、【紙がめくれた効果】をデザインすることができない、という意味です。
このため、大きな分類でのデザインをここで選択し、編集できる設定だけ追加で設定する、というイメージになります。
なお、本ブログでは、ノーマル(はてなブログカード風)を基本デザインとしていますので、参考にしてみてください。
カード全体をリンク
せっかく作成したリンクカードであっても、URLをクリックしないと動作しないのでは意味がありません。
本設定にチェックを入れる(初期設定はチェックあり)ことにより、リンクカードのどこをクリックしても動作するようになりますので、確認しておきましょう。
余白の幅、高さ
各余白、幅については、使用するブログに合わせてバランスを確認して設定することになりますが、高さについては空欄にすることをおすすめします。
ここで固定値を設定してしまうと、抜粋文などが上手く表示されない可能性が高くなりますので、空欄にすることで自動調整するようにしておきましょう。
CSSリセット
使用しているテーマによっては、サムネイル画像がずれてしまう時があります。
本設定にチェックを入れる(初期設定はチェックあり)ことにより、CSSの重複によるサムネイル画像のずれが改善されることがありますので、確認しておきましょう。
幅に合わせて縮小
文字の設定の最後にある設定ですが、チェックすることで画面幅に合わせた自動調整を行うようになります。
せっかく細かく文字や、サムネイル画像の大きさを設定しても、自動的に縮小処理がされてしまうことで、リンクカードの内容が見えなくなる場合があります。
本設定のチェックを外す(初期設定はチェックあり)ことにより、自分が設定したサイズで表示させることができますので、確認しておきましょう。
まとめ
本記事では、リンクカードを簡単に作成できる、Pz-LinkCardというプラグインを紹介させていただきました。
本プラグインを使用することによって、単純なリンクもおしゃれにデザインすることができますが、多用しすぎればページ読み込み速度が低下するため、ご注意ください。
ではでは。