Snow Monkey Blocks「パネル」ブロックのフォーカスを可視化する

0
いいねをした人: 居ません
  • このトピックには5件の返信、2人の参加者があり、最後にmjmjsachiにより2週、 5日前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #122546
    mjmjsachi
    参加者
    7

    【Snow Monkey のバージョン】20.0.1
    【Snow Monkey Blocks のバージョン】19.1.0
    【ブラウザ】Chrome

    ### 実現したかったこと
    Snow Monkey Blocks の「パネル」ブロックのフォーカスを可視化したい

    ### 試したこと
    CSSで次のように書くとアウトラインが表示されました。

    .smb-panels__item a:focus::after {
    outline: solid;
    }
    • .smb-panels__item は div要素なのでそのままではフォーカスが当たらない
    • .smb-panels__item内の a要素は高さ・幅が0なのでフォーカスが当たっても見えない
    • a::after にフォーカスリングを表示させた

    フォーカスリングではなく、:hover とスタイルを合わせたい場合は
    outline〜 を box-shadow〜 に書き換えると良いかと思います。

    2
    いいねをした人:
    #122623
    キタジマ タカシ
    参加者
    1963

    あ、疑似要素ってデフォルトだとフォーカスリングが出ないってことですかね、知らなかった…! これは本体に取り込んだほうが良いと思うので、確認して取り込みます!

    1
    いいねをした人:
    #122645
    mjmjsachi
    参加者
    7

    あ!こちらはパネルブロックの「リンク設定」で「リンクを表示:OFF」にしている場合のものでした。
    「リンクを表示:ON」にしてリンクテキストを記入した場合は、ちゃんとフォーカスが表示されます。

    疑似要素になっている影響か、項目ブロックのバナースタイルでもフォーカスリングが見えない状況のようです。
    パネル・バナーともお気に入りのブロックなので、ご確認いただけるとうれしいです!

    1
    いいねをした人:
    #122657
    キタジマ タカシ
    参加者
    1963

    デフォルトの見た目に合わせたい + 設定によって内側にずらさないとフォーカスリングが途切れてしまうときがある、ので、デフォルトは下記の CSS でいきたいと思います!

    .smb-panels__item__action > a:focus:after {
      outline: 1px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

    項目ブロックのほうも確認します!

    2
    いいねをした人:
    #122706
    キタジマ タカシ
    参加者
    1963

    v19.2.0 で変更を入れました!

    1
    いいねをした人:
    #122710
    mjmjsachi
    参加者
    7

    本体への取り込みありがとうございます!
    これからも Snow Monkey のお世話になります!!!

    1
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「Snow Monkey Blocks「パネル」ブロックのフォーカスを可視化する」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ