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

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

くるみ

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

ということで今回は

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

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

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

私と一緒に見ていこう!

くるみ

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

before

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

after

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

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

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

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

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

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

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

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

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

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

CSSを追加する

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

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加
「追加CSS」が最もお手軽にできるよ

くるみ

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

WordPressで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%あたりにとどめておくのが正解かなと思います。

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

お疲れ様!

くるみ

CSSの変更が反映されない場合の対処法

「CSSを追記して保存したにも関わらず反映されないぞ…」となった場合は、以下が原因であることが多いです。

  • キャッシュ系プラグイン
  • プラウザキャッシュ

キャッシュ系プラグインを疑う

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上、JINのブログカードのカスタマイズ方法でした。

他のJINカスタマイズに関しては以下の記事でまとめているので、ぜひ参考にしてください。
JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】

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

コメントを残す