任意のタクソノミーの投稿にはクエリをカスタマイズできるフィルターフックが用意されています。
snow_monkey_taxonomy_posts_widget_args_{ID} です。
下記のトピックが参考になると思います。
渡ってくる $query_args の tax_query を条件にあうように書き換えればいけると思います。
height と width を背景画像の大きさにあわせるか、アクツさんが書かれているように background-position で調整する、あるいは background-size で調整するとかですかね。
アクツさん Olein_jpさん 早速コメントありがとうございます。
スミマセン、たしかに質問が3つまとまってました。後ほどスレッド分けます。少々お待ち下さい。
bodyに追加する記述、リンク先では、一般例として、functions.phpに記述するようになっていますが、
Snow Monkey的なお作法としては、My Snow Monkeyプラグインに記述する形になるのですよね。
パスについては、僕が考えた案だとバージョンアップ時に消えるようなので、新たな格納先を具体的考えて見て
また提示したいと思います。これは新しいスレッドで行います。少々お待ち下さい。
まずはご回答頂いた皆様にお礼まで、ありがとうございました！
tomohanano 様
こんにちは。お返事ありがとうございます。
こちら画像のサイズ以上に領域が確保されているっぽいっぽく、背景画像のpositionを指定していないので左にでてるような状態っぽいですね。
なので背景にposition指定（background-position:）するとお望みの形になりそうな気がします。
Snow MonkeyとSnow Monkey Blocksを普通に使う形では実現は難しいと感じます。また、ここはSnow Monkey公式フォーラムですので、アドバイス差し上げることが適切かどうか判断が難しいので、個人的な実現イメージだけ共有しておきますね。
@キタジマタカシ 氏 不適切であれば削除していただいて大丈夫です。
色々なアプローチが存在すると思いますが、僕の思いつきアイデアを共有します。
### 発生している問題
・使うべきブロックがわからない
・テキストとアイコンを併記させる方法がわからない
使うべきブロックですが、方法の一つとして「カラムブロック」でも良いかもしれません。よりカラムブロックを管理したい場合には、外側にグループブロックでラップしてCSSクラスを付与しても良いでしょう。
「テキストとアイコン」ですが、こちらはグループブロックでラップしてCSSクラスを付与し、見出しブロック（CSSクラス付与してスタイル追記）とカスタムHTMLブロックor画像ブロックでアイコンを配置してposition: absolute; でコントロールする感じでしょうか。
実際のサイトの構造を見ないと確実なことは言えませんが、
葉っぱのアクセントをCSSの記述で挿入できないかと試してみました
.l-header{ background-image:url(ファイルの場所);}
これで背景に画像を入れるということは可能でしょう。あとは、background-position などなど利用して希望する場所に配置する流れるになるかと思います。
上段のカラーが変更できないかCSSの記述で試してみました
.l-header{background-color:#ffffff;}
これに加え、top、padding、marginなどの記述で幅を調整したりしていますが、上手く調整できない状況です。
これだと、ヘッダー全体の背景色を変えることになると思います。
①添付画像の見本のようにロゴ周りの背景を白くしたいが変更できない
ロゴの周りをということであれば、c-site-branding 付近の良さそうにCSSクラスに背景色を指定して調整するなどの方が、ご希望されている見た目に近くなるかもしれません。（ヘッダー全体の背景色を変えたいのであれば l-header でも良いと思います）
ご確認くださいませー。
アクツ様
ありがとうございます。
以下のとおりに書き直したのですが、まだ右側に余白ができます。
.main-visual {
position: relative;
&::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;
}
}
何が原因だと考えられますでしょうか？
Olein_jpさん
ご返答ありがとうございます！
１．葉っぱのアクセントをCSSの記述で挿入できないかと試してみました
.l-header{
background-image:url(ファイルの場所);
}
１．上段のカラーが変更できないかCSSの記述で試してみました
.l-header{
background-color:#ffffff;
}
これに加え、top、padding、margin などの記述で幅を調整したりしていますが、上手く調整できない状況です。
２．現状ローカルサーバーにて制作しており、ドメインを取得していない状況です。
恐れ入りますがご確認お願いいたします。
もしかしたら、mayuさんは学習過程なのかもしれないと思い、あえて答えは出さずにヒントだけ提供してみますね。
Snow Monkey Blocksのスライダーは、キタジマ氏が自身で開発したプラグインを採用しています。
そちらのDOM構造ですが、簡単にご説明すると、
.wp-block-snow-monkey-blocks-spider-slider の中に .spider という囲いがあり、その中に .spider__canvas や .spider__dotsといった、画像部分やドット（もしくはサムネイル）部分が用意されています。
画像部分は .spider__canvas になるのですが、この中に spider__slide があり、その中にトピックに書いてある .spider__figure というimgタグの画像が配置されています。
しかし、挑戦されたように .spider__figure をいじっても高さは変更することはできません。なぜなら、.spider__figure を .spider__slide で囲ってあり、それらを .spider__canvas でよしなに切り取っているような作りになっています。
ですので、一番外枠の .spider__canvas をちょっとごにょごにょしてみると幸せになれるかもしれません。
ぜひ挑戦してみてください。
お返事ありがとうございます。
設定は、こちらです。
下図のようなメニューがあった場合、
スクロールすると、下のようにメニューが見えなくなると思います。
でも、お知らせバーを入れると、
スクロールをした時に、メニューが出てきます。
こちらはテスト的に作成したものですが、現在担当している案件も同じようになります。
お知らせバーを入れた時もスクロールした時にメニューが隠れるようにしたいです。
宜しくお願い致します。
こんばんは！
現状、色々と試されたご様子ですので、以下の情報を追加で頂けますでしょうか？
- 追加CSSに追加されたコード
- こちら公開されているURL
CSSでなんとかなるかもしれませんが、どのようにして現状作られているのか確認できないとアドバイスを差し上げることが難しそうです。
ご確認お願いいたします。
tomohanano さんこんにちは
背景色は、ブロークングリッドの設定画面内でできるかと思います（コンテンツの設定）
あとは重ね具合とコンテンツの大きさと余白を調整していけば、なんとなくやりたいことに近づけるのかなと思ってますが、どうでしょうか。
細部までデザイン通りにいきたい（かつレスポンシブでも細部までこだわりたいとかであれば、ブロークンブロックではなく、グループブロック > 画像ブロック + グループブロック（この中にコンテンツの中身突っ込む）で組んで、１からCSS当てていくかもしれないです。（手間がかかるので、自分の場合はブロークンでできる範囲までで仕上げる方に注力しますが）
度々お邪魔します。
対応はこれだけじゃないとは思いますが
position: absolute を利用されてみてもいいかもしれません
キタジマさん！
ありがとうございます。
以下のコード（Sass）で直下に表示させられました！
.main-visual {
&::after {
content: '';
background-image: url('img/tri.png');
background-repeat: no-repeat;
height: (100vw/5);
width: (100vw/4.1);
margin: 0 0 0 auto;
}
}
13インチの画面では、デザイン通り右端に表示されるのですが、それ以上の大きさの画面では写真のように右側にスペースが生まれます。
ここで質問なのですが、このスペースを画面サイズを問わず常に消すためには、メディアクエリで適宜対応する他に効率の良い方法はありませんでしょうか？
カスタマイザー → デザイン → ヘッダーで、レイアウトを「左」にすればヘッダー（ロゴとグローバルナビゲーション）を画面左に固定できます。
あとは20%に固定するのはブロックの全幅設定との絡みで難しいかもしれませんが、色はヘッダーに対して CSS で簡単につけれるかと思います。試してみてください！
