- このトピックには6件の返信、3人の参加者があり、最後に
により4年前に更新されました。
-
投稿
-
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの 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の文章で説明されたことを表すメディアのように見えてしまうことを防ぎたい
というものです。よろしくお願いします。
いいねをした人: 居ませんありがとうございます！
試してみたのですがうまくいかず、さらに質問させてください。（CSSについての知識はほとんどありません…）
リンク先にあった追加CSS：
@media screen and (max-width: 639px) {
.order-reverse .c-row__col:first-child {
order: 2;
}
}は、このまま「高度な設定」にコピペすれば良いでしょうか。
また、メディアと文章とのどちらの「高度な設定」に追加したら良いでしょうか。教えていただけるとありがたいです！
いいねをした人: 居ませんCSS記述は追加CSSに追加します。
管理画面の、「外観」→「カスタマイズ」→「追加CSS」です。「メディアと文章」でAとBとして２つ並べていると思いますので、
その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番目にするカスタマイズが可能となります。いいねをした人: 居ません@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 を使ってもらえればと思います。
いいねをした人: 居ません
- トピック「「メディアと文章」の表示順序を、スマホ表示時のみ逆にする」には新しい返信をつけることはできません。