ボタンブロックの文字サイズをレスポンシブ対応したい

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • Setouchi Kotori

    (@setouchikotori)

    3週、 6日前

    該当するブロックのコードをお示しになると回答が付きやすいかもしれません。

    なお、コードは以下の方法でご提示くださいませ。

    　

    　

    • この返信は3週、 6日前にSetouchi Kotoriが編集しました。理由: タグを付けたかったため
    トピック投稿者 peacechan

    (@peacechan)

    3週、 5日前

    <!-- wp:buttons -->
    <div class="wp-block-buttons"><!-- wp:button {"width":25} -->
    <div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">資料１</a></div>
    <!-- /wp:button -->

    よろしくお願いいたします

    Setouchi Kotori

    (@setouchikotori)

    3週、 5日前

    お示しいただいているコードは「資料１」のボタンのコードのみで、さらに親ブロックの閉じコードが欠けているようです。

    以下のコードで間違いありませんか？

    <!-- wp:buttons -->
    <div class="wp-block-buttons"><!-- wp:button {"width":25} -->
    <div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">資料１</a></div>
    <!-- /wp:button -->

    <!-- wp:button {"width":25} -->
    <div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">資料２</a></div>
    <!-- /wp:button -->

    <!-- wp:button {"width":25} -->
    <div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">資料３</a></div>
    <!-- /wp:button -->

    <!-- wp:button {"width":25} -->
    <div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">資料４＊＊＊＊＊＊</a></div>
    <!-- /wp:button --></div>
    <!-- /wp:buttons -->

    URL をご共有いただけそうであれば、併せて記載されるのがよいかもしれません。

    Aki Hamano

    (@wildworks)

    3週、 3日前

    ボタンを4つ並べて、全てのボタンの幅を「25%」に設定している状況かと推測します。

    理想としては、画面サイズに応じて自動的にボタンが画面内に改行されずに収まるようしたいです。
    画面内に収まれば文字サイズやボタンが小さくなっても大丈夫です。

    画面幅が小さい時にテキストの折り返しを防ぐために、どのようなレイアウトを期待しているかを教えていただけますか？

    自分が想像する範囲では、少なくとも以下3パターンのアプローチが考えられます。

    • ボタンは4つならびのままで維持したい
    • ボタンを横並びから縦並びにしたい（一行あたりのボタンの数は一つだけ）
    • 一行あたりのボタンの数を2つにしたい

    なおこれらの事を実現するにあたって、CSSを記述する必要がありますが、そのような対応は可能でしょうか。

    トピック投稿者 peacechan

    (@peacechan)

    3週、 3日前

    お世話になっております。

    コードの方ば合っております。

    ボタンを4つ並べるのままを維持したいです。

    難しければ2つ並べるでも大丈夫です。テキストが折り返されなければ良いです。

    CSSの編集は可能です。よろしくお願いいたします。

    Aki Hamano

    (@wildworks)

    3週、 2日前

    アプローチは様々ですが、コード例を提示しますので色々試してみてください。

    このアプローチを試す場合は、親のボタンブロックを選択して、「サイドバー > 高度な設定 > 追加CSSクラスから responsive を適用しておいてください。

    4つ並びを維持したい場合：

    /* ブラウザーの幅が600px以下の場合 */
    @media (max-width:600px) {
    	.wp-block-buttons.responsive {
    		/* ボタンの間のスペースを小さくする */
    		gap: 8px;
    		--wp--style--block-gap: 8px;
    	}
    	.wp-block-buttons.responsive .wp-block-button__link {
    		/* ボタンのパディングを小さくする */
    		padding: 0.3em;
    		/* ボタンのフォントサイズを小さくする */
    		font-size: 0.8rem;
    	}
    }

    一行あたりのボタンの数を2つにしたい場合：

    /* ブラウザーの幅が600px以下の場合 */
    @media (max-width:600px) {
    	.wp-block-buttons.responsive .wp-block-button {
    		/* ボタンの幅を50%にする */
    		width: calc(50% - var(--wp--style--block-gap, .5em)* .5);
    	}
    }

    あくまで一例ですが、記載したコードをコピペするだけではなく、

    • テーマがどのようにスタイルを当てているか調べる方法
    • それを上書きするためにどのようなCSSを書けばよいか

    を学習しておくことをお勧めします。

    トピック投稿者 peacechan

    (@peacechan)

    2週、 3日前

    無事解決しました。

    ありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。