「メディアと文章」の表示順序を、スマホ表示時のみ逆にする

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #53853
    ACE
    参加者

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】バージョン: 10.10.7
    【お使いのブラウザ】Chrome
    【当該サイトのURL】https://support.acejapan.org/

    ===

    お世話になります。

    「メディアと文章」のブロックで、
    メディアを右寄せのブロック(ここではブロックAとします)と
    メディアを左寄せのブロック(ここではブロックBとします)とを連続させた場合、

    スマホ表示にすると
    ブロックAの文章→ブロックAのメディア→ブロックBのメディア→ブロックBの文章
    という順で表示されると思うのですが、これを
    ブロックAの文章→ブロックAのメディア→ブロックBの文章→ブロックBのメディア
    に変えることは可能でしょうか。

    意図としては、
    ・ブロックBについての説明を文章でした後にそれについての画像を表示させたい
    ・ブロックBのメディアがブロックAのメディアに続くことにより、ブロックBのメディアもブロックAの文章で説明されたことを表すメディアのように見えてしまうことを防ぎたい
    というものです。

    よろしくお願いします。

    0
    #53856
    Kmical Lights
    参加者

    を参考にして、高度な設定にorderのスタイルを追加する事でできると思います。
    divで設定された要素の並び順を変えるので、上手く使えば文章と画像などの要素も自由に並び順を切り替えできると思います。
    お試しください。

    0
    #53859
    ACE
    参加者

    ありがとうございます!

    試してみたのですがうまくいかず、さらに質問させてください。(CSSについての知識はほとんどありません…)

    リンク先にあった追加CSS:

    @media screen and (max-width: 639px) {
    .order-reverse .c-row__col:first-child {
    order: 2;
    }
    }

    は、このまま「高度な設定」にコピペすれば良いでしょうか。
    また、メディアと文章とのどちらの「高度な設定」に追加したら良いでしょうか。

    教えていただけるとありがたいです!

    0
    #53860
    Kmical Lights
    参加者

    CSS記述は追加CSSに追加します。
    管理画面の、「外観」→「カスタマイズ」→「追加CSS」です。

    「メディアと文章」でAとBとして2つ並べていると思いますので、
    そのBの方の「メディアと文章」ブロックの「高度な設定」に
    .order-reverseと追加で記述すれば、Bの方の並びだけを変更できると思います。
    (Aは変更しないと思うのでそのまま何もしません)

    CSSの記述を解説しますと、下記の通りです。

    
    @media screen and (max-width: 639px) { # 639ピクセル以下に囲まれているスタイルを適用する
    .order-reverse .c-row__col:first-child { # c-row__colクラスの最初の要素を…
    order: 2; # 並び順(order)を2番目にする(0から始まるので実際は3番目だが、説明を解りやすく)
    } # order-reverseのスタイルのカッコ閉じ
    } # @mediaのカッコ閉じ
    

    そのため、order-reverseクラスと言ったスタイルを適用した場合のみ、「メディアと文章」などに
    639ピクセル未満の場合、最初の要素の並び順を2番目にするカスタマイズが可能となります。

    0
    #53892
    キタジマ タカシ
    キーマスター

    @Kmical Lights さんありがとうございます!

    @ACE さん
    サイトみてみました。高度な設定に「.order-reverse」と入力されていると思いますので、ここは「order-reverse」とドットなしで入力してください。

    そして、追加 CSS に貼り付ける内容をこちらに差し替えてください。

    @media (max-width: 1023px) {
      .order-reverse .c-row--reverse .c-row__col:first-child {
        order: -1;
      }
    }

    このスマホの順番については他の方からもちょこちょこ要望をいただくので、メディアと文章ブロック自体に機能を追加しても良いかなと思っています。8月に予定されている WordPress 5.5 の対応が落ち着いたら、作業したいなと考えているので、それまではこの CSS を使ってもらえればと思います。

    0
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。