トップページの記事一覧を2カラムにするflexboxを使った簡単な方法です。(はてなブログpro限定)

設定でトップページの表示形式を一覧形式に設定している人向けの限定記事です。

なので、はてなブログpro限定の記事となります。

 

この記事は、次にステップアップしております。こちらをご覧下さい。

 

 

とにかく簡単に無難な方法で実現します。実装するCSSもわずか数行のみです。

こちらが何かゴリゴリ指示する訳でなく、デザイン実装に触れず、flexboxを使って並べてもらうだけです。

 

 トップページの記事一覧を超簡単に2カラムに出来ます。

CSSはこれだけ、これをデザイン設定のデザインCSSに追加します。

.archive-entries {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.archive-entries .archive-entry {
width: 48%;
}

こんな感じで、記事一覧が2カラムになります。

※chomeのデベロッパーツール、iPadエミュレーターの方でも一応確認、毎度この関連をやると、他のデバイスでもOKなのか確認が大変ですw

f:id:tommyoctopas:20170907183417j:plain

 

解説

記事一覧の1記事のコンテンツが、archive-entryという要素となっております。

これを束ねてる一覧の親玉がarchive-entriesという要素です。

親玉のarchive-entriesにflexboxを使わせて、各記事のarchive-entryを再配置させます。

記事の幅を48%に指定しておけば、100%枠内に2カラム並ぶ計算です。残り2%は記事間の余白の意味合いです。

つまり3カラムにしたければ、32%ぐらいでしょうか

justify-content: space-aroundは幅内で均等割り当ての指定です。デフォルトだと左へぴったりと寄せられるのを避ける為です。

 

※macが無いので、macでうまく表示されているのか解らず不安です。cssの -webkit-部分がapple系デバイス対応の記述です。もしよろしくれば、apple系デバイスがOKかNGか、はてなブックマークかコメントを頂ければ助かります。対応したいと思います。

 

スマフォ表示(レスポンシブ設定)の場合は、1カラムで表示させたい時

このCSSを追加して下さい。スマフォの時だけ1カラム表示になります。

@media screen and (max-width: 600px) {
.archive-entries .archive-entry {
width: 100%;
}
}

 

こんなレイアウトも出来ます。

実はこれもflexboxで、わずか数行のCSSで出来ます。

各記事要素のarchive-entry内をflexboxで、縦に並べるだけで出来ちゃいます。

これによりサムネイルがワイドになり、文書の回りこみも解消されます。

これは次回の記事で取り上げたいと思います。予告内容としましては、さらに左フレームの固定余白と取っ払い、3カラムが可能かどうかの試みです。とにかく簡単に最小のCSSでスマートに実現していきたいと思います。

2カラムですが、実装は完了しています。どんな感じか、ご覧になる場合は、下のリンクの記事一覧をご参照下さい。

(50件の記事一覧が約半分ぐらいのスクロール量で参照可能になったと思います。)

記事一覧 - 神戸グルメゲリラ

 

前回の記事、flexboxを使った2つ画像の簡単な並べ方から、さらに応用で、画像だけでなく記事一覧も簡単に並べ替える事ができますよ!でした。

それではまたね(^^)/

 

tommyoctopas.hatenablog.com