フォーラムへの返信
-
投稿者投稿
-
ありがとうございます!
ボタン単体であれば、その方法で実装ができることが確認できました!
ただ、ナビゲーションブロックの場合は、固定ページなどの他のブロックが入っていて、2段に表示されてしまいますね〜
色々と触ってみましたが、ナビゲーションブロックではCSS書く必要がありそうです🤔
♥ 0いいねをした人: いません失礼しました…。
両端ブロックでも最小幅を上書きできるようになったと勘違いしておりました…。
今回はナビゲーションブロックをdivブロックでラップして、divブロックの追加CSS機能でボタンブロックにwidthを与えて対応しました!
あと、レスポンシブスイッチャーのおかげで、今回の場合でもメディアクエリのCSSを書かなくて良いことに感激しております😊
♥ 0いいねをした人: いませんご対応ありがとうございます!
ナビゲーションブロック単体で使った時は最小幅が反映されました。
ただ、ヘッダーで使った時は最小幅が反映されません…。
両端ブロックと干渉してるっぽいです!
♥ 0いいねをした人: いませんすみません!
ナビゲーションのボタン部分に余計なクラスをつけていました。
正しくはこちらです。
<!-- wp:navigation-link {"label":"Sample1","type":"page","id":8,"url":"http://unitone.local/sample1/","kind":"post-type"} /--> <!-- wp:navigation-link {"label":"Sample2","type":"page","id":10,"url":"http://unitone.local/sample2/","kind":"post-type"} /--> <!-- wp:navigation-link {"label":"Sample3","type":"page","id":12,"url":"http://unitone.local/sample3/","kind":"post-type"} /--> <!-- wp:buttons --> <div class="wp-block-buttons"><!-- wp:button {"unitone":{"minWidth":"300px"},"className":"is-style-fill"} --> <div class="wp-block-button is-style-fill"><a>サンプルボタン</a></div> <!-- /wp:button --></div> <!-- /wp:buttons -->
あと、サンプルボタンの部分は
class="wp-block-button__link wp-element-button"
のa
タグで囲まれています。♥ 0いいねをした人: いませんご連絡が遅れてしまい、申し訳ありません…。
ローカルサイトで実験しているので、ブロックコードを共有させていただきます。
↓ヘッダー部分のコード
<!-- wp:unitone/section {"tagName":"div","unitone":{"maxWidth":"100%","padding":"-1"},"align":"full"} --> <div class="alignfull unitone-section"><div data-unitone-layout="gutters"><div data-unitone-layout="container"><div data-unitone-layout="stack"><!-- wp:unitone/both-sides {"unitone":{"alignItems":"center","gap":{"column":"-1","row":"-2"}}} --> <div data-unitone-layout="both-sides"><!-- wp:unitone/stack {"unitone":{"gap":"0"}} --> <div data-unitone-layout="stack"><!-- wp:site-logo /--> <!-- wp:site-title /--></div> <!-- /wp:unitone/stack --> <!-- wp:navigation {"ref":14,"className":"is-style-unitone-accordion","style":{"typography":{"fontWeight":"600","fontStyle":"normal"}},"fontSize":"unitone-s","layout":{"type":"flex","orientation":"horizontal","justifyContent":"left"}} /--></div> <!-- /wp:unitone/both-sides --></div></div></div></div> <!-- /wp:unitone/section -->
↓ナビゲーション部分のコード
<!-- wp:navigation-link {"label":"Sample1","type":"page","id":8,"url":"http://unitone.local/sample1/","kind":"post-type"} /--> <!-- wp:navigation-link {"label":"Sample2","type":"page","id":10,"url":"http://unitone.local/sample2/","kind":"post-type"} /--> <!-- wp:navigation-link {"label":"Sample3","type":"page","id":12,"url":"http://unitone.local/sample3/","kind":"post-type"} /--> <!-- wp:buttons --> <div class="wp-block-buttons"><!-- wp:button {"unitone":{"minWidth":"300px"},"className":"is-style-fill min-400"} --> <div class="wp-block-button is-style-fill min-400"><a>サンプルボタン</a></div> <!-- /wp:button --></div> <!-- /wp:buttons -->
ご確認をお願いいたします。
♥ 0いいねをした人: いませんありがとうございます!
アップデートしたところ、最小幅が効いていることが確認できました。
ただ、やはり両端ブロック内にナビゲーションブロックを設置すると最小幅は効きませんでした。
追加CSSで最小幅は設定できるので、両端ブロックの特性としてわざわざ修正する必要もない気もしますが…。
♥ 0いいねをした人: いませんありがとうございます!
いただいたコードを追加したところ、ナビゲーションブロック単体の場合は最小幅が機能しました。(ただし、エディター上では反映されませんでした)
また、どうも両端ブロックとの相性もありそうな感じでした。
- 両端ブロック
- サイトロゴ
- ナビゲーション
というよくあるヘッダー構成にしたところ、いただいたコードを追加しても最小幅が効きませんでした🤔
♥ 0いいねをした人: いません本当ですか!
これは超嬉しいアップデートです!
楽しみにお待ちしております。
♥ 0いいねをした人: いませんそうだったのですね!
SWELLさんとかは、確かオリジナルブロックが一番上に表示されていたはず…。
どうやってやってるんでしょうね〜🤔
♥ 0いいねをした人: いませんご確認ありがとうございます!
アップデートを楽しみにお待ちしております!
♥ 0いいねをした人: いません - 両端ブロック
-
投稿者投稿