ヘッダーの右上にボタンと電話番号を横並びで表示したい

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

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】最新版
    【お使いのブラウザ】google chrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    連投失礼いたします。

    下記のようにヘッダーの右上にボタンと電話番号を横並びで表示したいです。

    親要素に display:flex; を付けるなど試してみたのですが、思うような表示になりませんでした。
    ご教授いただければ幸いです。

    現在の設定を記載いたします。

    デザイン>ヘッダー

    ヘッダーレイアウト:2行

    PC用ヘッダー位置:上部固定

    ヘッダーコンテンツ

    <div>軽井沢・心療内科・精神科・カウンセリング</div>
    <a href="https://select-type.com/rsv/?id=eFwgX3rN2ug">オンライン予約はこちら</a>
    <p class="header-tel-kokoroni">
    ココロニ<p>
    <h3 class="top-phone"><i class="fas fa-phone-alt"></i> 0267-31-5562</h3>

    追加CSS

    body {
      color: #6D6D6D;
    }
    
    .header-button-online {
      margin: 5px;
      margin-left: 50px;
    }
    .top-phone{
      color: #A16E65;
      font-size: 2.3rem;
      margin: 0;
      padding: 0;
      border: 0;
      vertical-align: baseline;
      line-height: 0;
    }
    
    .header-tel-kokoroni {
      letter-spacing: 1.0em;
      font-size: 12px;
    }
    
    .header-text {
      text-align: right;
    }
    0
    いいねをした人: 居ません
    #63195
    アバター画像キタジマ タカシ
    参加者
    2371

    下記でどうでしょうか?

    <div class="u-text-right">
    	軽井沢・心療内科・精神科・カウンセリング
    </div>
    <div class="my-header-content">
    	<div class="my-header-content__button">
    		<a class="c-btn header-button-online" href="https://select-type.com/rsv/?id=eFwgX3rN2ug">オンライン予約はこちら</a>
    	</div>
    	<div class="my-header-content__tel">
    		<p class="header-tel-kokoroni">   
    			ココロニ
    		</p>
    		<h3 class="top-phone"><i class="fas fa-phone-alt"></i>  0267-31-5562</h3>
    	</div>
    </div>
    .my-header-content {
        display: flex;
        align-items: flex-end;
    }
    
    .my-header-content__button .c-btn {
        margin: 0 1rem 0 0;
    }
    
    /* .header-button-online の margin は削除 */
    0
    いいねをした人: 居ません
    #63204
    natsu
    閲覧者
    6

    思っていた通りのレイアウトになりました。

    迅速な対応、ありがとうございました!

    1
    いいねをした人: 居ません
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「ヘッダーの右上にボタンと電話番号を横並びで表示したい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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