- このトピックには9件の返信、3人の参加者があり、最後に
により5年、 11ヶ月前に更新されました。
-
投稿
-
現在、Snow Monkey Blocks の「メディアと文章ブロック」を利用してPC表示で
・左側に画像
・右側に文章とした場合も、スマホなどコンテンツ幅が狭くなった場合に、
・上側：文章
・下側：画像となってしまいます。
特に、左側に画像を配置する場合は、右側に画像の説明のような内容がくることが多いので、
・上側：画像
・下側：文章という形にしたいと思っています。
スマホなどコンテンツ幅が狭い場合の上下の配置を選択できるようにはならないでしょうか？
ご検討頂けたら嬉しいです。
よろしくお願いいたします。いいねをした人: 居ません一応、私はCSSでやっているので書いときますね。
mediaブロックに、order-reverseって高度な設定の所に書いちゃってクラスを付与します。
追加CSSで
@media screen and (max-width: 639px) { .order-reverse .c-row__col:first-child { order: 2; } }と書く事で一つ目の要素を２番目に表示するようにと言う指定です。
こんな感じで表示順を反転させてますが、どうでしょうか？いいねをした人: 居ません@倉本さん、ありがとうございます！
@hiroe さん、オプションとしてスマホのときの画像の上下を追加すると煩雑になるので、画像左のときはスマホのとき画像が上になる、としてしまったほうがスマートかなと。細かくやりたい人は、ブロックの「追加クラス」とかを使って独自にやってもらう感じで。どうでしょう？
いいねをした人: 居ません@倉本さん
ブロックの高度な設定って、何に使うのだろう？と思ってたのですが、こうやって使うのですね。
試しにやってみたらできました。特定のブロックだけ、違う見せ方をしたい場合とかに便利ですね！また、再利用ブロックに登録しておけば、使い回しもできそうですね。
勉強になりました！活用させてもらいます。
ありがとうございました！@北島さん
>画像左のときはスマホのとき画像が上になる、としてしまったほうがスマートかなと。
画像左の場合は、スマホ時は画像上がデフォルトが良いと思うので、この方法で良いと思います。>細かくやりたい人は、ブロックの「追加クラス」とかを使って独自にやってもらう感じで。
そうですね。これでお願いいたします。
倉本さんに便利な方法を教えてもらったので、イレギュラーな場合は独自にカスタマイズするのがSnow Monkey っぽいと思います！いいねをした人: 居ません@Hiroeさん
特定のブロックだけ、違う見せ方をしたい場合とかに便利ですね！また、再利用ブロックに登録しておけば、使い回しもできそうですね。
公式ではulとかolとかしか用意されていないですが、それにCSSクラス名を入れると違った表示をするリストも作れますので、実は色々なリストのバリエーションを既に公式だけで出来ちゃったりします（笑）
問題は、エディタ画面では追加CSSの表示反映されないんですよね。プレビューで確認しないと駄目なのでそこだけが弱点です（＞_＜@キタジマさん
これを上手く使うと、吹き出しもクラス定義してあげるだけで１つずつborder等のスタイルを簡単に全部自由に変えられることに今更気づきました…。
いいねをした人: 居ません問題は、エディタ画面では追加CSSの表示反映されないんですよね。プレビューで確認しないと駄目なのでそこだけが弱点です（＞_＜
子テーマをお使いなら、追加 CSS じゃなくて子テーマのスタイルシートに書いて
add_editor_style()すると反映されないですかね？追加 CSS は確認したことがなかったですが反映されないんですね…。ちょっとこれは Snow Monkey 側で対応できそうなら対応したほうが良いと思うのでちょっと調べてみます。
これを上手く使うと、吹き出しもクラス定義してあげるだけで１つずつborder等のスタイルを簡単に全部自由に変えられることに今更気づきました…。
そうなんですよ、これ結構便利ですよね。
———-
本トピックについては Snow Monkey Blocks v2.0.0 で対応したのでクローズします！
いいねをした人: 居ません@倉本さん
実は色々なリストのバリエーションを既に公式だけで出来ちゃったりします（笑）
そうか、そうですよね。
見出しとかも同じようにバリエーション作れますね！問題は、エディタ画面では追加CSSの表示反映されないんですよね。プレビューで確認しないと駄目なのでそこだけが弱点です（＞_＜
これも確かにそうですね・・・
でも、ランディングページとか特殊なページだけ見出しやボックスのスタイル変えたいなーと思うことがあったので、これは便利です。本当に良い知識を頂きまして、ありがとうございます！
いいねをした人: 居ません
- トピック「Snow Monkey Blocks の「メディアと文章ブロック」のコンテンツ幅が狭くなった時の表示を、画像→文章も選べるようにしたい。 」には新しい返信をつけることはできません。