URLリンクをブログカード風にできる
- 外部リンクや内部リンクをブログカード風にしたい。
- 外部リンクと内部リンクでデザインを変更したい。
ココがポイント
結論：
プラグイン「Pz-LinkCard」でブログカード風のデザインできる。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、参考になった外部リンクや
自身の記事を内部リンクさせる機会が多いと思います。
そんな中、少しでも「デザイン性のあるものにしてみたい」
参考になったリンクには「メッセージをつけておきたい」
そのようなブログカードにしたいけど、
「一つ一つ設定するのは大変」と
感じていることでしょう。
そこで、今回は便利なプラグインを
見つけたので、ご紹介させていただきたいと思います。
目次
1.ブログカード風のデザインにできる「pz-linkcard」
ダッシュボードの「プラグイン」から「新規追加」。
キーワードに「Pz-LinkCard」と入力して検索。
「インストール」後、「有効化」をする。
2.「Pz-LinkCard」の詳細設定
2.Step1 「Pz-LinkCard」の設定画面へ
「設定」から「Pzカード設定」へ
2.Step2 「かんたん書式設定」を「見出し」へ
「基本」タブを押して、「かんたん書式設定」から「見出し（付加情報のテキストが見出しとして表示されます）」を選択。
「変更を保存」をクリック。
2.Step3 「表示」設定でシェア数を表示できる
「表示」タブを押して、一番下の「シェア数を表示」で表示したい項目のチェックを入れる。
「枠線の太さ」をお好みで。また、この「表示」設定でレイアウトを調整できる。
設定を行った後、「変更を保存」をクリック。
2.Step4 「外部リンク」にメッセージをつける
「外部リンク」タブから、「付加情報」にメッセージを入れることができる。
「変更を保存」をクリック。
2.Step5 背景色の設定
色の設定も、それぞれの「外部リンク」「内部リンク」のタブから行うことができる。
しかし、「他の設定との競合でうまく表示できない」
「もう少しこまかく設定したい」
という方は、下記CSSを追加してみてください。
.linkcard .lkc-external-wrap /* 外部リンクセレクタ */ {
background: #FFE1C4; /* 背景色 */
border-color: #FFE1C4; /* 枠線色 */
}
.linkcard .lkc-external-wrap .lkc-external-added /* 外部リンクのメッセージボックスセレクタ */ {
display: block; /* この行を追加することで枠線を設定できるようになる */
background: #FF7D00;
border: 1.5px outset #FF7D00;
}
.linkcard .lkc-internal-wrap /* 内部リンクセレクタ */ {
background: #edf6fb;
border-color: #edf6fb;
}
3.URLリンクにデザインを適用する方法
プラグインを入れると［blogcard url="リンク先URL"］でかこむだけで、
ブログカード風にすることができる。
テキストを打つ必要も無く、アイコンクリックでURLをかこむ機能もある。
ビジュアルエディタ側
テキストエディタ側
最後に：参考にしたページとまとめ
お疲れ様でした。
今回は、「Pz-LinkCard」で簡単にURLリンクをブログカード風にデザインできる方法をご紹介しました。
参考にした詳しい記事も是非ご覧になって下さい。
もっと詳しく
最後まで、ご一読いただき、ありがとうございました。
