- このトピックには4件の返信、3人の参加者があり、最後に
により2ヶ月、 1週前に更新されました。
-
投稿
-
いつもお世話になっております。
今年も制作業務でsnow monkeyを活用させていただいております。ありがとうございます。
タイトルのとおりなのですが、「ボタン」ブロックにいくつかバリエーションが欲しいです。
以前も似たような要望は出させていただき、そのときにcssのカスタマイズなどもアドバイスいただきそちらで対応してはいたのですが…やはりブロックエディタ内で気軽に設置できるのが望ましいかと思い再度要望を出させていただきました。
具体的には、
１．マウスホバー時に色が反転する
２．マウスホバー時に色が変わる（左から右へ流れる）
３．矢印（ホバー時に右に動く）
４．光るボタン
などがあったらいいなと思います。
特に、snow monkeyのボタンはマウスホバー時の色変化が小さいので、１や２のようにわかりやすく変化するものはコンバージョンにも影響するかなと考えています。
また企業サイトなどでは定番の、矢印（ボタン内に矢印もしくは矢印のみ）のボタンでマウスホバー時に右に少し動くようなボタンは、snow monkeyで多く制作されるコーポレート型のサイトなどでも需要があるのではないかと思います。今はcss等で作ったりもしていますが、場合によってはレスポンシブ時に表示崩れを起こすこともあり…最初からボタンデザインに用意されていると安心で嬉しいです。
ボタンのバリエーションはキリが無いので全てを実装することは困難かと思いますが、色の反転や変化設定、矢印ボタンなどはデフォルトでテーマやテーマ専用の拡張ブロックに内包されていることも多いので、snow monkeyやsnow monkey blocksにももう少しバリエーションや設定項目が増えてくれると表現の幅が広がり嬉しいなと思います。
お忙しいところ恐縮ではございますが、ご検討いただけますと幸いです。
何卒よろしくお願いいたします。
いいねをした人: 居ません>Olein_jpさん
ご返信いただきありがとうございます。
僕の場合、お仕事で制作するサイトで、よく利用するスタイルについてはブロックスタイルを登録して、利用者がワンクリックで変えられるようにしています。
そうなんですよね、cssを都度直に書くのではなくスタイルを自分で登録しておけば、エディタ内で利用できるので自社で制作する場合などにも便利になるなとはわかっているのですが…
そこまで知識に自信があるわけでもないので、テーマやWP本体のアップデートの際にうまく効かなくなった場合の対応などを考えると、やはりよく使うものは最初からテーマやブロックに同梱されていてほしいなあというのが本音でした。。
もちろん最初から全く備わっていない機能などは自分で実装することになるでしょうし、既存の機能の拡張でも用途が限られていたり汎用的でないものは自分で追加するべきなのでしょうが、「ボタン」に関しては全く使わないサイトのほうが少ないと思いますし、そのバリエーションやマウスオーバーの効果も特殊なものではないので、他のテーマと比較した際にも「snow monkeyにもこれがあれば良いのにな～」と思うことがあったので、今回リクエストをしてみました（※だったら他のテーマを使えば…という話になるのですが…色々触ってみてもやはりsnow monkeyの素晴らしさを体感して極力snow monkeyを使いたい！となるので…）
キタジマさんの考えやアップデートの労力、またsnow monkeyの設計思想など考えるとあまり凝ったデザインやレイアウトを入れたり汎用的でないものは追加されないと思いますしその点十分理解してはいるのですが…
どこまでならOKかな～という基準も難しいので、採用されるかどうかは別として「これくらいは汎用的かな？あったら便利じゃないかな？」と私が思った部分をリクエストさせていただいた次第です。
snow monkeyが素晴らしいのでついあれもこれもと要望をしたくなるのですが、お時間あるときにでもご検討いただければなと思います。
いいねをした人: 居ません汎用的とは言ってもボタンのデザインは、数限りなくあると思いますので
Oleinさんの言われている通り、ブロックスタイルで対応するのがいいと思います。知識に自信があるわけでもないと尻込みせずに、チャレンジしてみると意外と簡単だったりするので、以下のコードをMy Snow Monkey に追加してみてください。
- マウスホバー時に色が反転する is-style-reverse
- マウスホバー時に色が変わる（左から右へ流れる） is-style-fluent
- 矢印（ホバー時に右に動く） is-style-arrow
- 光るボタン is-style-glow
の4つが、ブロックスタイルとして追加されます。
/** * Block Styles * * @link https://developer.wordpress.org/reference/functions/register_block_style/ * @param string $block_name, * @param array $style_properties */ if ( function_exists( 'register_block_style' ) ) { /** * Register block styles. */ add_action( 'init', function() { register_block_style( 'snow-monkey-blocks/btn', array( 'name' => 'reverse', 'label' => '反転', ) ); register_block_style( 'snow-monkey-blocks/btn', array( 'name' => 'fluent', 'label' => '左から右へ流れる', ) ); register_block_style( 'snow-monkey-blocks/btn', array( 'name' => 'arrow', 'label' => '矢印付き', ) ); register_block_style( 'snow-monkey-blocks/btn', array( 'name' => 'glow', 'label' => '光るボタン', ) ); } ); }CSSのサンプル
.smb-btn-wrapper.is-style-reverse .smb-btn { background: var(--bgcolor-btn-reverse); } .smb-btn-wrapper.is-style-reverse .smb-btn:hover { background: var(--bgcolor-btn-reverse-hover); } .smb-btn-wrapper.is-style-fluent .smb-btn { background: var(--bgcolor-btn-fluent); } .smb-btn-wrapper.is-style-fluent .smb-btn:hover { background: var(--bgcolor-btn-fluent-hover); } .smb-btn-wrapper.is-style-arrow .smb-btn { background: var(--bgcolor-btn-arrow); } .smb-btn-wrapper.is-style-arrow .smb-btn::after { content: '→'; } .smb-btn-wrapper.is-style-glow .smb-btn { background: var(--bgcolor-btn-glow); }いいねをした人:
＞まーちゅうさん
返信遅くなりまして申し訳ございません。
またカスタマイズのサンプルコードもありがとうございます！
教えていただいたコードでバリエーションを追加することができました。
ただそのまま貼り付けたところカスタマイザーでの背景色が反映されず全て白色になってしまったのですが、何か背景色の指定方法間違っていますでしょうか？
CSS変数で書かれているのでそのままコピペすればボタンブロックの設定で背景色を変えられると思ったのですが…（文字色の変更は可能でした）。
詳細度の問題かと思い全部に無理矢理
!importantを振ってみましたが、そうすると今度は背景色は設定できるようになったのですが、矢印が表示されなくなったりと各ボタンのエフェクトが正常に機能していないようです。自力で解決を試みたのですが思うようにいかず…お手すきの際にアドバイスいただけますと幸いです。
いいねをした人: 居ません
- このトピックに返信するにはログインが必要です。