アイコンとテキストを横並びで同じ高さで表示したい。

0
いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #104357
    Yuzuru Kuroishi
    参加者
    4

    【お使いの Snow Monkey のバージョン】Snow Monkeyバージョン: 16.5.4
    【お使いの Snow Monkey Blocks のバージョン】バージョン 15.0.6
    【お使いの Snow Monkey Editor のバージョン】バージョン 7.0.1
    【お使いのブラウザ】chrome
    【当該サイトのURL】

    ### 実現したいこと
    他社さんのプラグインになるので対応としては難しいかもしれませんが、
    対応方法などあれば、教えていただければ嬉しいです。

    ### 発生している問題
    アイコンメニュー横並び のアイコンとテキストが添付の画像にように段差がずれてしまいます。

    ### 試したこと
    chromeの検証で、該当のCSSを確認して、オフにすれば、表示が整うことまでは確認できたのですが、CSSカスタマイズに貼り付けてももう一度同じスタイルシートが出てしまい、改善できません。

    下記app.cssという名前で出ているので、動的に生成されている部分なのでしょうか。
    .wp-block-column>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)+:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .wp-block-cover__inner-container>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)+:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .wp-block-group>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)+:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .wp-block-group__inner-container>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)+:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .wp-block-latest-posts__post-full-content>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)+:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .wp-block-latest-posts__post-full-content>div:not([class])>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)+:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .wp-block-media-text__content>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)+:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    margin-top: 1.8rem;
    margin-top: calc(var(–_space, 1.8rem)*1*var(–_margin-scale, 1));
    }

     

    0
    いいねをした人: 居ません
    #104360
    まーちゅう
    参加者
    367

    このブロックパターンは、Lightning + VK Bloks Pro(有料)用のものです。

    Vector さんが、自社の有料テーマや有料プラグイン利用者のために用意されているサービスなので、Snow Monkey のサポートフォーラムで質問するのは、ちょっと違うんじゃないかなと思います。

    2
    いいねをした人:
    #104361
    Yuzuru Kuroishi
    参加者
    4

    ありがとうございます。そうですよね。

    snow monkey blocksではアイコンの横にテキストを並べるみたいなことは難しいでしょうか。
    項目を使って並べてみたのですが、高さがうまくあいませんでした。

    アイデアがあれば教えていただけると助かります。

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

    下記app.cssという名前で出ているので、動的に生成されている部分なのでしょうか。

    動的ではありませんが、Snow Monkey の CSS ですね。これを打ち消せば意図した表示になるのであれば CSS を書いて上書きする必要がありますが、実際のページを見てみないとどのような CSS を書けば良いのかがわからないので、実際のページの URL を書き込んでもらうことはできますか?

    1
    いいねをした人:
    #104375
    GONSY
    参加者
    841

    ボタンブロックインライン画像はいかがでしょうか?
    CSSで調整すればご希望のイメージに近づくと思います。

    2
    いいねをした人:
    #104392
    Yuzuru Kuroishi
    参加者
    4

    お返事ありがとうございます。

    urlはこちらになります。

    https://practical-wilson3990.on.getshifter.io/565-2/

    0
    いいねをした人: 居ません
    #104393
    Yuzuru Kuroishi
    参加者
    4

    ありがとうございます。
    こんな方法もあるんですね。

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

    urlはこちらになります。

    ありがとうございます、確認しました。もしかしたら他に影響があるかもしれませんが、とりあえずこれで揃いました。

    .vk_gridcolcard_item_body_inner p {
      margin-top: 0 !important;
    }
    1
    いいねをした人:
    #104448
    Yuzuru Kuroishi
    参加者
    4

    ありがとうございます。

    まさにこんな感じです。

    スタイルシートの勉強 必要ですね。

    1
    いいねをした人:
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「アイコンとテキストを横並びで同じ高さで表示したい。」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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