もしよかったら下記の CSS を追加するとどうなるか試してみてもらえないでしょうか？
.smb-section {
z-index: -1;
}
こちらで試した感じでは良さそうだったのですが、一応複数の環境で見てみたほうが状況がよくわかるかなと思いますので…。よろしくお願いします！
現状はデフォルト値は null だけだと思います。
snow_monkey_wp_awesome_widgets_view_args で書き換えられないですかね？
ちょっと試してみました。
結論からお伝えすると、animation部分の記述が間違っています。
例えば、「左からフェードイン」の部分ですが、
animation: fadein-left 1.5s 0 ease-out forwards;
と記載がありますが、この0が何を意図しているのかわかりませんが、プロパティの指定がおかしくなっています。
ですので、とりあえず
animation: fadein-left 1.5s ease-out forwards;
こうするだけで動作します。追加CSSからの記述でも問題ありません。
こちらもご一読いただいて、理解を深めてみてください。また、CSSアニメーションなどをコピペでサクッとやりたい気持ちはよくわかるのですが、本件のように問題が発生した際に自ら解決できるようが手っ取り早いと思いますので、開発者ツールで動作がうまく行かない原因を確認してみるなど、試してみてください。
https://developer.mozilla.org/ja/docs/Web/CSS/animation
現状、添付のページに掲載されているCSSのソースコードを、カスタマイズ→追加CSS に入力されて、アニメーションをさせたい部分に任意のCSSクラスを付与したけど動かないということでしょうか？
状況説明が不足しており申し訳ないです。仰る通りの状況で具体的には下記の内容を挿入およびCSSクラスを付与しております。
■カスタマイズ→追加CSSに挿入
/*上からフェードイン*/
.fade-in-top {
opacity: 0;
animation: fadein-top 1.5s .3s ease-out forwards;
}
@keyframes fadein-top {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*下からフェードイン*/
.fade-in-bottom {
opacity: 0;
animation: fadein-bottom 1.5s 0 ease-out forwards;
}
@keyframes fadein-bottom {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*左からフェードイン*/
.fade-in-left {
opacity: 0;
animation: fadein-left 1.5s 0 ease-out forwards;
}
@keyframes fadein-left {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/*右からフェードイン*/
.fade-in-right {
opacity: 0;
animation: fadein-right 1.5s 0 ease-out forwards;
}
@keyframes fadein-right {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
■CSSクラスを挿入
画像を左からフェイドインをするため挿入
<div class=”fade-in-left”><figure class=”wp-block-image size-large”>
</figure></div>
こちらですが、現在はテーマに Snow Monkey を利用しておらず、同じく100%GPL 有料WordPressテーマの SWELL を利用されているようです。
ですので、Snow Monkey で同じようなことをやろうと考えると、若干カスタマイズが必要になる可能性が高いです。その方法については、フォーラム内の「カスタマイズに関する質問」にて、別途トピックを立てられると良いかと思います。
こちらのテスト環境で確認しましたが、カスタマイズ項目からは設定できませんね。CSSでの対応になるかと思います。
対応方法としては、
.c-page-header[data-has-image=true] {
min-height: ***px;
}
という形で記述すると良いでしょう。画面幅によってメディアクエリで上書きしている形になっているので、その辺りはちょっと注意が必要ですね。
参考にしていただければ幸いです。
おそらく、固定ページのアイキャッチ画像の高さはカスタマイズ画面の中では変更できなかったはずです。
CSSでの対応になると思いますが、現在の以下の設定状況を共有していただけますか？固定ページを表示した状態で以下を確認してみてください。
- カスタマイズ→デザイン→固定ページ設定→ページレイアウト
- カスタマイズ→デザイン→固定ページ設定→アイキャッチ画像の位置
ご確認お願いします。
九州機電株式会社さん
すみません、商品名ですね。
商品IDのようなもので例を出してしまいました。
キタジマさんのおっしゃるようにパラメーターで商品名を引き継ぎます。
キタジマさん
すみません、例が誤っていました。
モールサービスやASPを使用していれば、商品番号だけ引き継いで改めてAPIから商品名や説明文、価格を読み込むということはしますが、今回は商品名でした。。。失礼しました。
九州機電株式会社さん
Snow Monkey Forms にはそのような機能はありません。今後の開発で機能追加できるか検討してみます！
長谷川さん
パラメーターで商品名を引き継ぐなら単純でできそうかな？と思ったのですが、ID から商品名をどうやって引っ張ってくるのかは気になります…！
個人的によく使うので、JavaScript を使用した例を出させていただこうと思うのですが、九州機電株式会社さんは My Snow Monkey を用いたカスタマイズは可能でしょうか？
商品ページから問い合わせフォームへのリンクにパラメーターを付与しておき、
問い合わせページで JavaScript を読み込むという形ですが、可能そうでしょうか？
わかりづらい説明すみません><
画面キャプチャをしました。
背景位置（上 / 下）のレベルを弄ると背景画像がうまく表示されません><
レベルが0だと問題なく表示されます。
@キタジマさん
遅くまでありがとうございます。
ファイルをアップロードして確認したところ、
スマホ（iPhone）での挙動が改善されていました！
ありがとうございます！
取り急ぎ、ご報告までに。
またまた修正を入れてみました。iPhone のシミュレーターで開発用ページを見ながら修正した限りでは直っていそうなのですがどうでしょうか…。
その再現の場合、ボタン要素を消した上で flex-direction: column も定義をさせない場合、横幅が狭くなるかと
その挙動は display: flex の仕様通りなので、Blocks 側でよしなに対応するよりユーザー側で flex-direction: column や flex プロパティで都度対応するのが一般的だと思います。
