ブログトップの記事一覧を3列表示にする
久々のwordpressに関する記事ですね
現在wordpressテーマ「stinger5」をカスタマイズして使わせてもらっています。
もともと「stinger5」は1列の一覧表示ですが、【これは！ログ】さんの「Stinger5カスタマイズ！記事一覧をオシャレな写真付き2カラムにする方法、もちろんレスポンシブ対応だよ」を参考にすこし前で2列表示にしていました。2列表示の方法やページ全体の構成はすでに説明していただいているので今回は2列表示したところからの説明をさせていただきます。
それでは3列レイアウトに変更して行ってみます！
「box-sizing」の値いじって3分割にすればいい！
上記参考ページ最後の方にでてくる「box-sizing」のコードを見てみましょう。
#topnews dl{ /*幅の取り方を変える*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width:47%; /*border,paddingまで含めて45.7%*/
margin-left: 0px;
margin-right: 3%;
}
#topnews dt{
width:100%;
}
#topnews dd{
padding: 0 10px 0 10px;
}
この「topnews dl」の後半の注目してください。
widthをmargin-right含めて50%で設定しています。
これはその上にあるbox内で47%のboxと3%のmarginを作るということを表しています。
50%が2つで100%になるので2段表示になりますよね。
これを踏まえて3段表示にするには・・・
#topnews dl{
/*幅の取り方を変える*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width:30.0%;
margin-left: 0px;
margin-right: 3%;
}
100を３では割り切れないので端数が出てしまいますが、簡単に合計33%にしてしまえば３列表示になります。
さすがにそのままではあまりにも一覧が小さくなり過ぎてしまったのでサイドバーのサイズをすこし小さくしましたが、、、
最初2列表示にするときはコピペしかしていなかったので何が書いてあるかわかりませんでしたが、「box-sizing」って本当に便利ですね！
こんなことなら最初から時間をかけて読み解いておけばよかったです笑