横並びボタンの大きさ



  • いつもありがとうございます。
    宮崎と申します。

    https://jin-theme.com/manual/shortcord-button/
     ↑↑↑
    こちらの【ショートコードボタン】について…

    ・横並びボタン
    ・グラーデーション
    ・バウンド
    ・スマホでも横並び
     ↑↑↑
    こちらの条件で設置したいのですが…

    ボタンの大きさをカスタマイズ出来ませんでしょうか?

    0_1584162341291_コメント 2020-03-14 140524.jpg

    下のボタンが現状のものです。
    テキスト(スペース含)の数により横幅が決まるようです。
    これより半角増えると、ボタンが二段の表示になります。
    二段にする以外に、高さの調整は出来ないようです。

    上のボタンは私なりにアレンジしてみました。
    ・横並びボタンのショートコードに
    ・ボタン①、②を無理やりはめ込み
    ・追加CSSで横幅、高さを調整したものです。

    *ボタン1のカスタマイズ -縦:20px 横100px*/
    .color-button01 a{
    padding:15px 35px;
    }
    
    /*ボタン2のカスタマイズ -縦:20px 横100px*/
    .color-button02 a{
    padding:15px 35px; 
    }
    

    パット見で上のボタンは良さそうですが…
    ・バウンドしてくれない
    ・PCの表示だと小さい表示になる
      ↓↓↓
    0_1584162844110_コメント 2020-03-14 141249.jpg

    ということでお手上げでございます。
    お力をお貸しいただけませんでしょうか?

    どうぞよろしくお願いいたします。

    宮崎


    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : WordPress 5.3.2
    ご利用のサーバー名 : wpx
    PHPのバージョン : 7.2.27
    OS : Windows10
    ご利用のブラウザ : Chrome
    該当サイトのURL : https://www.a-atlas.co.jp/cash-back/


  • administrators

    @みやざき さん

    こんにちは!JIN運営チームのりょうたです。
    この度はJINご利用いただき誠にありがとうございます。

    表題の件ですが、具体的にどうなったらOKなのでしょうか?
    サンプルなどございましたらご共有いただけますと幸いです。

    お手数お掛け致しますが、宜しくお願い致します。



  • りょうた 様
    いつも有難うございます。
    ………
    ・横並びボタン
    ・グラーデーション
    ・バウンド
    ・スマホでも横並び
     ↑↑↑
    こちらの設定で…
    0_1584314463298_スマホ.jpg
    0_1584314470144_PC.jpg
    このようにできたら嬉しいです。

    いかがでしょうか?

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

    宮崎


  • administrators

    @みやざき さん

    こんにちは!りょうたです。
    なるほど。。

    @media (min-width: 768px) {
      .jin-ifont-telephone:before,.jin-ifont-mail:before{
        font-size: 1.3em;
      }
      .jin-shortcode-button a{
        font-size: 2rem;
        padding: 15px 80px;
      }
    }
    @media (max-width: 767px) {
      .jsb-sp-2col-on .jin-shortcode-button a {
       padding: 12px 40px;
      }
    }
    

    これを追加CSSに追加していただくと大きくなると思います。
    ただ画像からは正確な数値はわからないので調整は@みやざき さんの方でしていただけますと幸いでございます。
    お手数お掛け致しますが、宜しくお願い致します。



  • @ryota

    調整できました!!

    いつも本当にありがとうございます ^^
    引き続きよろしくお願いいたします_(..)

    みやざき