現在私も使っている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のカラーコードを変更
以上です!
結構簡単にできると思いますので、ぜひ外部リンクに適応したい方は!