hisanobu

フォーラムへの返信

15件の投稿を表示中 - 1 - 15件目 (全45件中)
  • 投稿者
    投稿
  • hisanobu
    参加者
    28

    確認できました!
    ご対応ありがとうございます。

    1
    いいねをした人:
    hisanobu
    参加者
    28

    ナビゲーションラベルにimgタグをそのまま入れれば反映されるので、あとは大きさをCSSで調整すれば同じ感じになるかなと思います。

    .p-footer-sticky-nav img {
    	width: 40px;
    }
    3
    いいねをした人:
    hisanobu
    参加者
    28

    フッター固定ナビゲーションの高さを測って、追加 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
    いいねをした人: 居ません
    hisanobu
    参加者
    28

    お返事ありがとうございます。

    セーフエリアややこしいですね。
    もう1つの問題点として、上スクロール時と下スクロール時ではボタンの位置が若干異なるので、何か両立できる良い方法があればいいのですが…。

    0
    いいねをした人: 居ません
    hisanobu
    参加者
    28

    なるほど…ライブラリ便利ですね

    もうちょっと調べて本番実装してみようと思います。
    ご回答ありがとうございました!

    1
    いいねをした人:
    返信先: 任意のspan要素をブロックに配置したい #134005
    hisanobu
    参加者
    28

    見様見真似で作ってみました。
     

    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
    いいねをした人: 居ません
    返信先: 任意のspan要素をブロックに配置したい #133915
    hisanobu
    参加者
    28

    ありがとうございます!

    まだこの辺の前提知識がないため、いろいろと調べてみます。

    1
    いいねをした人:
    hisanobu
    参加者
    28

    確認できました!

    早急なご対応ありがとうございました!

    1
    いいねをした人:
    hisanobu
    参加者
    28

    ありがとうございます。

    こちらline-heightを調整された感じですかね?
    チェックボックスがずれてしまうようです…!

    0
    いいねをした人: 居ません
    hisanobu
    参加者
    28

    ありがとうございます。

    追記:iPad(Safari、Chrome)でも同様の現象だったのでこちらも併せて共有しておきます。

    iPadで検証

    お手数ですが、よろしくお願いいたします。

    0
    いいねをした人: 居ません
    hisanobu
    参加者
    28

    お返事ありがとうございます。

    「テキスト入力後わずかに下の項目が動く」→なぜか端末の画面収録を使うと再現できないので、別のカメラで撮りました。inputタグで動きます。

    動画ファイル

    0
    いいねをした人: 居ません
    hisanobu
    参加者
    28

    お返事ありがとうございます。

    「リンクを表示」というのは、基本的な使い方として「パネルがクリックできることを文字を出して明示するための機能」という捉え方ですね、承知いたしました。

    ブロックスタイルの方も承知いたしました。

    ご回答ありがとうございます。

    0
    いいねをした人: 居ません
    返信先: ボタン要素にaria-labelの追加を希望 #130784
    hisanobu
    参加者
    28

    おお、マジですか!
    コード見てなるほどと感心してしまいました。
    細かい点まで実装ありがとうございました。

    ではトピック閉じさせていただきます。

    1
    いいねをした人:
    返信先: ボタン要素にaria-labelの追加を希望 #130687
    hisanobu
    参加者
    28

    アップデートで確認できました!
    他の部分まで実装いただきありがとうございます。

    // ハンバーガーメニューのmenuを削除
    add_filter(
      'snow_monkey_get_template_part_args_template-parts/header/hamburger-btn',
      function( $args ) {
        $args['vars']['_label'] = '';
        return $args;
      }
    );

    文字の削除はこのように処理しているのですが、同時にフックでbuttonに属性追加することってできますでしょうか?
    それともJavaScriptが適切ですかね?

    0
    いいねをした人: 居ません
    返信先: ボタン要素にaria-labelの追加を希望 #130623
    hisanobu
    参加者
    28

    申し訳ありません。確かに、menuの文字列は削除してました…!
    アイコンのみのハンバーガーメーニューの実装は多いため、button要素自体にラベルがあった方が都合は良いですが、.c-hamburger-btn__labelとの兼ね合いがありますよね…。

    アコーディオンブロックの更新の件、承知いたしました。ありがとうございます!

    0
    いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全45件中)

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。