Gutenberg のカラムブロックをタブレット幅(481~768px)では1カラムにはしないカスタマイズ

Cocoon 設定→管理者画面→管理者パネル とても便利で重宝させてもらってます

その内の Responsinator チェックをすると 上記サムネイルの様にカラムで作成したページの見栄えが良くないのでカッコよくしたい

 /*768px 以下 */ 
 @media screen and (max-width: 768px){ 
   .column-wrap{ 
     flex-direction: row; 
   } 
 } 

 /*480px 以下 */ 
 @media screen and (max-width: 480px){ 
   .column-wrap{ 
     flex-direction: column; 
   } 
 } 

提示された通り css を追加します

がダメ 何故か? Cocoon のカラム分割を使っていなかったからです

WordPress 新参者の thx.jp がコンテンツを作り始めたのは 丁度 Gutenberug が出始めた頃です

今後ブロックエディタが主流になっていくのであれば 如何に Cocoon 謹製ショートコード群が便利であろうとも Classics エディタよりもブロックエディタに慣れるべき と決意したからです

今回はそんなニッチな利用者の Tips です

  • カスタマイズは自己責任でお願いします。
  • wp-cocoon.comサイトのサポート対象外となります。
スポンサーリンク

カスタマイズ方法

Cocoon Child: スタイルシート  (style.css)

Cocoon Child スタイルシート  (style.css) に下記を追加します

 /*768px 以下 */ 
 @media screen and (max-width: 768px){ 
	 .column-wrap, 
	 .wp-block-columns.has-2-columns { 
		 flex-direction: row; 
		 flex-wrap: nowrap; 
	 } 
 } 

 /*480px 以下 */ 
 @media screen and (max-width: 480px){ 
	 .column-wrap, 
	 .wp-block-columns.has-2-columns { 
		 flex-direction: column; 
	 } 
 } 

わいひらさんが提示して下さった css Gutenberg の2カラム用のクラスを追加し nowrap にしただけです

480px 以下にも Gutenberg 2 カラム用のクラスが追加してありますが これをしないとスマホ縦画面でも2カラムになります♪

コメント