Cocoonの2・3カラムをタブレット幅(481~768px)では1カラムにはしないカスタマイズ方法

CSS
この記事は約2分で読めます。

Cocoonの「2カラム」「3カラム」レイアウトでは、基本的に「タブレット幅(768px以下)」で1カラムになるような仕様になっています

デモ動作はこちら。

記事内を2カラム・3カラム・4カラムに分ける方法
投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。

ただ、中には「タブレット幅(768px以下)でカラムを保ちスマホ幅(480px以下)で1カラムにする」というような動作にしたい方もおられるかと思います。

そういった場合のCSSカスタマイズ方法を紹介します。

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

カスタマイズ方法

カスタマイズを行うには、子テーマのstyle.cssに以下のコードを貼り付ければOKです。

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

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

デモ

当ページだけに上記のカスタマイズを反映させてあります。

デベロッパーツールなどのモバイル表示確認機能などで、以下の動作を確認してみてください。

2カラム

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

走れメロス

メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。

3カラム

セロ弾きのゴーシュ

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。

雨ニモマケズ

雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ ツモシヅカニワラッテヰル

三四郎

うとうととして目がさめると女はいつのまにか、隣のじいさんと話を始めている。このじいさんはたしかに前の前の駅から乗ったいなか者である。

このカスタマイズが適用されているのは、当ページのみです。

コメント テーマの質問はフォーラムへ

  1. masaki より:

    初めまして。
    cocoon非常に使いやすく利用させていただいております。
    一点、PCとSPのインデックスを別にしたいと考えておりまして、cssなどで変更可能であればご教授いただければとご連絡させていただきました。

    具体的にはPCは「縦型カード3列」、SPは「エントリーカード(デフォルト)」に変更したく。

    色々検索してみましたが方法が見つからず…お忙しい中申し訳ございませんがよろしくお願いします。

    • わいひらわいひら より:

      それを100%レスポンシブで実現するには、メディアクエリを書いてCSSを当てていくしかないと思います。
      100%レスポンシブではなくPHP側で出力を変更するのであれば、それほど難しくはないかもしれません。

      ただ、やり方を書くにしてもコメント欄では機能が弱いので、コメント案内にもあるように、フォーラムに書き込んでいただけると助かります。
      https://wp-cocoon.com/community/
      ※CSSで書く方法は、かなり大変な動作確認作業が必要なため、サポート対象外のものとさせていただきます。

タイトルとURLをコピーしました