css微修正:vkボタン塗りのhover時とコアOutlineのhover時の白文字が一部除外指定でつかないように調整

[goutetsuguma]

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

https://github.com/vektor-inc/x-t9/issues/214

どういう変更をしたか？

• このプルリクで変更した事を記載してください

パターンをチェックしていて気になるため、以下修正しました。

VKボタンのボタンスタイル「ベタ塗り」の背景色：白色、文字の色をカスタムカラーにした場合、hover時の文字色がフロント画面で白になるので、文字色が指定されている場合は:notで除外しました。

コアのボタンのボタンスタイル「輪郭」で、テキストの色指定がある場合、hover時の文字色が白になりますが、例えば背景に白っぽい色を設定している場合にも白になってしまいテキストの色が見えづらくなるため、背景色がある場合は:notで除外しました。

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

ソースコードについて

• [x] 複数の意図の変更 （ 機能の不具合修正 + 別の機能追加など ） を含んでいないか？
• [x] 関数名 / 変数名 / クラス名 / 保存値名 はそれだけで内容が想像できるものになっているか？紛らわしい命名になっていないか？
• [x] 関数名 / 変数名 / クラス名 / 保存値名 は既存のコードの命名規則に沿ったものになっているか？

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。 書いていない場合は書かない理由を記載してください。

• [ ] 書けそうなテストは書いたか？ cssのため書いていません。

その他

• [x] readme.txt に変更内容は書いたか？
• [x] Files changed (変更ファイル)の内容は目視でちゃんと確認したか？
• [x] このチェック項目を機械的にチェックするのではなく本当にちゃんと確認をしたか？
• [x] レビュワーが確認しないでリリースしてしまっても問題ないレベルまでちゃんと作りこみ・確認をしたか？

変更内容について何を確認したか、どういう方法で確認をしたかなど

固定ページなどに、コードエディタにして以下のコードを貼ってください。 VK ボタンのスタイル「塗りつぶし」の背景が白で文字色がカスタムカラーのボタンをhoverして、文字色が白にならないことを確認してください。 コアのボタンブロックのスタイル「輪郭」でテキスト色と背景色が指定してあるボタンをhoverして、文字色が白にならないことを確認してください。

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"0","right":"0"}},"color":{"background":"#00000091"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#00000091;padding-top:var(--wp--preset--spacing--70);padding-right:0;padding-bottom:var(--wp--preset--spacing--70);padding-left:0"><!-- wp:heading {"className":"is-style-vk-heading-background_fill_lightgray"} -->
<h2 class="wp-block-heading is-style-vk-heading-background_fill_lightgray">VKボタン</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}}},"textColor":"bg-primary"} -->
<h4 class="wp-block-heading has-bg-primary-color has-text-color has-link-color">塗りつぶし</h4>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button-outer {"blockId":"a08ff941-69c4-4fb1-8cce-570172c4f555"} -->
<div class="wp-block-vk-blocks-button-outer vk_buttons"><div class="vk_buttons_col vk_buttons_col-justify-left"><!-- wp:vk-blocks/button {"buttonColor":"custom","buttonTextColorCustom":"text-normal","buttonColorCustom":"white","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","blockId":"88b1e4ac-a662-4cc4-ad22-addcadd7dd50"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-background has-white-background-color btn has-text-color has-text-normal-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="far fa-envelope vk_button_link_before"></i><span class="vk_button_link_txt">お問い合わせ</span></div></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonColor":"custom","buttonTextColorCustom":"#ff0000","buttonColorCustom":"white","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","blockId":"f00fed3c-98ee-4fc4-97c8-47bbea0e6fe6"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-f00fed3c-98ee-4fc4-97c8-47bbea0e6fe6 vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-background has-white-background-color btn has-text-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="far fa-envelope vk_button_link_before"></i><span class="vk_button_link_txt">お問い合わせ</span></div></a></div><style type="text/css"> .vk_button-f00fed3c-98ee-4fc4-97c8-47bbea0e6fe6 .has-text-color {
                color: #ff0000;
            } </style>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonColor":"custom","buttonTextColorCustom":"#83b017","buttonColorCustom":"#f8ffc4","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022fas fa-mobile-alt\u0022\u003e\u003c/i\u003e","blockId":"12ab75d0-3930-489f-8e8a-239f39f48287"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-12ab75d0-3930-489f-8e8a-239f39f48287 vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-background btn has-text-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="fas fa-mobile-alt vk_button_link_before"></i><span class="vk_button_link_txt">000-0000-0000</span></div></a></div><style type="text/css">.vk_button-12ab75d0-3930-489f-8e8a-239f39f48287 .has-background {
                background-color: #f8ffc4;
                border: 1px solid #f8ffc4;
            } .vk_button-12ab75d0-3930-489f-8e8a-239f39f48287 .has-text-color {
                color: #83b017;
            } </style>
<!-- /wp:vk-blocks/button --></div></div>
<!-- /wp:vk-blocks/button-outer -->

<!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}}},"textColor":"bg-primary"} -->
<h4 class="wp-block-heading has-bg-primary-color has-text-color has-link-color">背景なし</h4>
<!-- /wp:heading -->

<!-- wp:vk-blocks/button-outer {"blockId":"a08ff941-69c4-4fb1-8cce-570172c4f555"} -->
<div class="wp-block-vk-blocks-button-outer vk_buttons"><div class="vk_buttons_col vk_buttons_col-justify-left"><!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"white","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022far fa-envelope\u0022\u003e\u003c/i\u003e","blockId":"767f3a61-461f-4337-8c92-205829844799"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-text-color is-style-outline has-white-color btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="far fa-envelope vk_button_link_before"></i><span class="vk_button_link_txt">お問い合わせ</span></div></a></div>
<!-- /wp:vk-blocks/button -->

<!-- wp:vk-blocks/button {"buttonType":"1","buttonColor":"custom","buttonColorCustom":"#e8ff00","buttonWidthMobile":100,"buttonWidthTablet":100,"fontAwesomeIconBefore":"\u003ci class=\u0022fas fa-mobile-alt\u0022\u003e\u003c/i\u003e","blockId":"2442b979-5207-4693-b9ec-b6dc76542a4a"} -->
<div class="wp-block-vk-blocks-button vk_button vk_button-color-custom vk_button-2442b979-5207-4693-b9ec-b6dc76542a4a vk_button-width-mobile-100 vk_button-width-tablet-100"><a class="vk_button_link btn has-text-color is-style-outline btn-md" role="button" aria-pressed="true" rel="noopener"><div class="vk_button_link_caption"><i class="fas fa-mobile-alt vk_button_link_before"></i><span class="vk_button_link_txt">000-0000-0000</span></div></a></div><style type="text/css">.vk_button-2442b979-5207-4693-b9ec-b6dc76542a4a .has-text-color.is-style-outline {
                background-color: transparent;
                border: 1px solid #e8ff00;
                color: #e8ff00;
            }
            .vk_button-2442b979-5207-4693-b9ec-b6dc76542a4a .has-text-color.is-style-outline:hover {
                background-color: #e8ff00;
                border: 1px solid #e8ff00;
                color: #fff;
            } </style>
<!-- /wp:vk-blocks/button --></div></div>
<!-- /wp:vk-blocks/button-outer -->

<!-- wp:heading {"className":"is-style-vk-heading-background_fill_lightgray"} -->
<h2 class="wp-block-heading is-style-vk-heading-background_fill_lightgray">コアのボタン</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}}},"textColor":"bg-primary"} -->
<h4 class="wp-block-heading has-bg-primary-color has-text-color has-link-color">塗りつぶし</h4>
<!-- /wp:heading -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">ボタンブロック</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"primary-hover","style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-hover"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-primary-hover-color has-white-background-color has-text-color has-background has-link-color wp-element-button">000-0000-0000</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"#e6fc00"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#e6fc00">ボタンブロック</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}}},"textColor":"bg-primary"} -->
<h4 class="wp-block-heading has-bg-primary-color has-text-color has-link-color">輪郭</h4>
<!-- /wp:heading -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">何も指定なし</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"vivid-green-cyan","className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"var:preset|color|vivid-green-cyan"}}}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-vivid-green-cyan-color has-white-background-color has-text-color has-background has-link-color wp-element-button">背景白、テキストVivid green cyan</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"bg-primary","className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"var:preset|color|bg-primary"}}},"color":{"background":"#ff2200"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-bg-primary-color has-text-color has-background has-link-color wp-element-button" style="background-color:#ff2200">背景カスタムレッド、テキスト白</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","style":{"color":{"background":"#e6fc00","text":"#ff0094d6"},"elements":{"link":{"color":{"text":"#ff0094d6"}}}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background has-link-color wp-element-button" style="color:#ff0094d6;background-color:#e6fc00">背景カスタム、文字色カスタム</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"#00ffa2"}}},"color":{"text":"#00ffa2"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-link-color wp-element-button" style="color:#00ffa2">背景色なし、テキストカスタム</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"primary","className":"is-style-outline","style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-primary-color has-text-color has-link-color wp-element-button">背景色なし、テキストプライマリー</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

レビュワーの確認方法・確認する内容など

上記の実装者の確認方法と同じです。

レビュワーに回す前の確認事項

• [x] このテンプレートのチェック項目をちゃんと確認してチェックしたか？

---

レビュワー向け

確認して変更が反映されていない場合の確認事項

• プルしたか？
• ビルドしたか？
• ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
• npm install したか？
• composer install したか？

[drill-lancer]

@goutetsuguma 仕様どおりになっており問題ないと思います。 対応ありがとうございました。

---

２人目どなたか確認お願いします。