アクツ様
ご回答ありがとうございます！
【記述どおり試してみたところ、できました】
原因
イラストは表示されていたものの、大きすぎて写っていなかったみたいです。
サイズを200pxに設定、positionを変更することで指定位置に表示させることができました。
ご教授いただきありがとうございました。
※無事左下に葉っぱのイラストを配置できました
アクツさん キタジマさん
ありがとうございます！
background-position で位置を固定できました。
&::after {
content: '';
background-image: url('img/tri.png');
background-repeat: no-repeat;
height: (100vw/5);
width: (100vw/4.1);
display: block;
position: absolute;
right: 0;
background-position: right 0% top 0%;
}
ありがとうございます！
おかげさまで解決できましたため、こちらを閉じさせていただきます。
本当にありがとうございました。
keiproさん（キタジマさん） スレッドお邪魔します
試しに自分のブログに背景画像入れるのやったら表示されたので、コード置いておきます
.l-header{
background-color: #ccc;
background-image: url(https://ah-kutsu.net/wp-content/uploads/2019/02/Hp4lR7BC.png);
background-repeat: no-repeat;
background-position: center bottom;
}
こちらのコードを一旦追加CSSの最後に入れてみて、灰色の背景になって下側にSnow Monkeyのマークがでたら、ご自身のコードに何かしら足りなかったりする可能性が高そうです
キタジマ様
ご回答ありがとうございます！
【画像が挿入できない状況が続いております】
①ファイル名の日本語を無くした。
②WordPress内のフォルダに画像を入れ、urlを絶対パスで登録してみました。
①②を試しましたが、画像は表示されない状況です。
画像が悪いかとも思い、別の画像でも試しましたが変わらず。
snow monkeyのファイルに入れたりもしましたが変わらず。
他の原因は考えられますでしょうか？
ご教授いただけると幸いです。
※ファイル名を半角英数字にしてみて、httpでパスで記述してみました。
※絶対パスで記述してみました。
パス名が誤っていないかチェックしました。
.l-headerを１箇所にしてみたり、２箇所にしてみたり試して
みました。
“/の/を無くしたりしてみました。
気になる点が2点あります。
1つはファイル名に日本語が含まれていることです。日本語（マルチバイト）のファイル名は環境によって正しく読み取れないことがあります。なので英語を使うものに変更して試してみてください！
2つ目は localhost のパスになっていることです。今はローカル環境で確認されているので関係ないと思いますが、このままネット上にアップデートすると読み取れなくなってしまいます。なので URL のパスしていではなくて絶対パスでの指定が良いかもしれません。
.l-header {
background-image: url("/wordpress/wp-content/uploads/〜/bg.jpg");
}
みたいな。
アクツさん
あ、単純に .page-id-12345 のようなクラスが出力されるのでそれを使えば良いのでは？と思っての書き込みでした。テストサイトと本番サイトで id が異なることが多いようであれば、独自にスラッグのクラス名を追加するほうが勝手は良いかもですね！
あ、いや、ちょっと勘違いしていました。
えっと、まず Snow Monkey で「オーバーレイ」ヘッダーというのは、ヘッダー自体（.l-header）がその下のコンテンツにかぶって表示されるものを指します。そして、スクロールしたときにグローバルナビゲーションがにゅるっとでてくるものはドロップナビゲーションと呼んでいます（つまり、Snow Monkey でいうヘッダーのオーバーレイとは別もの）。
そういう前提で、ヘッダーの「ノーマル」というのは、ヘッダーがオーバーレイにも固定表示にもなっていないというだけの意味しかなく、ドロップナビゲーションとは関連がありません（ヘッダーが「シンプル」のときはドロップナビゲーションも表示されません）。また、ドロップナビゲーションはスマホではどの条件のときでも表示されない仕様なので、
– ヘッダーがノーマルのときにドロップナビゲーションが表示される = 正しい
– ヘッダーがノーマルのとき x お知らせバーがないときはドロップナビゲーションが表示されない = 不具合
ということになります。こちらの環境だとスマホとPCの両方のヘッダーを「ノーマル」にしてお知らせバー未入力にしてもドロップナビゲーションが表示されるのですが、mayu さんの環境だとその場合はドロップナビゲーションが表示されないということですかね？
—
ということで、このトピックの解決策としては CSS で
.l-header__drop-nav {
display: none !important;
}
とすることになりますが、PCの両方のヘッダーを「ノーマル」にしてお知らせバー未入力するとドロップナビゲーションが表示されない」のであればそれはバグになるということです！
キタジマさん
私もよくbody_classにpage-{slug名}を吐き出す処理をMy Snow Monkeyに追加するのですが、けっこう何かに影響する感じでしょうか（処理多くしてるのでだめだよね等）
ID値のclassだと、そのページ作り直してしまったときなどに駄目になるので（ページ複製してページ作り変えてしまう的なこともあったりするので）、slugのほうがいいかなって安易に使ってたのですが、極力Snow Monkeyで出力してるpageid-{ID}とかのほうがいいのか、知りたいなと思って（＾＾：）
（そして、小山智久さん、横入りで質問ですみません）
Olein_jpさん
①添付写真の見本通り、トップ画面左のメニューのロゴ周りの背景を変更したい
こちらの問題は、Olein_jpさんの言われた通り記述して解決できました。
助かりました。ありがとうございます。
キタジマさん
①添付写真の見本通り、トップ画面左のメニューのロゴ周りの背景を変更したい
こちらのロゴ周りの背景を白くした後に、paddingで調整して、最上段にロゴと背景を移動することができました。ありがとうございます。
トピックを複数件立ち上げてしまい申し訳ございません。
開く際は、１トピックごとを徹底します。
また、質問の際も具体的に記入するように気をつけます。
②見本の方に左下に葉っぱの画像を差し込みたいが差し込めない
に関して、返信をしたい場合は、再度トピックを立ち上げたほうがよろしいでしょうか？
※現状調べながら実装を試みていますがうまくいきません・・・・・
引き続きよろしくお願いいたします。
小山智久さん
オフィシャルにもありますので、まずは検索してみていただければと思います。
恐らく、Contact Form 7より、Snow Monkeyに親和性が高いと思われ必要な機能があるようなら、乗換も検討したいとおもってます。
Snow Monkey は Contact Form 7 にも最低限のスタイルを当てています。また、機能的には Contact Form 7 のほうが高機能でできることは多いです。なので今 Contact Form 7 で特に不満がないのであれば、無理に乗り換える必要はないと思います。
オレインさん
デフォルトでは切り取り（トリミング）はおこなわれないので、.spider__canvas か .spider__slide でトリミングする感じになるかなと思います。
mayuさん
「画像の上下をトリミングして、縦幅を狭くしたい。」とのことなので、CSS でやるとすれば width ではなく height を使うことになります。また、.spider__figure は画像そのものなので、普通に高さを指定すると画像が潰れてしまいます。background-size を併用するか、オレインさんが書かれているように .spider__canvas や .spider__slide に対して高さ指定することになると思います。
あるいは、スライダーブロックはインスペクター（設定パネル）に「画像のアスペクト比」という設定があり、そこで「16:9」の比率で画像をトリミングして表示することが出来るので、比率がそれで良いのなら、その設定を使うのが一番簡単だと思います。
keipro さん
①添付写真の見本通り、トップ画面左のメニューのロゴ周りの背景を変更したい
.l-header に背景色を指定するとヘッダー全体に色がついてしまうので、ロゴの周りだけであればオレインさんが書かれているように、.c-site-branding に背景色を指定するのが良いです。あとは良い感じになるように padding を調整すると良いと思います。
①追加cssにて該当箇所のみ背景変更を試みましたができませんでした。
②追加cssにて画像を挿入しようとしたが上手くできませんでした。
お手数おかけして申し訳ないのですが、他のユーザーさんが同じ問題に直面したときに調べやすいように、次回からは1トピック1課題の投稿をお願いします！あと、どのようにうまくいかなかったのかも具体的に書いたりスクリーンショットを入れていただけると解決しやすくなると思いますのでお願いします。
任意のタクソノミーの投稿にはクエリをカスタマイズできるフィルターフックが用意されています。
snow_monkey_taxonomy_posts_widget_args_{ID} です。
下記のトピックが参考になると思います。
渡ってくる $query_args の tax_query を条件にあうように書き換えればいけると思います。
height と width を背景画像の大きさにあわせるか、アクツさんが書かれているように background-position で調整する、あるいは background-size で調整するとかですかね。
