[キタジマ タカシ]

Snow Monkey Forms のバリデーションチェックは JavaScript ではなくて PHP で処理するので、送信ボタンを押したタイミングでフォームがリロードされます。つまり、そのタイミングでフォームの HTML 自体が新しいものに置き換わるので、日付ピッカーが適用された HTML がそこでなくなってしまい、動作しなくなるのだと思います。

jQuery UI に詳しくないので具体的にどう書き換えたら良いのかはわからないのですが、理屈的には下記のページの通りだと思います。

jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ – Qiita

知ってるよって？知ってる人には当たり前、でも知らない人はかなり躓くんだよ！事象こんなボタンを作るじゃろ<div class="btn-area"> &lt…

qiita.com

♥ 0

Who liked: No user

[キタジマ タカシ]

現状

<a class="c-btn" href="xxxxx/#access" style="color:white;background-color:#00AEEB;border:1px solid"><b>アクセス</b></a>

となっていて、.u-smooth-scroll が付与されていないみたいなので、追加してみてください！

♥ 1

Who liked:

[まーちゅう]

汎用的とは言ってもボタンのデザインは、数限りなくあると思いますので
Oleinさんの言われている通り、ブロックスタイルで対応するのがいいと思います。

知識に自信があるわけでもないと尻込みせずに、チャレンジしてみると意外と簡単だったりするので、以下のコードをMy Snow Monkey に追加してみてください。

1. マウスホバー時に色が反転する is-style-reverse
2. マウスホバー時に色が変わる（左から右へ流れる） is-style-fluent
3. 矢印（ホバー時に右に動く） is-style-arrow
4. 光るボタン is-style-glow

の4つが、ブロックスタイルとして追加されます。

/**
 * Block Styles
 *
 * @link https://developer.wordpress.org/reference/functions/register_block_style/
 * @param string $block_name,
 * @param array  $style_properties
 */

if ( function_exists( 'register_block_style' ) ) {
	/**
	 * Register block styles.
	 */
	add_action(
		'init',
		function() {

			register_block_style(
				'snow-monkey-blocks/btn',
				array(
					'name'         => 'reverse',
					'label'        => '反転',
				)
			);

			register_block_style(
				'snow-monkey-blocks/btn',
				array(
					'name'         => 'fluent',
					'label'        => '左から右へ流れる',
				)
			);

			register_block_style(
				'snow-monkey-blocks/btn',
				array(
					'name'         => 'arrow',
					'label'        => '矢印付き',
				)
			);

			register_block_style(
				'snow-monkey-blocks/btn',
				array(
					'name'         => 'glow',
					'label'        => '光るボタン',
				)
			);

		}
	);
}

CSSのサンプル

.smb-btn-wrapper.is-style-reverse .smb-btn {
	background: var(--bgcolor-btn-reverse);
}

.smb-btn-wrapper.is-style-reverse .smb-btn:hover {
	background: var(--bgcolor-btn-reverse-hover);
}

.smb-btn-wrapper.is-style-fluent .smb-btn {
	background: var(--bgcolor-btn-fluent);
}

.smb-btn-wrapper.is-style-fluent .smb-btn:hover {
	background: var(--bgcolor-btn-fluent-hover);
}

.smb-btn-wrapper.is-style-arrow .smb-btn {
	background: var(--bgcolor-btn-arrow);
}

.smb-btn-wrapper.is-style-arrow .smb-btn::after {
	content: '→';
}

.smb-btn-wrapper.is-style-glow .smb-btn {
	background: var(--bgcolor-btn-glow);
}

♥ 3

Who liked:

[千葉龍也]

ご確認ありがとうございます。

何が間違っているのか全くわからないので実際に追加CSSに書いたコードを確認してほしいです。

@media (max-width: 639px) {
  .c-hamburger-btn__bars {
    height: 20px;
    width: 25px;
  }
  .c-hamburger-btn__bar {
    height: 2px;
  }
  .c-hamburger-btn__bar:nth-of-type(2) {
    top: 9px;
  }
  .c-hamburger-btn__bar:nth-of-type(3) {
    top: 18px;
  }
}

♥ 0

Who liked: No user

[キタジマ タカシ]

はい、それで大丈夫です！

ソースを確認して、追加 CSS に入力されているであろう CSS を検証してみたところ、上記のエラーがでました。閉じミスや括弧が全角になっていないかなど再度確認してみてください。
※インデントを丁寧にやると閉じミスは発見しやすいと思います。

♥ 0

Who liked: No user

[GONSY]

現状での結論は以下のとおりです。

Snow Monkey Formsで、セレクトボックスで選択する内容によって、次に表示される項目の内容を変えたい。

このトピックには2件の返信、2人の参加者があり、最後にmrcにより7ヶ月前に更新されました。 3件の投稿を表示…

snow-monkey.2inc.org

　
CF7 ＋ Conditional Fields for Contact Form 7 だとダメなんでしょうか？
　

♥ 1

Who liked:

[ひげガール]

Olein 様

ご回答ありがとうございます！（お礼を送ったつもりが送れていませんでした。）
Olein 様にご教示いただいた方法で、無事、実現できることができました！！

また、Olein さんのウェブサイトとかYoutube、お世話になっています。
あと、Twitterも見てます！

いつも本当にありがとうございます。
この場をお借りしてお礼申し上げます！

♥ 0

Who liked: No user

[shone]

>Olein_jpさん

 

ご返信いただきありがとうございます。

 

僕の場合、お仕事で制作するサイトで、よく利用するスタイルについてはブロックスタイルを登録して、利用者がワンクリックで変えられるようにしています。

 

そうなんですよね、cssを都度直に書くのではなくスタイルを自分で登録しておけば、エディタ内で利用できるので自社で制作する場合などにも便利になるなとはわかっているのですが…

そこまで知識に自信があるわけでもないので、テーマやWP本体のアップデートの際にうまく効かなくなった場合の対応などを考えると、やはりよく使うものは最初からテーマやブロックに同梱されていてほしいなあというのが本音でした。。

 

もちろん最初から全く備わっていない機能などは自分で実装することになるでしょうし、既存の機能の拡張でも用途が限られていたり汎用的でないものは自分で追加するべきなのでしょうが、「ボタン」に関しては全く使わないサイトのほうが少ないと思いますし、そのバリエーションやマウスオーバーの効果も特殊なものではないので、他のテーマと比較した際にも「snow monkeyにもこれがあれば良いのにな～」と思うことがあったので、今回リクエストをしてみました（※だったら他のテーマを使えば…という話になるのですが…色々触ってみてもやはりsnow monkeyの素晴らしさを体感して極力snow monkeyを使いたい！となるので…）

 

キタジマさんの考えやアップデートの労力、またsnow monkeyの設計思想など考えるとあまり凝ったデザインやレイアウトを入れたり汎用的でないものは追加されないと思いますしその点十分理解してはいるのですが…

どこまでならOKかな～という基準も難しいので、採用されるかどうかは別として「これくらいは汎用的かな？あったら便利じゃないかな？」と私が思った部分をリクエストさせていただいた次第です。

snow monkeyが素晴らしいのでついあれもこれもと要望をしたくなるのですが、お時間あるときにでもご検討いただければなと思います。

♥ 0

Who liked: No user

[shone]

>キタジマさん

 

お世話になっております。

ご返信いただきありがとうございます。

 

ご紹介いただいたコードはsnow monkey blocksのほうの「メディアとテキスト」でよろしいでしょうか？

WordPressの追加CSSに書いてみたのですが、やはり画像の上下に余白が生まれてしまいました…

クラスを指定したので何か記述ミスなどでうまくいっていないのか？と思いそのままコピペもしてみたのですが同様でした。

 

 

セクション（ブロークングリッド）については、PC では margin という意味での余白はないので、具体的にどういう感じが想像できませんでした。すみません…。

 

こちらは、セクション（ブロークングリッド）の場合は余白が無いのでデフォルトで余白の無い画像、たとえば添付画像のように下の余白が無いものだとその次のセクションや項目とピッタリくっつく、と言う理解でよろしいでしょうか？

こちらも試してみたところうまくいかない…と思ったのですが、ブロック設定のところにパディングの項目があったので0にしたところこちらでピッタリくっつきました。基本的にはセクション（ブロークングリッド）で対応すれば良さそうでしょうか…？

♥ 0

Who liked: No user

[キタジマ タカシ]

こちらのアクティブなメニューに対する背景色、文字色は追加CSSで設定する必要があるのでしょうか？

いえ、カスタマイザー→デザイン→ヘッダー→グローバルナビゲーションのカレント表示エフェクトの設定に応じて、自動的に装飾がおこなわれます。

ヘッダー

サイト全体で共通する、ヘッダーの設定がまとめられた設定パネルです。設定はカスタマイザーから行います。 設定方法…

snow-monkey.2inc.org

もしグローバルナビゲーションの文字色や、リンク色などを CSS で独自にカスタマイズされているのであれば、その影響で装飾が上書きされて、というのは考えられるかもしれません。

♥ 1

Who liked:

[PK]

ご確認ありがとうございます！

＞この「メニュー」というのは、グローバルナビゲーションに割り当てているメニューのことでしょうか？

はい、おっしゃるとおりです。念のため設定画面を共有します。

 

>グローバルナビゲーションであれば、このように自動的にカレントページのメニュー項目の色が変わるようになっているのですが、それがなっていない、ということでしょうか？

はい、上記の状態で、サイト回遊をしてもメニューの文字色が変わりません。

デベロッパーツールを使ってサイト上で確認したところ、アクティブメニュー用の記述は適用されているようでした。

こちらのアクティブなメニューに対する背景色、文字色は追加CSSで設定する必要があるのでしょうか？

お手数おかけしますが、ご確認のほどよろしくお願いいたします！

♥ 0

Who liked: No user

[キタジマ タカシ]

「メディアとテキスト」や「セクション（ブロークングリッド）」はある程度の決まった見た目のものを簡単に実現できるというブロックになります。このようなブロックに汎用的（ユーザーの多くが一般的に利用する）でない設定をブロックに持たせるのは混乱を招くので、独自にブロックスタイルを追加したり、CSS で調整してもらうのが良いかなと思います。

メディアとテキストブロックだとこういう感じでしょうか。
※下記のサンプルは全てのメディアとテキストブロックに反映されるため、本来は追加 CSS クラスを記述してそれをセレクタにしたり、ブロックスタイルを追加して CSS を書くのが良いです。

.smb-media-text__contents-wrapper {
  margin: 0 !important;
}

セクション（ブロークングリッド）については、PC では margin という意味での余白はないので、具体的にどういう感じが想像できませんでした。すみません…。

♥ 0

Who liked: No user

[Olein_jp]

追加されるかどうかはわかりませんが、僕の場合、お仕事で制作するサイトで、よく利用するスタイルについてはブロックスタイルを登録して、利用者がワンクリックで変えられるようにしています。

register_block_style() – Function | Developer.WordPress.org

Registers a new block style.

developer.wordpress.org

希望されるブロックスタイルが追加されなかった場合には、ブロックスタイルを独自で用意すると便利かと思います。それほど難しい仕組みでもありませんし、情報も探せば多いと思います。

♥ 2

Who liked:

[Olein_jp]

構造的に .smb-tabs__tab のもう一つ上の階層から指定する必要があります。

.smb-tabs__tab-wrapper:nth-child(1) .smb-tabs__tab {
    background-color: red;
}

.smb-tabs__tab-wrapper:nth-child(2) .smb-tabs__tab {
    background-color: blue;
}

また、 .smb-tabs__tab に関連して一部CSSプロパティで指定されているものもあるので、実現されたいことによっては、こちらでの管理を活用しても良いかもしれません。

--smb-tabs--tab-background-color: var(--smb-tabs--background-color);
--smb-tabs--tab-border-color: var(--smb-tabs--border-color);
--smb-tabs--tab-color: var(--smb-tabs--color);

♥ 11

Who liked:

[キタジマ タカシ]

これはカスタマイズのレベルではかなり難しい気がして、多分スライダーを実現している元の js のライブラリのほうに手を入れないといけないのかなという気がします。まずはできるかどうかの検証から必要だと思うので、今後の検討課題とさせてください！（GitHub に　issue は立てました）

♥ 0

Who liked: No user