スポンサーリンク

【Cocoon】縦方向に並んだ時にブロックの上下が逆になる2カラムボックスをつくる

アイキャッチ Cocoonカスタマイズ

WordPressのテーマCocoonで、2カラムレイアウトを使用した際の表示調整の例です。

Cocoonの2カラムレイアウトブロックは、スマホなどの画面の小さい端末で表示したときに表示内容が収まるよう、自動的に2つのカラムが立て並びに調整されます。

この際、2カラムの両方の内容がテキストであるような場合であればあまり問題はないのですが、テキストと挿絵のようなレイアウトに使っていた場合、ちょっと問題になることがあります。

例えば、下記の画像とテキストをそれぞれのカラムに配置した2カラムレイアウトを使うような場合です。

2カラムを複数並べ、各行で「画像」と「テキスト」の左右の配置を入れ替えるようなレイアウトにした場合、スマホで見ると以下のように「画像」「画像」「テキスト」「テキスト」と並んでしまいます。

これを「画像」「テキスト」「画像」「テキスト」と並ぶようにするには以下を記述します。

コンテンツの編集画面で、対象となる「2カラム」のブロックタブに表示される「高度な設定」→「追加CSSクラス」ボックスに「inverted」と入力してページを保存します。

テーマエディタなどから「style.css」ファイルに以下を追記します。

@media screen and (max-width: 599px) {
  .inverted {
    flex-direction:column-reverse!important;
  }
}

表示が変更されます。

お使いのスキンなどにより折り返しが発生する画面幅の指定(メディアクエリ「@media screen and (max-width: 599px)」の部分)が異なる場合がありますので、うまく変更されない場合は2カラムスタイルに指定されているメディアクエリの値を確認してみてください。

WordPress&Cocoonのお悩みにお答えします

クラベルではWordPressのブログサイト構築、Cocoonテーマの導入やカスタマイズに関するご相談を承っております。

お困りの方はぜひ一度お問い合わせください。また、現在ココナラをつかったサービス出品も始めてみました。お悩みおひとつの解決からお手軽にお申込みできますので、こちらもぜひあわせてご覧ください。

最短当日★ワードプレスの疑問質問トラブル解決します ご相談無料!初心者歓迎!優しく丁寧、徹底的にサポートします!
Cocoonテーマサイト構築&カスタマイズします ご相談無料★公式サポート対象外もOK!プログラミングはお任せ
CocoonカスタマイズWeb開発
お読みいただきありがとうございました。
最後に「いいね!」をいただけると大変励みになります。
最新情報をお届けします。
クラベルをフォローする
スポンサーリンク
この記事を書いた人
クラベル

Webサイト構築、Wordpressのカスタマイズやphpプログラミングなどやってます。BPM(ビジネスプロセス管理)、BPR(業務改革)コンサルなどにも従事。世の中すべてピタゴラ装置をモットーに自動化します。ブログは省エネ運営中。Cocoonカスタマイズやゲーム、ガジェットの話題など。

プロフィール詳細、お仕事のご依頼はこちら

クラベルをフォローする
クラベル

コメント

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