[keipro]

【お使いの Snow Monkey のバージョン】12.1.0
【お使いの Snow Monkey Blocks のバージョン】10.0.0
【お使いの Snow Monkey Editor のバージョン】4.0.0
【お使いのブラウザ】GoogleChrome

### 実現したいこと

①添付写真の見本通り、トップ画面左のメニューのロゴ周りの背景を変更したい

②添付写真の見本通り、メニュー画面の左下に画像を挿入したい

### 発生している問題

①添付画像の見本のようにロゴ周りの背景を白くしたいが変更できない
②見本の方に左下に葉っぱの画像を差し込みたいが差し込めない

### 試したこと

①追加cssにて該当箇所のみ背景変更を試みましたができませんでした。

②追加cssにて画像を挿入しようとしたが上手くできませんでした。

 

【サイドメニューの　左側が見本、右側が現在制作中】

♥ 0

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

[Olein_jp]

こんばんは！

現状、色々と試されたご様子ですので、以下の情報を追加で頂けますでしょうか？

1. 追加CSSに追加されたコード
2. こちら公開されているURL

CSSでなんとかなるかもしれませんが、どのようにして現状作られているのか確認できないとアドバイスを差し上げることが難しそうです。

ご確認お願いいたします。

♥ 0

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

[keipro]

Olein_jpさん

ご返答ありがとうございます！

１．葉っぱのアクセントをCSSの記述で挿入できないかと試してみました

.l-header{
  background-image:url(ファイルの場所);
}

１．上段のカラーが変更できないかCSSの記述で試してみました

.l-header{
  background-color:#ffffff;
}

これに加え、top、padding、margin などの記述で幅を調整したりしていますが、上手く調整できない状況です。

２．現状ローカルサーバーにて制作しており、ドメインを取得していない状況です。

恐れ入りますがご確認お願いいたします。

♥ 0

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

[Olein_jp]

実際のサイトの構造を見ないと確実なことは言えませんが、

葉っぱのアクセントをCSSの記述で挿入できないかと試してみました

.l-header{ background-image:url(ファイルの場所);}

これで背景に画像を入れるということは可能でしょう。あとは、background-position などなど利用して希望する場所に配置する流れるになるかと思います。

上段のカラーが変更できないかCSSの記述で試してみました

.l-header{background-color:#ffffff;}

これに加え、top、padding、marginなどの記述で幅を調整したりしていますが、上手く調整できない状況です。

これだと、ヘッダー全体の背景色を変えることになると思います。

①添付画像の見本のようにロゴ周りの背景を白くしたいが変更できない

ロゴの周りをということであれば、c-site-branding 付近の良さそうにCSSクラスに背景色を指定して調整するなどの方が、ご希望されている見た目に近くなるかもしれません。（ヘッダー全体の背景色を変えたいのであれば l-header でも良いと思います）

ご確認くださいませー。

♥ 0

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

[キタジマ タカシ]

keipro さん

①添付写真の見本通り、トップ画面左のメニューのロゴ周りの背景を変更したい

.l-header に背景色を指定するとヘッダー全体に色がついてしまうので、ロゴの周りだけであればオレインさんが書かれているように、.c-site-branding に背景色を指定するのが良いです。あとは良い感じになるように padding を調整すると良いと思います。

①追加cssにて該当箇所のみ背景変更を試みましたができませんでした。
②追加cssにて画像を挿入しようとしたが上手くできませんでした。

お手数おかけして申し訳ないのですが、他のユーザーさんが同じ問題に直面したときに調べやすいように、次回からは1トピック1課題の投稿をお願いします！あと、どのようにうまくいかなかったのかも具体的に書いたりスクリーンショットを入れていただけると解決しやすくなると思いますのでお願いします。

♥ 0

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

[keipro]

Olein_jpさん

①添付写真の見本通り、トップ画面左のメニューのロゴ周りの背景を変更したい

こちらの問題は、Olein_jpさんの言われた通り記述して解決できました。

助かりました。ありがとうございます。

 

キタジマさん

①添付写真の見本通り、トップ画面左のメニューのロゴ周りの背景を変更したい

こちらのロゴ周りの背景を白くした後に、paddingで調整して、最上段にロゴと背景を移動することができました。ありがとうございます。

 

トピックを複数件立ち上げてしまい申し訳ございません。

開く際は、１トピックごとを徹底します。

また、質問の際も具体的に記入するように気をつけます。

 

②見本の方に左下に葉っぱの画像を差し込みたいが差し込めない

に関して、返信をしたい場合は、再度トピックを立ち上げたほうがよろしいでしょうか？

※現状調べながら実装を試みていますがうまくいきません・・・・・

 

引き続きよろしくお願いいたします。

♥ 1

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

[キタジマ タカシ]

あ、そですね、こちら解決済みという事でクローズしていただいて、そうしていただけると助かります！

♥ 0

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

[投稿者]

投稿