トップページの記事一覧で、本文の一部が表示されてるデザインがなんとも気に食わなかったので、カード形式のデザインに変更しました！
今回はあいす(id:sera1098)さんの記事を参考にさせてもらいました。ありがとうございました！
一応、後世のはてなブロガーのために、カード形式にデザイン変更するためのコードを貼って軽く解説しておきます。
はてなブログのトップページでカード形式で記事表示するコード
トップページの表示形式変更
まずは、設定→詳細設定の画面で、トップページの記事表示形式を「一覧表示」にし、トップページの記事数を偶数に設定しておきましょう。（記事数が奇数だと最下部のカードの数が左右揃わないので、見栄えが悪いです。）
デザインCSSにコードを追加&調整
次に、デザイン→カスタマイズ→デザインCSSのCSSを記載できる箇所に以下のコードを貼り付けます。
/** カードスタイル **/ .page-index .archive-entries{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } /*カード*/ .page-index .archive-entry{ background :#f9f9f9; /*カードの背景*/ width: 47%; /*横幅（２カラム）*/ padding-top:210px; /*アイキャッチの分+10pxあける*/ padding-left:7px; /*左に間隔*/ padding-right:7px; /*右に間隔*/ padding-bottom:10px; /*下に間隔*/ position: relative; } /*記事タイトル*/ .page-index .entry-title{ padding : 5px 0px 0px 5px; /*タイトルの上下に間隔*/ } /*記事の概要*/ .page-index .entry-description{ display : none; } /*アイキャッチのサムネイル*/ .page-index .entry-thumb{ width: 275px; /*アイキャッチサムネイル画像の横幅（要調整）*/ height: 220px; /*アイキャッチサムネイル画像の縦幅（要調整）*/ } /*アイキャッチ*/ .page-index .entry-thumb-link{ display: block; background-position: center center; background-size: cover; position: absolute; top: 0; left: 0; } /*日付*/ .page-index .date{ padding-top:10px; /*上に間隔*/ padding-left:10px; /*左に間隔*/ } /*カテゴリ*/ .page-index .archive-entries .categories { position :absolute; top:0; /*上に配置*/ left:0; /*左に配置*/ z-index:1; /*アイキャッチの上に配置*/ } /*はてなスター*/ .star-container { display : none; }
これで、あとは「変更を保存する」ボタンを押すことで、カード形式に変わるはずです。サムネイル画像のサイズがおかしいなどの場合は調整していきましょう。それぞれのコードの内容を簡単に説明していきます。
↑ カード形式にできてますね！
カード形式記事表示CSSのコード解説
ここからは、上記のコードを軽く解説しておきます。困ったらここを見てコードの該当箇所をチューニングしてください。
カードの調整
/*アイキャッチのサムネイル*/ /*カード*/ .page-index .archive-entry{ background :#f9f9f9; /*カードの背景*/ width: 47%; /*横幅（２カラム）*/ padding-top:210px; /*アイキャッチの分+10pxあける*/ padding-left:7px; /*左に間隔*/ padding-right:7px; /*右に間隔*/ padding-bottom:10px; /*下に間隔*/ position: relative; }
「background :#f9f9f9;」で薄灰色のカードの背景色をつけているので、自分のサイトのイメージデザインに合わせて変更しましょう。
アイキャッチのサムネイルのサイズ調整
/*アイキャッチのサムネイル*/ .page-index .entry-thumb{ width: 275px; /*アイキャッチサムネイル画像の横幅（要調整）*/ height: 220px; /*アイキャッチサムネイル画像の縦幅（要調整）*/ }
こちらのwidthとheightの値を調整して画像のサイズを調整しましょう。
はてなスターの調整
/*はてなスター*/ .star-container { display : none; }
こちらの箇所を削除すれば、はてなスターは表示されなくなります。表示したくないなと思ったら、こちらを消してしまいましょう。
はてブの調整
/*はてぶ*/ .archive-entry-body { display : none; }
こちらのコードを追加すれば、はてブを表示しなくすることもできます。僕は、はてブを積極的に押して欲しいので残しています。
以上、これらを調整すればある程度は自分のサイトに最適化したトップページが作成できるはずです！
まとめ
カード形式は「記事の概要確認できる×一画面にできるだけ多く記事表示する×クリックできる箇所の最大化」という目的に適していると思っているので、今回の変更を元にPVがめちゃくちゃ下がるなどなければ、このデザインのままでいこうと思います。
はてなブログの基本設定はこちらの本が参考になるのでオススメです。
