Snow Monkey Blocks の「メディアと文章ブロック」のコンテンツ幅が狭くなった時の表示を、画像→文章も選べるようにしたい。 

0
いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #7723
    HiROE
    参加者
    46

    現在、Snow Monkey Blocks の「メディアと文章ブロック」を利用してPC表示で

    ・左側に画像
    ・右側に文章

    とした場合も、スマホなどコンテンツ幅が狭くなった場合に、

    ・上側:文章
    ・下側:画像

    となってしまいます。

    特に、左側に画像を配置する場合は、右側に画像の説明のような内容がくることが多いので、

    ・上側:画像
    ・下側:文章

    という形にしたいと思っています。

    スマホなどコンテンツ幅が狭い場合の上下の配置を選択できるようにはならないでしょうか?

    ご検討頂けたら嬉しいです。
    よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #7748
    キタジマ タカシ
    参加者
    2227

    確かにそうでうすよね…。ちょっとできるかわからないので、調査してみます!

    0
    いいねをした人: 居ません
    #7749
    Hatsuki
    閲覧者
    6

    一応、私はCSSでやっているので書いときますね。

    mediaブロックに、order-reverseって高度な設定の所に書いちゃってクラスを付与します。

    追加CSSで

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

    と書く事で一つ目の要素を2番目に表示するようにと言う指定です。
    こんな感じで表示順を反転させてますが、どうでしょうか?

    0
    いいねをした人: 居ません
    #7750
    キタジマ タカシ
    参加者
    2227

    @倉本さん、ありがとうございます!

    @hiroe さん、オプションとしてスマホのときの画像の上下を追加すると煩雑になるので、画像左のときはスマホのとき画像が上になる、としてしまったほうがスマートかなと。細かくやりたい人は、ブロックの「追加クラス」とかを使って独自にやってもらう感じで。どうでしょう?

    0
    いいねをした人: 居ません
    #7752
    HiROE
    参加者
    46

    @倉本さん

    ブロックの高度な設定って、何に使うのだろう?と思ってたのですが、こうやって使うのですね。
    試しにやってみたらできました。

    特定のブロックだけ、違う見せ方をしたい場合とかに便利ですね!また、再利用ブロックに登録しておけば、使い回しもできそうですね。

    勉強になりました!活用させてもらいます。
    ありがとうございました!

    @北島さん
    >画像左のときはスマホのとき画像が上になる、としてしまったほうがスマートかなと。
    画像左の場合は、スマホ時は画像上がデフォルトが良いと思うので、この方法で良いと思います。

    >細かくやりたい人は、ブロックの「追加クラス」とかを使って独自にやってもらう感じで。
    そうですね。これでお願いいたします。
    倉本さんに便利な方法を教えてもらったので、イレギュラーな場合は独自にカスタマイズするのがSnow Monkey っぽいと思います!

    0
    いいねをした人: 居ません
    #7763
    キタジマ タカシ
    参加者
    2227

    画像左の場合は、スマホ時は画像上がデフォルトが良いと思うので、この方法で良いと思います。

    その方向でアップデートします!

    0
    いいねをした人: 居ません
    #7781
    Hatsuki
    閲覧者
    6

    @Hiroeさん

    特定のブロックだけ、違う見せ方をしたい場合とかに便利ですね!また、再利用ブロックに登録しておけば、使い回しもできそうですね。

    公式ではulとかolとかしか用意されていないですが、それにCSSクラス名を入れると違った表示をするリストも作れますので、実は色々なリストのバリエーションを既に公式だけで出来ちゃったりします(笑)
    問題は、エディタ画面では追加CSSの表示反映されないんですよね。プレビューで確認しないと駄目なのでそこだけが弱点です(>_<

    @キタジマさん

    これを上手く使うと、吹き出しもクラス定義してあげるだけで1つずつborder等のスタイルを簡単に全部自由に変えられることに今更気づきました…。

    0
    いいねをした人: 居ません
    #7786
    キタジマ タカシ
    参加者
    2227

    問題は、エディタ画面では追加CSSの表示反映されないんですよね。プレビューで確認しないと駄目なのでそこだけが弱点です(>_<

    子テーマをお使いなら、追加 CSS じゃなくて子テーマのスタイルシートに書いて add_editor_style() すると反映されないですかね?

    追加 CSS は確認したことがなかったですが反映されないんですね…。ちょっとこれは Snow Monkey 側で対応できそうなら対応したほうが良いと思うのでちょっと調べてみます。

    これを上手く使うと、吹き出しもクラス定義してあげるだけで1つずつborder等のスタイルを簡単に全部自由に変えられることに今更気づきました…。

    そうなんですよ、これ結構便利ですよね。

    ———-

    本トピックについては Snow Monkey Blocks v2.0.0 で対応したのでクローズします!

    0
    いいねをした人: 居ません
    #7787
    HiROE
    参加者
    46

    @倉本さん

    実は色々なリストのバリエーションを既に公式だけで出来ちゃったりします(笑)

    そうか、そうですよね。
    見出しとかも同じようにバリエーション作れますね!

    問題は、エディタ画面では追加CSSの表示反映されないんですよね。プレビューで確認しないと駄目なのでそこだけが弱点です(>_<

    これも確かにそうですね・・・
    でも、ランディングページとか特殊なページだけ見出しやボックスのスタイル変えたいなーと思うことがあったので、これは便利です。

    本当に良い知識を頂きまして、ありがとうございます!

    0
    いいねをした人: 居ません
    #7876
    キタジマ タカシ
    参加者
    2227

    Snow Monkey v4.4.39 で、追加 CSS の内容を Gutenberg に反映するようにしました!

    0
    いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「Snow Monkey Blocks の「メディアと文章ブロック」のコンテンツ幅が狭くなった時の表示を、画像→文章も選べるようにしたい。 」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。