[mokadesign]

【お使いの Snow Monkey のバージョン】バージョン: 25.3.3
【お使いの Snow Monkey Blocks のバージョン】バージョン 20.4.3
【お使いの Snow Monkey Editor のバージョン】バージョン 9.3.3
【お使いのブラウザ】Chrome
【当該サイトのURL】https://saekikougyou.co.jp/

### 実現したいこと

ヘッダーの中央に画像を２つ載せたい。

### 発生している問題

試しに画像を入れることは出来たけど、右に寄ってしまう。アクセスの隣に来る。

### 試したこと

「ヘッダー」

<div class="icon"><img src="//saekikougyou.co.jp/wp-content/uploads/2021/09/logo_saeki.png”" /><div>

「追加CSS」

.icon {
  width:50px;
  text-align:center;
}

↑で試したところ表示が全体的に崩れてしまった。

ヘッダー内で

・画像の大きさの指定
・画像の場所の指定

は可能でしょうか？？　よろしくお願いいたします＜(_ _)＞

♥ 0

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

[キタジマ タカシ]

PC とスマホ、どちらでもど真ん中に画像が入るのが理想ですかね？

ヘッダーの中央に画像を２つ載せたい。

「ヘッダー」で記載いただいた HTML には img が1つでしたが、「２つ載せたい」ということは、本当は載せたい img は2つある、ということですかね？

♥ 0

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

[mokadesign]

キタジマ様

PC表示の時に入れたいです。
お客様からまだ来ていないので用意できてないのですが、入れたい画像は２つあります。

ヘッダー内で

・画像の大きさの指定
・画像の場所の指定

は可能でしょうか？？　よろしくお願いいたします＜(_ _)＞

♥ 0

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

[キタジマ タカシ]

Snow Monkey の機能としては無いので、やるとすれば

– CSS の background-image でやる
– フックを使って画像を挿入する

のどちらかで対応することになると思います。簡単なのは CSS での対応ですかね。
デザインがわからないのでセレクタや指定は具体的には書けませんが、background-image、background-size、background-position、background-repeat: no-repeat の組み合わせで指定すれば良いと思います。

Snow Monkey の PC サイズのメディアクエリは min-width: 1024px なので、

@media (min-width: 1024px) {
  .l-header { // ← デザインによってはもっと良いセレクタがあるかも
    background-image: xxx;
    background-size: xxx;
    background-position: xxx;
    background-repeat: no-repeat;
  }
}

のような感じになると思います。

♥ 0

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

[mokadesign]

キタジマ様

ありがとうございます！　そちらで一度試してみます。<(_ _)&gt

♥ 0

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

[投稿者]

投稿