WordPressテーマSANGOの質問

ボタンの横幅のサイズを大きくしたい

アバター
とし

いつもお世話になっております。
SANGOのアフィリエイトリンクのボタンをこちらの記事通り行いましたが、ボタンの横幅のサイズが小さいため、横幅を大きくしたいと思っていますが、CSSの記述をどのように行えばよいでしょうか?お忙しい所、恐れいりますが、時間のある時に教えていただけると助かります。ちなみに、ブロックエディターで記事を書いています。
※サイトは非表示でお願いします。

SANGOでアフィリエイトボタンを使う
【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法
コメントへの回答
サルワカくん
サルワカくん
2020/08/20

ブロックエディターでショートコードを使っているというイメージですかね。
すべてのボタンのサイズを大きくしたい場合は、以下のようなCSSを[外観]⇒[カスタマイズ]⇒[追加CSS] に貼り付ければOKです。

#inner-content .btn2 a,
#inner-content .btn {
  font-size: 1.1em; /* フォントサイズ */
  font-weight: bold; /* 太字に */
}

もし一部のボタンのサイズだけを大きくしたい場合は、
①以下のようなCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS] に貼り付けておき…

/* 文字サイズを大きくしたいとき用 */
#inner-content a.btn-large,
#inner-content .btn-large a {
  font-size: 1.1em; /* フォントサイズ */
  font-weight: bold; /* 太字に */
}

/* 横幅いっぱいに表示したい時用 */
#inner-content a.btn-full,
#inner-content .btn-full a {
  display: block;
  font-weight: bold;
  margin: 1em 0; /* 前後の余白 */
  padding: 1em; /* ボタン内の余白 */
  width: 100%; /* 横幅いっぱいに */
  font-size: 1.1em; /* フォントサイズ */
  text-align: center;
}

そのうえで、[btn class="◯◯"][aftbn class="◯◯"]のショートコードを使うときにclassの中に「btn-large」(文字サイズを大きくするもの)や「btn-full」(ボタンの横幅を画面いっぱいにするもの)を追加するようにします。
以下のような感じですね。

[afbtn class="raised main-bc strong btn-full"]〜[/afbtn]

各値はお好みで調整してください。
よろしくお願いします。

アバター
とし
2020/08/31

サルワカさま、お忙しい所、丁寧にご回答いただきありがとうございました(*’ω’*)
調整しながら、試していきたいと思います。
SANGOを愛用させていただきます。今後とも、よろしくお願いします。