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 のカラム分割を使っていなかったからです w
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 にしただけです w
480px 以下にも Gutenberg の 2 カラム用のクラスが追加してありますが、 これをしないとスマホ縦画面でも2カラムになります ♪
コメント