【JIN】ブログカードをより読みたくなるデザインにするカスタマイズ

くるみ

JINのブログカードさ、「さりげなく設置してる感」が欲しいんだよね

ということで今回は

JINを使っているがブログカードのをもっといい感じにしたい
「あわせて読みたい」のデザインがあまり気に入っていない
内部リンクのクリック率を改善してサイトの回遊率を高めたい

という方に向けて、JINのブログカードカスタマイズ方法をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

お品書き

ブログカードの完成イメージ
JINのブログカードのカスタマイズ方法
- バックアップは忘れずにしておこう
- CSSを追加する
CSSの変更が反映されない場合の対処法
- キャッシュ系プラグインを疑う
- プラウザのキャッシュを削除
まとめ

ブログカードの完成イメージ

before

after

今回はどんなテーマカラーのサイトにも合うように、シルバーで統一してみました。

記事タイトルをリンクと同じ青色にすることでクリック率増加(を狙える)
「あわせて読みたい」をポップで可愛い感じに
アイキャッチ画像に薄いドロップシャドウをつけることで際立つように

落ち着いた色合いにすることで「さりげなく設置してる感」を演出し、テキストリンクと比べると視線移動を止めてしまいがちというブログカードのデメリットを緩和(することを目指)しています。

JINのブログカードのカスタマイズ方法

今回やることはCSSを追加するだけ。それ以外は特にすることはありません。

バックアップは忘れずにしておこう

早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。

「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

CSSを追加する

以下のどれかの方法でCSSのコードをコピペします。

「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

【初心者向け】WordPressでCSSを編集する方法を徹底解説

コードはこちら

.blog-card{
  border:solid 2px #e0e0e0!important;
}
.blog-card-thumbnail {
  overflow: initial;
}
.blog-card-thumbnail img{
  filter:drop-shadow(0 3px 6px rgb(0 0 0 / 5%)); /* 影の濃さ(要調整) */
}
.blog-card-hl-box{
  background-color:#fff!important;
  left:10px;
  width:183px;
}
.blog-card-hl-box:before,.blog-card-hl-box:after{
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 2px;
  top: 50%;
  border-radius: 3px;
  background-color: #d8dae1;
  content: "";
}
.blog-card-hl-box:before{
  transform:rotate(50deg);
  left:0;
}
.blog-card-hl-box:after{
  transform:rotate(-50deg);
  right:0;
}
@media only screen and (max-width: 480px) {
  .blog-card-hl-box {
    width: 155px;
    left:0px;
  }
  .blog-card .blog-card-hl:after {
    left: 15px;
  }
}
.blog-card .blog-card-hl:after{
  color:#c0c0c0!important;
  font-size:1.15em;
  padding 0 2px;
  width:120px;
  left:26px;
}
.blog-card .jin-ifont-post:before{
  content:'';
}
.blog-card-excerpt{
  display:none;
}
.blog-card-title{
  color:#428bca;
  text-decoration:underline;
  line-height:1.5;
  vertical-align:middle;
}

「影の濃さ(要調整)」とあるところの値(5%)をいじってあげることで、ドロップシャドウの色の濃さを変えることができます。

ですがあまり濃くしすぎてもアレなので5〜15%あたりにとどめておくのが正解かなと思います。

その影の調整も終えればカスタマイズは終了。お疲れ様です。

お疲れ様！

くるみ