-
投稿者検索結果
-
2023年12月23日 12:53 AM #134569
返信が含まれるトピック: head内にタグを入れたい(TOPページとお問い合わせページにそれぞれ)
【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】トピック立てるときはこちらの情報を入れてください。
ご質問のなかに・・・お問い合わせページ完了後のサンクスページ
とのことですが、Snow Monkey Forms を以下の方法で送信完了画面(別ページ)にジャンプさせているという認識で合ってますか?
Snow Monkeyに限らず、head内に入れるなら、以下のような感じになると思います。
add_action( 'wp_head', function () { if ( is_front_page() ) { // トップページの場合 ?> // 「タグpagevisit」の中身 <?php } elseif ( is_page( 'thanks' ) ) { // 送信完了ページのスラッグが thanks の場合 ?> // 「タグsignup」の中身 <?php } } );
2023年12月21日 3:42 PM #134529CSSなどチェックいたしました
バリデーション時にかかるCSS について active focus 時のカラー(水色)と干渉しているようでして
テストでラジオだけせっちしたフォーム を用意したところ 北島さんと同様 問題なかったのですが…
いろいろテストしておりますが、テストつづけつつ、一度以下にて取り急ぎ対応としてみました
※別途CSSにて 以下を カスタマイザーの追加CSS からかけております
.smf-form .smf-item [data-invalid="1"] { border-color: #d98585 !important; }
♥ 0Who liked: No user2023年12月21日 10:03 AM #134522返信遅くなってすみません。こちらの環境で試してみたのですが、ラジオボタンの1個目も赤丸になっているみたいでした。なのでもしかしたら独自に追加している CSS が影響している可能性もあるかもしれません。
もし URL をここで共有することが可能であれば、こちらで確認することもできますのでご検討ください!
♥ 0Who liked: No user2023年12月20日 1:40 PM #134510返信が含まれるトピック: スクロールした時にマスクされている画像がシュッと出てくるアニメーションをつけたい
件のトピックの場合は Snow Monkey Editor のアニメーションについての話ですが、古湯温泉のサイトのアニメーションでいうと Snow Monkey Editor のアニメーションには同じものが無いので、下記のようなページを参考に独自で実装するしか無いのかなと思います。
同じでなくても良いのなら、Snow Monkey Editor のアニメーション機能でまぁこれで良いか…というものを設定するのが一番簡単だとは思います。
♥ 0Who liked: No user2023年12月19日 11:36 PM #134495返信が含まれるトピック: scroll-hintをアコーディオンブロックの中身に適用したい
2023年12月19日 3:45 PM #134486返信が含まれるトピック: scroll-hintをアコーディオンブロックの中身に適用したい
ちなみに、こちらの環境ではこれででました。
document.addEventListener( "DOMContentLoaded", () => { new ScrollHint(".c-scroll-hint", { suggestiveShadow: true, remainingTime: 5000, i18n: { scrollable: "スクロールできます", }, }); } );
♥ 0Who liked: No user2023年12月19日 3:36 PM #134485返信が含まれるトピック: scroll-hintをアコーディオンブロックの中身に適用したい
とりあえず上記のコードをこちらの環境には入れてみたのですが、わからなかったところがあるので教えてください。
1.
scroll-hint
の js の依存関係に['swiper_js']
が指定されています。この場合、swiper_js
な js が読み込まれていないとscroll-hint
も読み込まれないと思うのですが、そこは大丈夫でしょうか?2. デフォルトだとテーブルはコンテンツ幅を超えずに横スクロール自体をしない状態で表示されると思います。別途 CSS 等でテーブルの中身の折返しを無効化したりとか、セルの幅を指定したりとかして、テーブルがスクロールする状態にはしていますかね?
♥ 0Who liked: No user2023年12月19日 11:00 AM #134472返信が含まれるトピック: Googleフォントの読み込みについて
キタジマさん
ご教示いただき誠にありがとうございます。
結果的に、My Snow Monkeyプラグイン内直下にfontsフォルダを作成し、 googleフォントから当該フォントをダウンロードし、それをfontsフォルダの中に入れた上で、以下のコードにより当該フォントの読み込みが成功し、かつカスタマイザー内の「フォントの太さ」でSemiBold 600を選択できるようになりました。add_filter( 'snow_monkey_font_family_settings', function( $settings ) { array( $settings['noto-sans-jp']['variation']['600'] = array( 'label' => 'SemiBold 600', 'src' => MY_SNOW_MONKEY_URL . '/fonts/NotoSansJP-SemiBold.ttf', ) ); return $settings; } );
2023年12月19日 9:44 AM #134468返信が含まれるトピック: scroll-hintをアコーディオンブロックの中身に適用したい
お世話になっております。
その後、読み込み方法やjsの記述など試してみたのですが、解決しませんでした。
以下は関係ある3ファイルの記述例です。どこか見落としているおかしなところなどありますでしょうか?
==============================================================
my-snow-monkey.php
add_action( 'wp_enqueue_scripts', function () { /* scroll-hint.css読み込み */ // wp_enqueue_style( // 'scroll-hint_css', // 'https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css' // ); // /* scroll-hint.js読み込み */ // wp_enqueue_script( // 'scroll-hint_js', // 'https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js', // ); wp_enqueue_style( 'scroll-hint', MY_SNOW_MONKEY_URL . '/override/dist/assets/css/scroll-hint.css', [Framework\Helper::get_main_style_handle()], filemtime(MY_SNOW_MONKEY_PATH . '/override/dist/assets/css/scroll-hint.css') ); wp_enqueue_script( 'scroll-hint', MY_SNOW_MONKEY_URL . '/override/dist/assets/js/scroll-hint.min.js', ['swiper_js'], MY_SNOW_MONKEY_PATH . '/override/dist/assets/js/scroll-hint.min.js', ); } );
===================================================================
アコーディオンブロックの中身<div class="smb-accordion__item__body is-layout-constrained wp-block-accordion-item-is-layout-constrained"> <figure class="wp-block-table alignfull is-style-stripes is-scroll c-scroll-hint" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"> <table style="border-width:1px"> <tbody> </tbody> </table> </figure> </div>
=======================================================================
js
new ScrollHint(".c-scroll-hint", { suggestiveShadow: true, remainingTime: 5000, i18n: { scrollable: "スクロールできます", }, });
♥ 0Who liked: No user2023年12月18日 10:29 PM #134461返信が含まれるトピック: ハンバーガーメニューの大きさを縦横比維持して調整したい
色などはおいておいて、とりあえず下記の CSS で 50×40 になるかなと思います。試してみてください!
.c-hamburger-btn__bars { height: 40px; width: 50px; } .c-hamburger-btn__bar:nth-of-type(2) { top: 20px; } .c-hamburger-btn__bar:nth-of-type(3) { top: 40px; }
♥ 0Who liked: No user2023年12月14日 3:58 PM #134393ご検討ありがとうございます!
WCAG 達成基準 1.3.1: 情報及び関係性の達成方法 では、
fieldset
とlegend
を使う他にも
aria-labelledby を使用する方法(ARIA16)がありました。ラジオボタンやチェックボックス以外(単一のコントロールとラベルで成立するもの)の邪魔にならない方法があると良いのですが🙏
2023年12月14日 3:00 PM #134390と、書き込んですぐすみません、Form Design Patterns という本をみてたら「ラジオボタンやチェックボックス以外のところを fieldset と legend で囲むのは仕様上は問題ないけどくどいのでやめたほうが良い」と書いてありました。
ということは、
お名前 [ ] Snow Monkey が好きですか の方式にして、右側の「Snow Monkey が好きですか」は管理画面上では設定できるけど、実際の画面では見えなくする、みたいな形のほうが良いのかなぁという気もしてきました。右側には複数個のコントロールを入れられるし、後方互換性も気にしなくて済むので。もうちょっと考えてみます…。
2023年12月14日 3:00 PM #134389と、書き込んですぐすみません、Form Design Patterns という本をみてたら「ラジオボタンやチェックボックス以外のところを fieldset と legend で囲むのは仕様上は問題ないけどくどいのでやめたほうが良い」と書いてありました。
ということは、
お名前 [ ] Snow Monkey が好きですか の方式にして、右側の「Snow Monkey が好きですか」は管理画面上では設定できるけど、実際の画面では見えなくする、みたいな形のほうが良いのかなぁという気もしてきました。右側には複数個のコントロールを入れられるし、後方互換性も気にしなくて済むので。もうちょっと考えてみます…。
2023年12月14日 2:25 PM #134388時間あいちゃってすみません! あまり詳しくなかったのでいろいろ調べてみたところ、
legend
はfieldset
の最初の子要素でないといけない等ルールがあるみたいだったので、一応下記のような感じで変更を入れようかなと考えているところです。<div class="wp-block-snow-monkey-forms-item smf-item"> <fieldset> <legend class="smf-item__col smf-item__col--label"> <span class="smf-item__label"> <span class="smf-item__label__text">ここにラベル</span> </span> </legend> <div class="smf-item__col smf-item__col--controls"> <div class="smf-item__controls"> <div class="smf-placeholder"> ここにフォームコントロール... </div> </div> </div> </fieldset> </div>
2023年12月12日 12:37 PM #134335返信が含まれるトピック: カスタムタクソノミーのターム一覧を、階層構造を持ったリストで表示したい
-
投稿者検索結果