どうも、りょうかん（@ryokan_1123）です。
ブログ運営歴５年目。アフィリエイトとWEBライティングで生計を立ててます。
当ブログでは、2018年4月よりワードプレスの有料テーマ「JIN」を使ってきました。
≫ WordPressのテーマを「JIN」に変更しました！メリットとデメリットをまとめておきます。
サイト構築の初心者でも簡単にオシャレなブログが作れる優秀なテーマなんですが、CSSを使って独自性のあるデザインに変更することも容易です。
細々としたカスタマイズを繰り返してきているんですが、今回は『ブログカード』の見栄えを向上させてみました。
というわけで、この記事では【ワードプレステーマ「JIN」でブログカードの見栄えを良くするために実施した実装例】を紹介していきます。
紹介する方法は、カスタマイズの［追加 CSS］にコピー＆ペーストするだけで実装できるので、ぜひ試してみてください。
ブログカードの見栄えを良くするカスタマイズ一覧
この記事で紹介するカスタマイズ方法は下記の３つ。
① タイトル文字をリンク色に変更
② 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行目で変更することもできます。
スマホ表示でのカスタマイズ前後の変化も紹介します
PC表示のブログカードの変化を紹介したので、スマホ版の違いも載せておきます。
カスタマイズ前のブログカード
デフォルトでのブログカード(スマホ版)でもかなりシンプルです。このままでも問題ないと思う方も多いかもしれません。
カスタマイズ後のブログカード
この記事で紹介した３つのカスタマイズをした後のブログカード(スマホ版)ですが、「続きを読む」の表記は無くてもいいかも？と感じます。この辺は好みで設定してみてください。
まとめ：デザイン以外の部分にも意識を向けよう！
ブログ運営をしていると「細部までこだわる人が最後は勝つ」と痛感させられます。デザインでも細かいところまでカスタマイズする気持ちは大事です。
そして、デザイン面だけでなく【記事(コンテンツ)の中身】や【タイトルの付け方】などまで意識を巡らせられると、より良いブログ運営ができるようになります。
長期的に運営していくためにも、コツコツとメンテナンスをやっていきましょう。
「ブログで稼ぐための記事の書き方のコツ」や「クリック率を劇的に改善するタイトルの付け方13選」も合わせて参考にしてみてください。
というわけで、今回の記事は以上です。
では、また！
【最新版】無制限モバイルWiFiルーター26社を徹底比較してベストを決めた
