[akosan]

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

### 実現したいこと

現在設置しているナビゲーション右上２つのボタン「資料請求」「無料相談会」の左側にバナーを設置したい

### 発生している問題

２つのボタンの下に表示されてしまう

### 試したこと

デザイン→ヘッダーからヘッダーコンテンツにimgタグで記入
google＆サポートフォーラムで検索

このような配置を実現したいと思っています。

お忙しいところ申し訳ありませんが、ご教示いただけると助かります。

もしサポート対象外であれば、トピックを閉じていただければと思います。

♥ 0

いいねをした人: 居ません

[GONSY]

@akosan さん

教えてください。
画像バナーを含め、ヘッダーコンテンツはどのようなコードを書いていらっしゃいますか？
CSSで補完すればご要望の配置になるかもしれません。

♥ 1

いいねをした人:

[akosan]

@GONSY　さん

ありがとうございます<(_ _)>

ヘッダーコンテンツに入力したコード↓

——————————————————

<img src="..." alt="サンプル" width="200" />

<!-- wp:snow-monkey-blocks/buttons -->
<div class="wp-block-snow-monkey-blocks-buttons smb-buttons"><!-- wp:snow-monkey-blocks/btn -->
<div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper"><a href="https://togatherland.com/pamphlet/"><span class="smb-btn__label left"><i class="fas fa-book-reader"></i> 資料請求</span></a></div>
<!-- /wp:snow-monkey-blocks/btn -->

<!-- wp:snow-monkey-blocks/btn -->
<div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper"><a href="https://togatherland.com/free-consultation/"><span class="smb-btn__label"><i class="far fa-comments"></i> 無料相談会</span></a></div>
<!-- /wp:snow-monkey-blocks/btn --></div>
<!-- /wp:snow-monkey-blocks/buttons -->

——————————————————

CSS（ボタンのデザインを変更するために使用）↓

——————————————————

.smb-btn.header{
width: 180px;
height: auto;
border-radius: 27px;
border: 2px solid #f6883c;
background-color:#ffffff;
color:#f6883c;
font-weight:bold;
font-size:14px;
letter-spacing: .2em;
}

——————————————————

この時に、この画像の表示になりました。

♥ 0

いいねをした人: 居ません

[GONSY]

ご提示ありがとうございます。
試してみました。

ヘッダーコンテンツ

<div class="h-content_origin">

	<!-- リンク付バナー画像 -->
	<div class="img_banner-button">
		<a href="https://example.com/page">
			<img src="https://placehold.jp/3d4070/ffffff/1200x300.jpg" width="1200" height="300">
		</a>
	</div>

	<!-- 2つのアイコン付ボタン -->
	<div class="wp-block-snow-monkey-blocks-buttons smb-buttons">

		<div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper">
			<a class="smb-btn header" href="https://togatherland.com/pamphlet/">
				<span class="smb-btn__label left"><i class="fas fa-book-reader"></i> 資料請求</span>
			</a>
		</div>

		<div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper">
			<a class="smb-btn header" href="https://togatherland.com/free-consultation/">
				<span class="smb-btn__label"><i class="far fa-comments"></i> 無料相談会</span>
			</a>
		</div>

	</div>

</div>

追加CSS

@media ( min-width: 1024px ) {

	.h-content_origin {
		display: flex;
		align-items: center;
	}
	
	.img_banner-button {
		margin-right: 1.25rem;	
	}
	
	.img_banner-button img {
		width: auto;
		height: 48px;
	}
	
	.smb-btn.header{
		width: 180px;
		height: auto;
		border-radius: 27px;
		border: 2px solid #f6883c;
		background-color:#ffffff;
		color:#f6883c;
		font-weight:bold;
		font-size:14px;
		letter-spacing: .2em;
	}
	
}

 
 

このような仕上がりになります。
調整は必要ですが、参考にしてみてください。

♥ 4

いいねをした人:

[akosan]

@GONSY　さん

なんと、作ってくださったんですね…！ありがとうございます。

こちらのコードとCSSできれいに表示できました。

本当にありがとうございます。

♥ 2

いいねをした人:

[投稿者]

投稿