フォーラムへの返信
-
投稿者投稿
-
文言は固定ページに「通常表示用」「確認画面用」を直接記述しており、その下にフォームを設置しています。:has()疑似クラスで[data-screen=”xxx”]を含むbodyを基準にして、各文言のクラスを出し分けている感じになりますm(_ _)m
.smf-focus-point { position: fixed; top: 0; }
こちらも試してみたのですが、現在位置が常にtop:0となるため、移動しませんでした…。
あまり気持ちよくないですが、以下のようにするか….smf-focus-point { top: -99999px; }
もしくは、アクション時にフォーム内の.smf-focus-pointではなく、body要素にフォーカスポイントを変更するということは仕様上難しいでしょうか?
♥ 0いいねをした人: 居ません早速のお返事ありがとうございます。
文言の変更はざっくりとこんな感じです。
body:has(.snow-monkey-form) .contact-input-text, body:has(.snow-monkey-form) .contact-confirm-text { display: none; } body:has([data-screen="input"]) .contact-input-text, body:has([data-screen="confirm"]) .contact-confirm-text { display: block; }
なかなかいい案だと思ったのですが、アクションした時にそもそもテキストが見えないなと…
あまりテクニカルなことをすると保守性が悪くなるので、CSSで調整できればと思っているのですが、.smf-focus-point
のtop位置を変更した場合の懸念点ってありますでしょうか?♥ 0いいねをした人: 居ませんそうでしたか…サブスク更新の判断材料でもあったので、もし状況が許すようであれば今後対応をご検討いただけると幸いです。
お忙しい中お返事ありがとうございます。
♥ 0いいねをした人: 居ませんフッター固定ナビゲーションの高さを測って、追加 CSS で bottom を固定指定しちゃうのはどうでしょうか。
こちらの挙動がどのようになるのかいまいち把握できないのですが、現状で
bottom:78px!important
を与えるとセーフエリアの有無で上スクロールの時と下スクロールの時とでボタンの位置が変わりました。1つ案としては、JSの制御を廃止して、ページトップボタンは基本固定配置。
フッター固定ナビゲーションがある場合は、重なり防止のためにページトップボタンの位置を高めに設定しておく。
フッター固定ナビゲーションを任意で高くする場合は、個人でCSSでボタンの位置を調整する。
というのもありかなと思っています。
またセーフエリア対応をmargin-bottomにすると管理しやすいのかなと。#page-top { bottom: 44px; margin-bottom: env(safe-area-inset-bottom); } // フッター固定ナビゲーションがある場合 #page-top { bottom: 64px; // 高めに設定 margin-bottom: env(safe-area-inset-bottom); }
いろんな環境を試したわけではないですが、こちらのコードでも安定しているように見えました。
♥ 0いいねをした人: 居ませんお返事ありがとうございます。
セーフエリアややこしいですね。
もう1つの問題点として、上スクロール時と下スクロール時ではボタンの位置が若干異なるので、何か両立できる良い方法があればいいのですが…。♥ 0いいねをした人: 居ません見様見真似で作ってみました。
my-snow-monkey.phpに記述
// ブロックエディター用の JS 読み込み add_action( 'enqueue_block_editor_assets', function () { wp_enqueue_script( 'my_editor', MY_SNOW_MONKEY_URL . '/js/editor.js', [ 'wp-element', 'wp-rich-text', 'wp-editor' ], filemtime( MY_SNOW_MONKEY_PATH . '/js/editor.js' ), true ); } );
jsに記述
(function (richText, element, editor) { richText.registerFormatType('my-editor/editor01', { title: '折り返しを制限', tagName: 'span', className: 'inline-block', edit: function (args) { return element.createElement(wp.blockEditor.RichTextToolbarButton, { icon: 'admin-customizer', title: '折り返しを制限', onClick: function () { args.onChange(richText.toggleFormat(args.value, { type: 'my-editor/editor01' })); }, isActive: args.isActive, }); }, }), richText.registerFormatType('my-editor/editor02', { title: 'カスタムspan', tagName: 'span', className: 'custom-span', edit: function (args) { return element.createElement(wp.blockEditor.RichTextToolbarButton, { icon: 'editor-code', title: 'カスタムspan', onClick: function () { args.onChange(richText.toggleFormat(args.value, { type: 'my-editor/editor02' })); }, isActive: args.isActive, }); }, }) }( window.wp.richText, window.wp.element, window.wp.editor ));
一応動いてはいるようですが、ハンドブックを見ても前提が多く難しいので、他の記事を見ながら作成しました。
依存関係なども曖昧なのですが、wp-rich-textのみで良かったりしますかね?
もし可能であれば、ご教示いただければ幸いです。♥ 0いいねをした人: 居ませんありがとうございます。
こちらline-heightを調整された感じですかね?
チェックボックスがずれてしまうようです…!♥ 0いいねをした人: 居ませんありがとうございます。
追記:iPad(Safari、Chrome)でも同様の現象だったのでこちらも併せて共有しておきます。
お手数ですが、よろしくお願いいたします。
♥ 0いいねをした人: 居ません -
投稿者投稿