ブログ運営 - WordPress設定

【JINカスタマイズ】ブログカードの見栄えを良くする方法【追加CSS】

⏱ この記事は約 6 分で読めます

どうも、りょうかん(@ryokan_1123)です。
ブログ運営歴5年目。アフィリエイトとWEBライティングで生計を立ててます。

当ブログでは、2018年4月よりワードプレスの有料テーマ「JIN」を使ってきました。
≫ WordPressのテーマを「JIN」に変更しました!メリットとデメリットをまとめておきます。

サイト構築の初心者でも簡単にオシャレなブログが作れる優秀なテーマなんですが、CSSを使って独自性のあるデザインに変更することも容易です。

細々としたカスタマイズを繰り返してきているんですが、今回は『ブログカード』の見栄えを向上させてみました。

「ブログカード」とは?
サムネイルやタイトルなどをカードのような形で表示するリンクのこと。読者の目を引くのでクリック率の向上が期待できます。

というわけで、この記事では【ワードプレステーマ「JIN」でブログカードの見栄えを良くするために実施した実装例】を紹介していきます。

紹介する方法は、カスタマイズの[追加 CSS]にコピー&ペーストするだけで実装できるので、ぜひ試してみてください。

ワードプレステーマ「JIN」のみで動作確認をしています。他のテーマで正常に動作する保証はできませんので、ご注意ください。

ブログカードの見栄えを良くするカスタマイズ一覧

この記事で紹介するカスタマイズ方法は下記の3つ。

① タイトル文字をリンク色に変更
② PC表示で記載される説明文を削除
③ 右下に「続きを読む」を追加

それぞれ変更後の画像も載せておくので、参考にしてみてください。

ちなみに、カスタマイズ前(デフォルト)のブログカードは、下の画像のように表示されています。

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

これでも十分デザイン性は高いんですが、よりクリック率を高めるためにカスタマイズをしていきます。

 

カスタマイズ① タイトル文字をリンク色に変更

まずは、デフォルトで 黒色 で表示されているタイトル文字を リンク色 に変更するカスタマイズです。

文字色が黒のままだとリンクだと思わずにスルーしてしまう人もいるので、記事内のリンクと同じ色にしておくことで「これはリンクですよー」とアピールができます。

タイトル文字をリンク色に変更したブログカード
/*ブログカードのタイトルをリンク色に変更*/
.blog-card-title {
		color: #327bb7;
		text-decoration: underline;
	}

各サイトで指定しているリンク色のカラーコードに設定を変えて使ってみてください

アンダーラインが不要だと感じる人は、4行目の [text-dexoration] の項目を削除すればOKです。

 

カスタマイズ② PC表示で記載される説明文を削除

続いて、PC表示で記載されてしまう「説明文」を削除するカスタマイズです。

各記事で『description設定』をしっかり指定していれば問題ないですが、記載していない場合は本文の冒頭が表示されてしまうのであまり好ましくないかなと。

説明文を削除したブログカード
/*ブログカードの説明文を消す*/
.blog-card-excerpt{
		display:none;
}

シンプルになりすぎな感覚もありますが、読者にとっては本文と関係ない文章はない方が良いと判断して削除する形を選びました。

ちなみに、スマホ表示ではデフォルトで記載がないので変化はありません。

 

カスタマイズ③ 右下に「続きを読む」を追加

最後に、ブログカードの右下に「続きを読む」を追加するカスタマイズです。

説明文を削除したことでシンプルになりすぎたので、見栄え的な感覚で追加しました。

右下に「続きを読む」を追加したブログカード
/*ブログカードに「続きを読む」を追加*/
a.blog-card{
		padding-bottom:40px;
}
a.blog-card{
		position: relative;
}
a.blog-card:after{
		position: absolute;
		font-family: sans-serif,'Font Awesome 5 Free';
		content:'続きを読む \f101';
		font-weight: bold;
		right:10px;
		bottom: 10px;
		padding:1px 10px;
		background:#ff6868; /*背景色*/
		color:#fff; /*文字色*/
		font-size: .8em;
		border-radius:2px;
}

11行目の [続きを読む \f101] を変更すれば違う表記をすることも可能です。

また背景色はブログカードの色と合わせていますが、好みに合わせて16行目で変更することもできます。

10行目の [font-family] は、CSSで表記できない『≫』を使うために設定しています。(11行目の [\f101] に関与します)
不要な場合は削除してもOKです。

 

スマホ表示でのカスタマイズ前後の変化も紹介します

PC表示のブログカードの変化を紹介したので、スマホ版の違いも載せておきます。

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

デフォルトでのブログカード(スマホ版)でもかなりシンプルです。このままでも問題ないと思う方も多いかもしれません。

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

この記事で紹介した3つのカスタマイズをした後のブログカード(スマホ版)ですが、「続きを読む」の表記は無くてもいいかも?と感じます。この辺は好みで設定してみてください。

 

まとめ:デザイン以外の部分にも意識を向けよう!

ブログ運営をしていると「細部までこだわる人が最後は勝つ」と痛感させられます。デザインでも細かいところまでカスタマイズする気持ちは大事です。

そして、デザイン面だけでなく【記事(コンテンツ)の中身】や【タイトルの付け方】などまで意識を巡らせられると、より良いブログ運営ができるようになります。

長期的に運営していくためにも、コツコツとメンテナンスをやっていきましょう。

ブログで稼ぐための記事の書き方のコツ」や「クリック率を劇的に改善するタイトルの付け方13選」も合わせて参考にしてみてください。

ブログで稼ぐための記事の書き方のコツ【ブログ歴5年の僕が解説します】ブログ歴5年目の僕が、ブログで稼ぐための記事の書き方を5つのステップで解説しました。最初から全部をやるのは難しいかもしれませんが、慣れてくれば息するように実践できますので、参考にしてみてください。ブログはまだまだ稼げるビジネスなので挑戦してみましょう!...
クリック率を劇的に改善するタイトルの付け方13選【効果は実証済み】どうも、りょうかん(@ryokan_1123)です。 ブログ歴5年。アフィリエイトとWEBライティングで生計を立ててます。 ブログ運...

 

というわけで、今回の記事は以上です。

では、また!

ABOUT ME
りょうかん
りょうかん
1990年11月23日 鳥取市生まれ / ブロガー兼WEBライター / 鳥取と熱海の二拠点生活中 / ✍毎日noteを書いてます / YouTubeチャンネルも稼働中 / polca Life / Amazonほしいものリスト
この記事もおすすめ