初心者向けSTINGER8カスタマイズ 記事一覧をCSSでグリッド二列表示化する

久々にSTINGER8のカスタマイズという事で、以前からやりたいと思っていた記事一覧のグリッド表示化をCSSのコピペだけで簡単に出来るようにしてみました。簡単なだけあってグリッド表示と言っても二列になるだけですが、カスタマイズのバリエーションの一つとして参考にしていただければ幸いです。

STINGER8の記事一覧をグリッド化しよう

いつも前置きが長いですからね、今回は要点を絞っていきますよ？

とりあえず見た目はこんな感じになります。

なかなか良い感じではないかと思いますがどうでしょうか。

CSSはカスタマイザーの 追加CSS から

テーマの編集から直接 style.css に記述してもいいですが、まずはお試しという事でカスタマイザーの追加CSSで動作確認をオススメします。

ダッシュボードから 外観 > カスタマイズを開いて、一番下の追加CSSにコードをコピペしましょう。ファイルを更新しなくてもリアルタイムで結果を確認出来るのが便利ですね。

コピペ用のCSSはこちら

前提条件としてはPC表示と言いますか、画面サイズが768px以上の時だけグリッド二列表示になります。もちろんこの辺は自由に調整していただいて結構ですが、スマホにはちょっと厳しいかなと思ったので一応そのようにしてあります。

以下のコードをコピペするだけで先ほどの画像と同じ状態になります。

@media only screen and (min-width: 768px) {

article .kanren {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

article .kanren dl {
  width: 49%;
}

}

グリッドの幅は article dl だけでもいけそうでしたが、どこかに影響が出ても嫌なので作用させたい部分を明確にする為にこんな感じにしてみました。ちなみに article をつけないとサイドバーの新着記事が崩れますのでご参考までに。

この状態だとサムネイルの下が空いているので、そこに抜粋文を回り込ませたい場合は以下の文も追加して下さい。

article .kanren dt {
  margin: 0 15px 10px 0;
}

article .kanren dd {
  padding-left: 0;
}

これは先ほどのメディアクエリの中に置くとグリッド表示の時だけ回り込みますが、メディアクエリの外に置く事で常に回り込むようになりますので必要に応じて使い分けて下さい。

するとこんな感じになります。

サムネイルの右側のマージンはデフォルトの状態と見た目があまり変わらない感じの数値に、サムネイルの下は適当に設定してあるので（見出しの改行有無で変わってくるので難しいですが）その辺りはレイアウトを見ながら適当にイジっていただければと思います。

関連記事にも対応出来ます

先ほどのコードの article の部分を .st-main に変更すると、関連記事も同じようにグリッド二列表示化する事が出来ます。

この関連記事一覧が

こう、みたいな。

単純にクラスセレクタを置き換えるだけですが、せっかくなのでそのまま使えるように貼っておきますね。

@media only screen and (min-width: 768px) {

.st-main .kanren {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.st-main .kanren dl {
  width: 49%;
}

.st-main .kanren dt {
  margin: 0 15px 10px 0;
}

.st-main .kanren dd {
  padding-left: 0;
}

}

記事一覧グリッド二列表示化は以上です

実際やってみるまでは結構面倒なんじゃないかと思ってましたが、やってみたら意外なくらい簡単に出来るものですね。本当に Flexbox 便利すぎです。

とか言って、またうっかり何かやらかして無ければいいんですけど…

私が最近PHPをイジるのが少し面倒になってきてるのもありますが、やはりCSSだけで手軽に出来るカスタマイズはいいですね。また何か小ネタを思い付いたら紹介してみたいと思います。

それではこの辺で。