(blue)」を適用中。Cocoonの2・3カラムをタブレット幅(481~768px)では1カラムにはしないカスタマイズ方法CSSTwitterFacebook5はてブ1Pocket2LINEコピー2018.07.06この記事は約2分で読めます。Cocoonの「2カラム」「3カラム」レイアウトでは、基本的に「タブレット幅(768px以下)」で1カラムになるような仕様になっていますデモ動作はこちら。投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。wp-cocoon.com2019.06.06ただ、中には「タブレット幅(768px以下)でカラムを保ちスマホ幅(480px以下)で1カラムにする」というような動作にしたい方もおられるかと思います。いった場合のCSSカスタマイズ方法を紹介します。スポンサーリンク目次カスタマイズ方法デモ2カラム3カラムカスタマイズ方法カスタマイズを行うには、子テーマのstyle.cssに以下のコードを貼り付ければOKです。}}スポンサーリンクデモ当ページだけに上記のカスタマイズを反映させてあります。デベロッパーツールなどのモバイル表示確認機能などで、以下の動作を確認してみてください。2カラム吾輩は猫である吾輩は猫である。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。走れメロスメロスは激怒した。かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。3カラムセロ弾きのゴーシュゴーシュは町の活動写真館でセロを弾く係りでした。上手でないという評判でした。ツモシヅカニワラッテヰル三四郎うとうととして目がさめると女はいつのまにか、隣のじいさんと話を始めている。このじいさんはたしかに前の前の駅から乗ったいなか者である。このカスタマイズが適用されているのは、当ページのみです。CSSスポンサーリンクわいひら無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。わいひらをフォローする178シェアするTwitterFacebook5はてブ1Pocket2LINEコピーわいひらをフォローする178スポンサーリンクおすすめレンタルサーバーカラフルボックス性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。○サーバ引っ越しオプションあり(有料)サービス運営期間:1年6ヶ月1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。クーポンコード:PK4JK4RJクーポンの使用方法はこちら。安定感抜群のサーバーです。急激なアクセス変動がないアフィリエイトサイトに向いています。詳細ページエックスサーバーMixHostプラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。WINGとにかく速い。サイトに表示スピードを求めるならココ。WINGJETBOY格安な値段で始められる高機能サーバーです。性能も備えつつ最安ならここ。サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。詳細ページJETBOYわいひらCocoon関連記事CSS吹き出しの文字サイズを端末ごとに切り替えるCSS記述Cocoonの吹き出し機能の文字サイズを、PC、タブレット、スマホ毎に切り替えるCSSの紹介です。Cocoonを最新版にアップデートしてください。古いバージョンだと、うまくいかない場合があります。記事関係のウィジェットで投稿日・更新日を表示させるためのCSSサンプルです。固定ページのSNSボタンを非表示にするCSS設定方法です。特定のページ毎の設定方法もあります。2018.04.06CSS拡張スタイル「タブボックス」のラベルを日本語化するカスタマイズ方法Cocoonの英語表記のタブボックスラベルを日本語化する方法です。吹き出しのセリフ部分の幅を0.6.5以前のように揃える方法。2018.06.04CSSCSSでサイトタイトルのフォントサイズ変更するカスタマイズ例サイトタイトル(テキスト)の微調整用のCSSコードサンプルです。表示を切り替えるCSS例フロント固定ページで、「非表示にしたいGOが需要が高そうなHTML要素」をCSSで見えなくする方法です。18:31初めまして。cocoon非常に使いやすく利用させていただいております。一点、PCとSPのインデックスを別にしたいと考えておりまして、cssなどで変更可能であればご教授いただければとご連絡させていただきました。具体的にはPCは「縦型カード3列」、SPは「エントリーカード(デフォルト)」に変更したく。検索してみましたが方法が見つからず...お忙しい中申し訳ございませんがよろしくお願いします。20:38それを100%レスポンシブで実現するには、メディアクエリを書いてCSSを当てていくしかないと思います。100%レスポンシブではなくPHP側で出力を変更するのであれば、それほど難しくはないかもしれません。やり方を書くにしてもコメント欄では機能が弱いので、コメント案内にもあるように、フォーラムに書き込んでいただけると助かります。https://wp-cocoon.com/community/※CSSで書く方法は、かなり大変な動作確認作業が必要なため、サポート対象外のものとさせていただきます。09:38わいひらさん早速のご回答ありがとうございます!また、質問する場所が異なり申し訳ございません。お手数おかけしました。引き続きよろしくお願いします。20:15やり方を書き込んでおきました。一応、同様のカスタマイズ目的の検索でこのコメントが引っかかった場合のためにリンクも貼っておきます。コメントをキャンセルメールアドレスが公開されることはありません。フォーラムにお願いします。Cocoon設定の「スキン」タブで変更できます。新着記事Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】2019.09.092020.01.05Cocoon既知の不具合。