フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

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

どうも!フジグチです!

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

見た目が大きく変わる部分としては最新記事を横長のカード型から、記事一覧のようなカード型にして2列表示にしました。以前出したはてなブログ【UnderShirt】スマホ2列表示時に6記事見せるカスタマイズの記事一覧をカード型にするCSSを見て「これって最新記事とかにも使えるんじゃないかな?」と思い作ってみたので、今回はこれを紹介します。

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

アイキャッチについて

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

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

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

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

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

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

最新記事を2列にする

完成イメージ

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

CSSを貼り付ける場所

【PC】
スパナマーク ⇒ デザインCSS ⇒ 枠内に貼り付け

【スマホ】
記事 ⇒ 記事上に<style>~</style>で囲んで入れる

画像サイズを変える

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

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

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

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

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

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

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

カード型にするCSS

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

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

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

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

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

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

個別に設定を変える

全てではなく最新記事はデフォルトの横並びで、注目記事のみ2列表示にしたいという方は個別に設定するセレクタもあります。

上記のCSSの
.urllist-with-thumbnails
の部分を下記のセレクタに書き換えてください。

最新記事 ⇒ .recent-entries

関連記事 ⇒ .related-entries

注目記事 ⇒ .entries-access-ranking

に変えることで個別に割り当てることが出来ます。

まとめ

当ブログはスマホ表示時のみ2列にしていますが、トップページの記事一覧も2列表示にしていたので最新記事も2列にすると若干しつこく感じました。なので当ブログではカードのデザインを若干変えています。

記事一覧は1列で最新記事などは2列にしてメリハリをつけたりすると良いかもしれませんね。

お読み頂きありがとうございました。どなたかのお役に立てば幸いです。

こちらもお読みください