ブログ運用

テーマJINのブログカードを外部リンクに適応する方法(WordPress)

 

現在私も使っているWordpressのテーマJIN

デザインが綺麗でいいですよね!

 

 

そんなJINの魅力でもあるブログカードのデザイン!

基本はこんな感じに表示されますよね↓

 

 

【ブログ運営報告】雑記ブログ1ヶ月!読まれる記事の傾向と考察。 雑記ブログを1ヶ月と少し運用してみて、記事数も200記事近くなってきたので、ここで一旦読まれる記事と読まれない記事の傾向...

 

 

しかし、

 

  1. プラグインでURLをいじった場合
  2. 外部リンクの場合

 

にはこれが適応され無いんですよね、、トホホ

 

 

 

そこで今回は私も実際に利用している、上記の場合でもブログカードが表示されるプラグインとその設定を紹介します!

簡単にできるんで5分もあれば余裕ですよ!

(たぶんこの細かい設定紹介してるのここだけやと思います!)

 

 

 

JINのブログカードを外部リンクに適応するためのプラグイン

 

 

今回ご紹介するのはPz-LinkCardというプラグインです!

 

 

こちらはリンクをカード形式で表示することができるプラグインです!

しかし、設定しないとデザイン的にイケてなく全然使えないんですよ。。。

こんな感じです笑

 

 

 

 

でも安心ください!設定を少し変えてあげることで

 

 

こんな感じにすることが出来ます!!

 

 

 

↓スマホでの表示

↓PCでの表示

 

正直パット見の見分けはつかないですよね!

 

 

プラグインの設定

 

設定は2つ必要です。

 

  1. プラグインの設定を変更する
  2. 直接CSSを変更する

 

ではそれぞれ順追って説明します。

 

 

プラグインの設定を変更する

 

 

①プラグイン > Pz-LinkCard > 設定 でPz-LinkCardの設定ページに行きます。

こんなページです。

 

 

 

②設定ページの表示の設定を変更します。

このように変更してください!

 

 

(設定の説明↓)

サイト情報なし
区切りチェック外す
リンク先のURLの表示タイトルの下
記事の情報の枠を付けるチェック外す
抜粋文を表示するチェック入れる
内側に影を付けるチェック外す
影を付けるチェック外す
角を丸めるチェック外す
枠線の太さ適当
CSSリセットチェック入れる
続きを読むボタンなし
シェア数を表示するチェック外す

 

 

 

これでブログカードの基本的な表示条件はOKです!

 

 

③次は文字の設定をします。

文字の大きさは別途CSSで設定しますので、ここでは文字の色を好きな色に変更してください!

 

 

以上がプラグイン側の設定です!

次はCSSを変更します!

 

 

直接CSSを変更する

 

テーマカスタマイズの追加CSS編集に以下を貼り付けるだけです!

 

 

 

ここで任意にカスタマイズできる部分を2つほど

 

 

 

①ブログカードの左上にあるメッセージの内容

→7行目の文字の中身を書き換える

 

②ブログカードの色の変更

→11,60,72のカラーコードを変更

 

 

以上です!

結構簡単にできると思いますので、ぜひ外部リンクに適応したい方は!

ABOUT ME
こたろう
こたろう
音楽が大好きです! エンタメ系の考察記事を多く書いています。 楽しんでくれたら嬉しいです!