背景色を入れたい、サイズを固定したい

0
いいねをした人: 居ません
  • このトピックには4件の返信、2人の参加者があり、最後にそすけにより1年、 11ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #114574
    そすけ
    閲覧者
    9

    【お使いの Snow Monkey のバージョン】 バージョン: 18.1.1
    【お使いの Snow Monkey Blocks のバージョン】 バージョン 17.1.0
    【お使いのブラウザ】 Google Chrome
    【当該サイトのURL】

    らっくらっくホームページ
    広島県府中市のあん摩マッサージ・鍼灸院

    ### 実現したいこと

    1.背景色を入れたい
    2.吹き出しサイズを固定したい

    ### 発生している問題

    1.背景色が入らず、吹き出し画像周りに白い余白が生じる
    2.横に並んだ吹き出しサイズが、1つ1つ異なってしまう。

    長方形とその下の小さな丸を含め、PCの場合『W326、H450』に設定したい。

    ### 試したこと

    1.吹き出し画像はPNGにて保存したものです。セクションとカラムに背景(移動可能)で背景色を設定しましたが、カラム1つ1つには反映しませんでした。

    2.セクション(背景画像/動画)に高度な設定でclassをつけ、追加cssにてサイズ指定したが反映されませんでした。

    宜しくお願いいたします。

    0
    いいねをした人: 居ません
    #114599
    アバター画像キタジマ タカシ
    参加者
    2421

    .smb-section-with-bgimage__bgimage のデフォルトの背景色が白だからですかね。ページの背景と同じ #FCFCFA に設定してみるとどうでしょうか。

    .smb-section-with-bgimage__bgimage {
      background-color: #fcfcfa;
    }

    2.セクション(背景画像/動画)に高度な設定でclassをつけ、追加cssにてサイズ指定したが反映されませんでした。

    背景画像(.smb-section-with-bgimage__bgimage img)のデフォルトが object-fit: cover だからですね。

    .smb-section-with-bgimage__bgimage img {
      object-fit: initial;
    }

    のようにすれば拡大縮小は避けられると思いますが、そもそも用途的にセクション(背景画像)向きではないかもしれませんし、あるいは、背景の画像を固定してしまうと文字サイズを変更したときや文章量が変わったときに画像から文字がはみ出してしまうため、背景画像ではなく CSS で装飾するほうが向いているかもしれません。

    0
    いいねをした人: 居ません
    #114616
    そすけ
    閲覧者
    9

    キタジマ様

    ご回答ありがとうございます。

    1.回答いただいたコードで解決しました。

    2.object-fit: initial;や画像サイズ変更など試しましたが、おっしゃる通り CSS で装飾した方が良さそうです。

    セクションとカラム上の画像はそのままで、カラム(3等分)の部分をカスタムHTMLに変更するイメージでしょうか。

    0
    いいねをした人: 居ません
    #114620
    アバター画像キタジマ タカシ
    参加者
    2421

    セクションとカラム上の画像はそのままで、カラム(3等分)の部分をカスタムHTMLに変更するイメージでしょうか。

    んーそうですね、人によって考え方はいろいろだと思いますが、僕なら、このデザインにマッチするブロックはないので、デザインの変更が不可であればカスタム HTML ブロックで実装すると思います。

    0
    いいねをした人: 居ません
    #115242
    そすけ
    閲覧者
    9

    キタジマ様

    ご返信が遅くなり申し訳ありません。

    カスタム HTML ブロックで実装にしたいと思います。

    ご回答ありがとうございました!

    1
    いいねをした人:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「背景色を入れたい、サイズを固定したい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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