フォーラムへの返信
-
投稿者投稿
-
汎用的とは言ってもボタンのデザインは、数限りなくあると思いますので
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); }
Snow Monkey Advent Calendar 2021 に書いた記事です。
ご参考にどうぞ。
マニュアルのURL貼っておきます。
Localのことは、Localのコミュニティで一度調べてみてはどうですか?
Wappalyzerで確認すると、EWWW Image Optimizer を使用されているようです。
EWWW Image Optimizer の設定「WebP の配信方法」で、「Picture WebP Rewriting」にチェックを入れると
img
タグがpicture
タグに置き換わるので、以下のCSSを追加する必要があります。.smb-section-break-the-grid__figure>picture { position: relative; } .smb-section-break-the-grid__figure>picture img { width: 100%; }
参考例のURLを貼っておきます。
「EXHIVITION HALL 展示場」の「続きを読む」の所が、該当箇所です。
その他、CODEPEN等にもいくつかサンプルがありました。
こちらのプラグインを使用して、再利用ブロックのスラッグが
footer
の場合は以下のコードで実装出来ます。add_action( 'snow_monkey_prepend_footer', function() { if ( function_exists( 'rbui_get' ) ) { echo rbui_get( 'footer' ); } } );
元々の画像の左側に空白があるので、空白の無い画像に差し替えてみてはどうでしょうか?
https://misato.or.jp/wp-content/uploads/2022/09/21-08-04-00-16-48-734_deco-1920×1859.jpg追記:ローカル環境では、特に問題なくアップデートできました。
♥ 0いいねをした人: 居ませんこんにちは。
遷移前のページのリンクに
<a href="/contact/?post_id=1234">お問い合わせはこちら</a>
のような感じで、クエリパラメーター(?post_id=1234
の部分、1234はその投稿のID)を設定されていますか?♥ 0いいねをした人: 居ません -
投稿者投稿