現在デフォルトスキンとして「Season (Summer)」を適用中。

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カラム

セロ弾きのゴーシュ

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

雨ニモマケズ

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

三四郎

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

このカスタマイズが適用されているのは、当ページのみです。
CSS
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

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

  1. masaki より:

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

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

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

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