ブログ

外部リンクもかっこよく!リンクカードを作るプラグイン「Pz-LinkCard」が JINだと浮くのでデザインをいじってみた

ブログテーマのJINを購入しました。私にはもっいないぐらいの高性能で、早くも14800円の元は取れたんじゃないかと買い満足気味の今日この頃。

JINがいいぞって話はまた今度するとして、今回はリンクカードを生成するプラグイン「Pz-LinkCard」のお話。

JINは同じブログ内へのリンクは自動でこんなかっこいいリンクカードにしてくれます、こんな感じに。

あわせて読みたい
富士フィルム XF35F2 XF35F1.4 比較 どちらを買うか悩んでいる方も多いはず、XF35F2とXF35F1.4の比較をお送りします。 まずはスペック比較表から。 XF...

ですが外部リンクをかっこよくしてくれる機能はまだないらしく、今の所はプラグインを使うのが最善手。

私は参考にしたサイトにはリンクカードを生成するプラグイン「Pz-LinkCard」を使っていました。
ですが今回JINに変えたところ、今まであまりに「Pz-LinkCard」そのままのデザインで使っていたため、ダサすぎて異物感パナいんですね。

あまりに「Pz-LinkCard」そのままのデザインだったため、ダサすぎて異物感パナいんですね。

見てのとおり上がJINのリンクカード、下が「Pz-LinkCard」のリンクカードです。

ダサいよね?なんかこのブログテーマ作ってくれた人に悪いので、とりあえずこれをなんとかしようと素人ながらCSSで頑張りました。

あわせて読みたい
富士フィルム XF35F2 XF35F1.4 比較 どちらを買うか悩んでいる方も多いはず、XF35F2とXF35F1.4の比較をお送りします。 まずはスペック比較表から。 XF...

下が今回デザインを修正したリンクカードです。あまり細かなところまではいじってませんが、ある程度デザインは寄せられたかとニンマリしています。

Pz-LinkCardの設定

既に色々いじってる人は一度設定を一度リセットした方が良いかもしれません。

まずはサムネイルの幅を150pxに変更。そのほか影と角丸を無くします。

ブログテーマJIN Pz-LinkCardの設定

CSSの設定

CSSは 外観→カスタマイズ→追加CSS 下のCSSコードを追加。
カード上のコメントは content: "参考にしました"; の箇所を変えて好きなようにどうぞ。

関係ないけどこの「追加CSS」って便利ですね。これブログテーマアップデートしても残ってるのかな?残ってるよね?

以上そんな感じです。
素人が書いたCSSなので至らない部分もあるかと思いますが、よかったら使ってみてください。

それではまた。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA