ヘッダーコンテンツをスマホ表示できたのですが、レイアウトを整えたいです。

0
いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全17件中)
  • 投稿者
    投稿
  • #133742
    blogwebsite002@gmail.com
    参加者
    8

    いつも大変お世話になっております。おかげさまで複数のサイトを納品できております。素晴らしいサービスとサポート体制に本当に感謝しています。

     

    お忙しいところ大変申し訳ございませんが、今回トピックを立てさせて頂きましたので、ご確認お願いいたします。

    【お使いの Snow Monkey のバージョン】
    25.2.5

    【お使いの Snow Monkey Blocks のバージョン】

    20.3.5
    【お使いの Snow Monkey Editor のバージョン】

    9.3.2
    【お使いのブラウザ】

    Google Chrome

    【当該サイトのURL】

    ### 実現したいこと

    タブレット、スマホ表示のヘッダーのレイアウトを綺麗に調整したいです。

     

    ### 発生している問題

    下記サイトを参考に、ヘッダーコンテンツ(電話ボタン)をヘッダー内に表示できたのですが、

    タブレット表示時、スマホ表示時にレイアウトが崩れてしまってスッキリしない状況です。

    ### 試したこと

    追加CSSでボタンサイズの調整はできたのですが、どうしても上手に整えられませんでした。

    そもそものやり方が良くないかもしれませんが、何か良い案があれば教えて頂きたいです。

    ーーーーーー

    ヘッダーコンテンツ

    TEL

    ーーーー

    追加CSS

    @media (max-width: 63.9375em) {
    .u-invisible-md-down {
    display: block!important;
    }
    .u-invisible-md-down .p-global-nav {
    display: none;
    }
    /* タブレット表示でのボタンサイズ調整 */
    a[href=”tel:+0476931538″] {
    padding: 10px 20px!important; /* パディングを少し小さくする */
    font-size: 0.6rem; /* フォントサイズを小さくする */
    }
    }

    /* スマートフォン表示でのボタンサイズ調整 */
    @media (max-width: 600px) {
    a[href=”tel:+0476931538″] {
    padding: 4px 8px!important; /* より小さなパディングにする */
    font-size: 0.5rem!important; /* より小さなフォントサイズにする */
    }
    }

    お忙しいところすみませんが、ご確認お願いいたします。

    ーーーーー

    0
    いいねをした人: 居ません
    #133743
    blogwebsite002@gmail.com
    参加者
    8

    追記

    ヘッダーコンテンツがそのままボタンになってしまっていてすみません。

    aタグの<>を外しました。

    a href=”tel:+0476931538″ style=”background-color: #69592C; color: white; padding: 14px 25px;margin-top:20px; text-align: center; text-decoration: none; display: inline-block;”>TEL/a

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

    理想形のデザインはどんな感じでしょうか?それが見れればここをこうして、というのが提示しやすいのかなと…

    0
    いいねをした人: 居ません
    #133746
    blogwebsite002@gmail.com
    参加者
    8

    すみません!こちらイメージとなります。

     

    お忙しいところすみませんが、ご確認お願いいたします。

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

    ありがとうございます。もう一点確認です。

    スクショをみた感じだと、タブレットとスマホではロゴを左に寄せて、空いたスペース分 TEL ボタンを大きくしたいという感じだと思いますが、PC の場合でもロゴを左に寄せるというのは可能でしょうか? そのほうが上書きする CSS が少なくなりそうなのでメンテナンスを考えるとそっちのほうが良いのかなーと…。

    0
    いいねをした人: 居ません
    #133758
    blogwebsite002@gmail.com
    参加者
    8

    可能です。

     

    全体的にバランスが整えられれば特に問題ありません。

    ヘッダーを2行にした場合、「電話ボタンが右に寄ってしまっていた+上下の余白が整っていなかった」

    ので現在中央ロゴにしている状況でした。(この場合はもう少しボタンを左に寄せるorボタンを大きくする方が良いと思っています{TEL→電話をかける などして})

    ヘッダーレイアウト2行の場合の画像を2枚添付します。

    それと追加で大変申し訳ありませんが、現状PCの上下の余白も、均等にしたいです。

    お忙しいところすみませんが、ご確認お願いいたします。

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

    なるほどです。

    すみませんが、現状だとどのような CSS が追加されているのかよくわからないので、ヘッダーレイアウトを1行に変更した上で、一旦追加している CSS を消してみてもらっても良いでしょうか(一応戻せるようにバックアップを取っておいたほうが良いと思います)。その状態で、なるべく利用に近くなるようにするにはどのような CSS を追加したら良いのか調査してみようと思います。

    0
    いいねをした人: 居ません
    #133810
    blogwebsite002@gmail.com
    参加者
    8

    ありがとうございます。

    下記サイトに同じものを構築し、ヘッダーレイアウトを1行にして追加CSSを消しました。

     

    お忙しいところすみませんが、ご確認お願いいたします。

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

    あーすみません!! うち間違ってました! 1行ではなくて2行です!! 2行に変更をお願いします。何度もすみません…

    0
    いいねをした人: 居ません
    #133817
    blogwebsite002@gmail.com
    参加者
    8

    とんでもありません!2行にしました!

    お忙しいところすみませんが、ご確認お願いいたします。

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

    ありがとうございます。下記を追加 CSS に追加してみてください。

    /* PC 以外でも TEL ボタンを表示 */
    .l-header--2row .l-2row-header__row:first-child .u-invisible-md-down {
        display: block !important;
    }
    
    /* ヘッダーの1行目と2行目の間の余白を消す */
    [data-has-global-nav=true] .l-2row-header__row:last-child,
    [data-has-global-nav=true] .l-center-header__row:last-child {
        margin-top: 0;
    }

    これでグローバルナビゲーションを青くする CSS も追加してもらって、ボタンは独自だと思うので、そのボタンの CSS で調整してみてください。

    0
    いいねをした人: 居ません
    #133846
    blogwebsite002@gmail.com
    参加者
    8

    お忙しいところありがとうございます。とても良い感じです。

    すみません。スマホ表示した際、ロゴをもう少し大きくすることは可能でしょうか。

    ボタンを小さくしたのですが、ロゴのサイズが変わらないようです。

    現状の追加CSSです。

    /* PC 以外でも TEL ボタンを表示 */
    .l-header--2row .l-2row-header__row:first-child .u-invisible-md-down {
      display: block !important;
    }
    
    /* ヘッダーの1行目と2行目の間の余白を消す */
    [data-has-global-nav=true] .l-2row-header__row:last-child,
    [data-has-global-nav=true] .l-center-header__row:last-child {
      margin-top: 0;
    }
    
    @media (max-width: 63.9375em) {
      /* タブレット表示でのボタンサイズ調整 */
      a[href="tel:+0476931538"] {
        padding: 10px 20px!important; /* パディングを少し小さくする */
        font-size: 0.8rem; /* フォントサイズを小さくする */
      }
    }
    
    /* スマートフォン表示でのボタンサイズ調整 */
    @media (max-width: 600px) {
      a[href="tel:+0476931538"] {
        padding: 4px 10px!important; /* より小さなパディングにする */
        font-size: 0.5rem!important; /* より小さなフォントサイズにする */
      }
    }

    お忙しいところすみませんが、ご確認お願いいたします。

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

    スマホ表示した際、ロゴをもう少し大きくすることは可能でしょうか。

    カスタマイザーの「モバイル端末時のカスタムロゴの拡大率(%)」で大きくするとどうでしょうか。

    0
    いいねをした人: 居ません
    #133850
    blogwebsite002@gmail.com
    参加者
    8

    ありがとうございます!!上手に表示ができました!!

    お忙しい中ご対応いただき、誠にありがとうございます。

    おかげさまで解決できましたので、すみませんがトピックを閉じさせていただきます。

    今後もわからないことがあれば質問してしまうかもしれませんが、何卒よろしくお願いいたします。

    1
    いいねをした人:
    #134272
    blogwebsite002@gmail.com
    参加者
    8

    度々申し訳ございません。先日は無事表示されていたのですが、本日見てみると、

    ヘッダーの余白が出来てしまうのと、タブレット、スマホ時にボタンが見えなくなってしまいました。

    相談時よりヘッダーコンテンツが増えるなどの変更はありましたが、相談時の状態(カスタマイザーで余計な追加CSSを消して、ヘッダーコンテンツも相談時のものに戻してみました。)にしても、うまく変わりませんでした。

    何か良い方法はありますでしょうか。

    お忙しいところすみませんが、ご確認お願いいたします。

    0
    いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全17件中)
  • トピック「ヘッダーコンテンツをスマホ表示できたのですが、レイアウトを整えたいです。」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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