前回の記事で、Simplicity2でのブログカードの使い方についてご紹介しました。
ブログカードとは、サイト内のある記事にリンクを貼る場合に、アイキャッチ画像（サムネイル）、タイトル、記事の抜粋をカード型にして表示させるものです。
テキストリンクよりもおしゃれに見せることができ、読者の目にとまりやすくなります。
もっとも、文字が多いサイトの場合、記事の抜粋（100文字程度）までブログカードに表示させると、ごちゃごちゃした感じで余計に文字の圧迫感が増してしまいます。
実際記事の抜粋部分まで読んでいる人はどのくらいいるのか分かりませんが、少なくとも私は読みません。
まずタイトルを見て、気になればクリックしちゃいますので、個人的には抜粋部分は要らない、見た目はすっきりさせたいと思っています。
そこで、Simplicity2のブログカードの抜粋を非表示（①）にするとともに、非表示にした結果アンバランスになったブログカードの以下の点を修正していきたいと思います。
②カードの横幅・高さを調整してコンパクトにする
③タイトルの大きさ、色を変更する
④記事の日付を消す
⑤サイトロゴを右下に表示
⑥アイキャッチ画像下の余白を少なくする
ブログカードの抜粋を非表示に！
デフォルトでは記事の抜粋（概要）が以下のように表示されます。
Simplicity2のブログカードの抜粋を非表示にするには、子テーマのスタイルシート（style.css）に、以下のコードを記述すればＯＫです！
/* ブログカードの抜粋非表示 */
.blog-card-excerpt {
display:none;
}↓
すっきりしましたね。
ブラウザのキャッシュをクリアにしてみてください。
Chromeを例にすると、「設定」→「閲覧履歴データを消去する」→「キャッシュされた画像とファイル」にチェックを入れ、「データを消去」をクリック。
ブログカードの横幅をコンパクトに！
ブログカードの横幅は、デフォルトでは500pxとなっています。
これをもう少しコンパクトにしてみたいと思います。
子テーマのスタイルシート（style.css）で、横幅の指定をします。ここでは横幅を400pxに変更しています。また、ついでにブログカードの高さを145px→100pxに変更、背景色を灰色に変更しています。
/* ブログカードの横幅・高さの調整、背景色 */
.blog-card{
width: 400px;
min-height:100px;
background-color:#f5f5f5
}↓
横幅が狭くなり、コンパクトになりました！
ブログカードのタイトルの大きさ・色の変更
横幅をコンパクトにしても、アイキャッチ画像とタイトルのバランスがいまいちですね。そこで、タイトルの大きさを大きくしてみましょう。ついでに、目立つようにタイトルの色をリンクでよく使われる青色に変更してみます。
子テーマのスタイルシート（style.css）で、文字の大きさと、文字の色を指定します。
/* ブログカードのタイトルの色 */
.blog-card-title a{
font-size: 1.1em;
color: #0000ff;
}↓
タイトルの文字が大きくなり、青色に変わっています。
ブログカードの記事の日付を消す
右下に表示されている記事の日付はそれほど必要でないと考えるため、消してみたいと思います。
[ダッシュボード]－[外観]－[カスタマイズ]－[ブログカード（内部リンク）]をクリックします。
日付表示の項目で、「表示しない」を選択し、「公開」ボタンをクリックします。
↓
右下の日付が消えました！
ブログカードのサイトロゴをカード右下に！
デフォルトでは、サイトロゴはカードの左下に表示されます。抜粋を非表示にしたことで右側に空白ができましたので、サイトロゴを右下にもってきたいと思います。
子テーマのスタイルシート（style.css）で、サイトロゴの位置を指定します。
/* ブログカードのサイトロゴを右下に */
.blog-card-site{
float: right;
}↓
サイトロゴが右下に移動しました！
アイキャッチ画像下の余白を小さく！
だんだん私が理想とする形に近づいてきました。
最後に、アイキャッチ画像下の余白が上部の余白に比べて広くバランスが悪いですので、調整したいと思います。
子テーマのスタイルシート（style.css）で、アイキャッチ画像下の余白の大きさを指定します。一応ここでは数字を「-8px」としましたが、バランスが悪ければ数字を変えて試してみてください。
/* ブログカードのサムネイル下の余白 */
.blog-card img.blog-card-thumb-image{
margin-bottom: -8px;
}↓
パソコン上では、まだ少しアイキャッチ画像下の余白が広く見えますが、下の画像のようにスマホで確認するとちょうどよいバランスになります。
今やスマホでの閲覧者は７～８割にのぼりますので、スマホでの見え方が最も重要になります。しっかりとスマホでも確認しましょう。
まとめ
ブログカードの抜粋を非表示にしてもっとすっきりとさせたい方は、一度試してみるとよいと思います。
他にも、もっと装飾をしてカスタマイズしたブログカードの作り方を紹介しているサイトもありますが、個人的にはシンプルなものが好きですね。
