会員サイトをリニューアルしました! 新サイトはこちら

スマホのカラム列数設定で"3列”を選びたい < ご要望

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

スマホのカラム列数設定で"3列”を選び...
 
通知
すべてクリア

[解決済] スマホのカラム列数設定で"3列”を選びたい

6 投稿
4 ユーザー
4 Likes
3,846 表示
ロボアークス
(@rukio)
Eminent Member
Topic starter
 

いつもお世話になっております!是非ともご検討いただけないでしょうか。

●要望

記事内の[ブロック]-[カラム設定]-[スマホでの列数設定]は現在1 か 2列ですが、「3列を選択」もしくは追加CSSにて3列以上を設定できないでしょうか

●用途

SWELLのトップページにある「SWELL専用ブロック一覧」みたいにしたり、スマホでも固定ページによるTOPページ作成で3列リスト形式のメニュー一覧などに活用したいためです。

This topic was modified 5年前 by ロボアークス
 
投稿済 : 14/01/2020 2:40 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

コアブロックのカラムで3列表示を選択できる様にするとかなり厳しかったので、別のブロックとして「リッチカラムブロック」というものを開発中です!

いつ実装できる様になるかはわかりませんが、2.0へのメジャーアップデート時、もしくはその直後あたりに実装できるかと思います。

それまでは、申し訳ないですがカラムブロックに個別のクラス名を指定するなどして、CSSで調節していただければと思います。

例えば、添付いただいている画像部分であれば以下のようなCSSを指定しています。

@media screen and (max-width: 559px) {
.swellBlockColumns .wp-block-column {
flex-basis: 30% !important;
padding: 8px !important;
margin: 0 !important;
}
}

※ カラムブロックに"swellBlockColumns"というクラスをつけています

 
投稿済 : 14/01/2020 2:47 am
hibiya365 reacted
ロボアークス
(@rukio)
Eminent Member
Topic starter
 

@ryo

早速のご対応頂きありがとうございます!!早すぎてびっくりしましたm(__)m

試してみますね。まずはご連絡のみにて失礼致します。

 
投稿済 : 14/01/2020 3:15 am
ロボアークス
(@rukio)
Eminent Member
Topic starter
 

@ryo さん

いただいたCSSで動作確認できました、ありがとうございます!

CSSでも十分助かります。

おかげ様でスマホ表示がさらに見やすくできました。リッチカラムとしてテーマ側で対応予定なのも嬉しいです!

This post was modified 5年前 by ロボアークス
 
投稿済 : 14/01/2020 4:38 am
hibiya365 reacted
keke
 keke
(@keke)
Active Member
 

こんばんわ!いつもお世話になっております><

フォーラムの使い方が間違えていたら申し訳ないです><

まだ公開していないサイトなのですが、こちら現在同様の事で現在悩んでおり、

お力をお貸しいただけたら大変ありがたいです><

こちらに記載していただいているCSSを、カラムブロックの追加CSSに入れても

スマホで3列表示にならないのですが、記入の方法が変わった等ございますでしょうか?><

 
投稿済 : 28/04/2021 4:17 pm
しらこ
(@96ssbike)
Prominent Member
 

こちらでいかがでしょうか。

親カラムを選択して「高度な設定」の追加CSSクラスにswellBlockColumnsを追記していただく必要はあります。

@media screen and (max-width: 959px) {
.swellBlockColumns .wp-block-column:not(:only-child) {
flex-basis: 33.3% !important;
padding: 8px !important;
margin: 0 !important;
}
}
This post was modified 4年前 by しらこ

にゃーん .

 
投稿済 : 03/05/2021 2:30 pm
くうか reacted
共有: