はてなブログ最新記事-関連記事-注目記事を2列にするカスタマイズ

どうも！フジグチです！

最近は毎日誰も気付かないような細かい部分のデザインをいじって、カスタマイズの勉強をしています。

見た目が大きく変わる部分としては最新記事を横長のカード型から、記事一覧のようなカード型にして２列表示にしました。

記事一覧をカード型にするCSSのコードを見て「これって最新記事とかにも使えるんじゃないかな？」と思い作ってみたので、今回はこのカスタマイズを紹介します。

はてなブログ最新記事-関連記事-注目記事を2列にするカスタマイズ

アイキャッチについて
最新記事を2列にする
画像サイズを変える
まとめ

アイキャッチについて

最近はアイキャッチに文字を入れているのでサイドバーで画像がトリミングされることを考えて、中央に配置するようにしていました。これが結構ストレスなんですよね。

もうちょっと端まで使えるといい感じになるのにな。。。と思ってもせっかく作ったアイキャッチが切れるのがもったいなくて、無難に中央配置にしてしまいます。

サイドバーのためだけにそんなこと考えるなら、トップページと同じカード型にしてしまえばそんなストレスもなくなりますよね。SNSではトリミングされてしまうこともあるかもしれませんが。

※はてなブログはデフォルトでtwitterカードがラージに設定されています。設定を変えている方はなかなかいないかと思いますが、横並びの小さいカード型に設定を変えていると正方形にトリミングされるようです。
他SNSでもそういうことがあるようなので、このカスタマイズを行ったからといってもアイキャッチが切れなくなるわけではありません。

アイキャッチの画像が切れないか確認したい方はこちらのサイトを使うといいですよ。

アイキャッチ画像サイズチェッカー｜TwitterやFacebookのOGP表示を確認

画像サイズを変える

最初に画像のサイズを変えましょう。デフォルトでは画像サイズが100×100の正方形になっているので

デザイン設定 ⇒ サイドバー ⇒ 最新記事を選び縦横比を１６：９くらいにします。

表示件数も偶数にする方が見た目が整うのでこの時に合わせて偶数にしましょう。

最新記事、関連記事、注目記事を２列にする方法２

1.7倍前後であれば好みで調整して構わないと思います。当ブログでは160×100に設定しました。

これだけでもアイキャッチが切れることがなくなりいい感じですが、これをさらに縦並びのカード型にしていきます。

カード型にするCSS

当ブログは【最新記事】しか載せてないのですが【関連記事】【注目記事】にも同じCSSで反映させることができます。

お使いのテーマや追加したCSSが干渉して上手く表示されないことがあるかもしれません。その場合はご自身で調整をお願いします。

.urllist-with-thumbnails {
    display: flex;
    flex-wrap: wrap; 
} 
.urllist-with-thumbnails li {
    width: calc( 50% - 5px); 
}
.urllist-with-thumbnails li:nth-child(2n) {
    margin-left: 10px; 
} 
.urllist-with-thumbnails li .urllist-image {
    margin: 0 0 4px; 
}

スマホのみ２列表示にする場合

スマホ表示の時のみ２列にしたい方は@media (max-width: 767px){}を下記のように追記してください。

@media (max-width: 767px){ 
.urllist-with-thumbnails { 
    display: flex;
    flex-wrap: wrap; 
}
.urllist-with-thumbnails li { 
    width: calc( 50% - 5px); 
}
.urllist-with-thumbnails li:nth-child(2n) {
    margin-left: 10px; 
} 
.urllist-with-thumbnails li .urllist-image { 
    margin: 0 0 4px; 
} 
}