カスタムボタンを折り返しなしで統一な幅にする方法

  • マ

    お世話になります。
    カスタムボタンについてご相談です。

    カスタムボタンの横幅をすべて統一して折り返さないようにできないでしょうか？もちろんある程度の文字数の話です。

    というのも、デフォルトのカスタムボタンだと一定数以上の文字で折り返しされるので、スマホで見た時に同じ記事内で折り返しされているボタンとされていないボタンがあって不自然になってしまいます。

    例えば
    「huluを2週間無料体験する」
    「U-NEXTを31日間無料体験する」
    「FODプレミアムを1ヶ月無料体験する」

    だとhuluが一行に納まっても残り2つは改行されてしまいます。

    サービスによってはFODプレミアムのように名詞が長いので、それだけ折り返しされると見た目が気持ち悪いです。

    調べてみて以下のようなカスタマイズを見つけたのですが、これだとボタンのサイズがそれぞれバラバラになってしまいます。

    /ボタン調整/
    @media
    (max-width: 767px){.top-image-btn-color a, .color-button01 a, .color-button02 a{
    padding: 12px 40px;
    }}

    冒頭であげたように、例にあるくらいの文字数を横幅が統一されてスマホで折り返しされないような方法があればご回答願います。

    マニュアル確認済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL : https://matsuko-minimum.info/anitubexwatchanimesnetkawari/

    0 1 件の返信
  • administrators

    @マツコ さん

    こんにちは！JIN運営チームのりょうたです。
    あまり綺麗な使い方ではないのですが、

    @media(max-width: 767px){
  .top-image-btn-color a, .color-button01 a, .color-button02 a{
    padding: 12px 4vw;
    }
  }

    これでどうでしょうか？
    「vw」はデバイス幅に対して相対値を取得してくれる単位ですのでレスポンシブにもある程度は対応してくれます。
    一度ご確認していただけますと幸いです。

    1
  • マ

    ryota様

    ご回答ありがとうございます。
    確かにレスポンシブ表示されたのですが、ボタンごとに横幅が変わってくるので、横幅を固定できるのが理想です。

    どうやら別テーマのSANGO(PORIPU入れてる？)で運営されている方のサイトを見るとPCで見てもスマホで見ても記事内のどのボタンも横幅が同じでした。

    参考サイト
    https://www.jubilove.com/entry/fod-tv

    こちらの記事のようにボタンの文字数が違っても横幅が固定されてるようにすることは可能でしょうか。

    お手数お掛けしますが再度ご検討願います。

    0 1 件の返信
  • administrators

    @マツコ さん

    こんにちは！
    なるほど。

    であればカスタムボタンの横幅を全て画面いっぱいにしてあげればいいので、
    WordPressの管理画面より「外観」→「カスタマイズ」→「ボタンデザイン設定」まで飛んで
    「カスタムボタン１の【 横幅 】」「カスタムボタン２の【 横幅 】」をそれぞれ100％にしてあげるといいかと思います。

    ただ、PCの時も横幅いっぱいになってしまうのでどうしてもスマホのみで対応したいということであれば、
    以下のコードを追加していただくと「スマホ」のみ横幅いっぱいにすることができるようになるかと思います。

    @media screen and (max-width: 767px){
  .color-button01, .color-button02{
    width: 100%;
  }
  .color-button01 a, .color-button02 a{
    padding: 12px 40px;
  }
}

    ご確認の程宜しくお願い致します。

    0
  • マ

    ryota様
    お忙しい中、ご対応ありがとうございました。

    1