現在私も使っているWordpressのテーマJIN
デザインが綺麗でいいですよね！
そんなJINの魅力でもあるブログカードのデザイン！
基本はこんな感じに表示されますよね↓
しかし、
- プラグインでURLをいじった場合
- 外部リンクの場合
にはこれが適応され無いんですよね、、トホホ
そこで今回は私も実際に利用している、上記の場合でもブログカードが表示されるプラグインとその設定を紹介します！
簡単にできるんで5分もあれば余裕ですよ！
(たぶんこの細かい設定紹介してるのここだけやと思います！)
JINのブログカードを外部リンクに適応するためのプラグイン
今回ご紹介するのはPz-LinkCardというプラグインです！
こちらはリンクをカード形式で表示することができるプラグインです！
しかし、設定しないとデザイン的にイケてなく全然使えないんですよ。。。
こんな感じです笑
でも安心ください！設定を少し変えてあげることで
こんな感じにすることが出来ます！！
↓スマホでの表示
↓PCでの表示
正直パット見の見分けはつかないですよね！
プラグインの設定
設定は2つ必要です。
- プラグインの設定を変更する
- 直接CSSを変更する
ではそれぞれ順追って説明します。
プラグインの設定を変更する
①プラグイン > Pz-LinkCard > 設定 でPz-LinkCardの設定ページに行きます。
こんなページです。
②設定ページの表示の設定を変更します。
このように変更してください！
(設定の説明↓)
| サイト情報 | なし |
|---|---|
| 区切り | チェック外す |
| リンク先のURLの表示 | タイトルの下 |
| 記事の情報の枠を付ける | チェック外す |
| 抜粋文を表示する | チェック入れる |
| 内側に影を付ける | チェック外す |
| 影を付ける | チェック外す |
| 角を丸める | チェック外す |
| 枠線の太さ | 適当 |
| CSSリセット | チェック入れる |
| 続きを読むボタン | なし |
| シェア数を表示する | チェック外す |
これでブログカードの基本的な表示条件はOKです！
③次は文字の設定をします。
文字の大きさは別途CSSで設定しますので、ここでは文字の色を好きな色に変更してください！
以上がプラグイン側の設定です！
次はCSSを変更します！
直接CSSを変更する
テーマカスタマイズの追加CSS編集に以下を貼り付けるだけです！
ここで任意にカスタマイズできる部分を2つほど
①ブログカードの左上にあるメッセージの内容
→7行目の文字の中身を書き換える
②ブログカードの色の変更
→11,60,72のカラーコードを変更
以上です！
結構簡単にできると思いますので、ぜひ外部リンクに適応したい方は！
