Luxeritasのグリッドについて

Question

ワードプレスのテーマ『Luxeritas』のグリッドについての質問です。

現在、グリッドレイアウトをタイル型(最大４列)にしているのですが、画面のサイズを1200px以下の大きさにするとタイルの数が３つになってしまいます。
サイズが1200px以下でもタイルの数を４つにしたいです。

この変更する為、グリッドの設定ファイルを探しているのですが、どこに記述されているのかわかりません。
style.css　や　bootstrap4 や　custom.php などを探してみたのですが…………

もしLuxeritasの構造について詳しく、ご存じの方がいらしたら教えて頂きたいです。
よろしくお願いいたします。

Comments

[退会済みユーザー]

申し訳ないけど、まだやれることがあるように見えます。ゆえに丸投げ低評価に投票しました。
カスタマイズねたのブログ記事も多数あるのだから、実現したいことをどれだけ調べて、試してみたけど、わからなかった、っていう「がんばり」が見えれば、手を差し伸べる人も現れるかもしれません。

[退会済みユーザー]

そして、おそらく実現するのにphpはまったく関係ないものと思います。むしろスタイルシートか？

[mamesuke]

カスタマイズ系のブログなどを多数参考にさせて頂き、二週間ほど(７０時間ほど)試行錯誤して詰まってしまった結果、こちらで質問をさせて頂いたのですが、それらを記述せず言葉たらずだったように思います。
これからはもっと詳しく試したことを書かせて頂きます。ご返信ありがとうございます。
勉強になりました。

Answer 1

レイアウトの変更なら、テーマのファイルを弄らなくても、
テーマに下記からcssを追加するだけで可能です。

• ダッシュボード→Luxeritas→子テーマの style.css
• ダッシュボード→Luxeritas→ カスタマイズ(外観)→追加CSS

その前に、ブラウザのデベロッパーツール等を使って、
初期設定で、どのようなレスポンシブ設定になっているか調べします。

私のブログも Luxeritas を使っているのでタイル型４列の時のCSSを調べてみると下記のようになっていました。

@media (min-width: 1200px){
  #tile-4 .toc, #card-4 .toc {
    max-width: 24.5%;
    width: 24.5%;
  }
}

フレックスボックスを使っているので、幅を25%より少し小さく設定してます。
（25%にすると余白がなくなる）

この1200pxの部分を4列にしておきたい幅まで減らしたものを上記の場所に追加すればいいでしょう。

ちなみに、タイル列数の切り替わりポイントは下記のようになっていました。

スクリーン幅	タイルの列数
1200px以上	4列
768px～1199px	3列
576px～768px	2列
576px未満	1列

変更するなら全体のバランスを考えて変更しないと、おかしなバランスになるのでよくよく考えてくださいね。

Comments

[mamesuke]

hatena19様

ありがとうございます。無事解決できました！
デベロッパーツールも見て使っていたのですが、そもそもデベロッパーツールにも不慣れで目当ての記述を見つけることが出来ていなかったようです。
本当に助かりました。
感謝です。