WordPressテーマSANGOの質問

ボタンに丸みをつけ細長にしたい。グラデーションを単色にしたい

midori

2020/06/20

いつもお世話になっております。
横に長く、角に丸みがあるボタンを作成したいと考えております。

グラデボタンgrad3が該当するかと思うのですが、
グラデではなく、単色かつ別の色に変更したいです。
また、もう少し長さを出したいと考えております。

別のサイトなどを利用し試行錯誤した結果、
レスポンシブルにならず、枠からはみ出しておりました。

お忙しいところ恐れ入りますが、どうぞよろしくお願いいたします。

ボタンの挿入方法と種類一覧

コメントへの回答

サルワカくん

2020/06/20

そのような場合、オリジナルのボタンを追加した方が良いと思います。

SANGOのボタンショートコードの種類を増やす方法

たとえばmy-originalというクラスのボタンを作るとします。
①まず、以下のCSSをダッシュボードの［外観］⇒［カスタマイズ］⇒［追加CSS］もしくは子テーマのstyle.cssに以下のようなCSSを貼り付けます。
スタイルはお好みで調整してください。

/* オリジナルボタンのスタイル */
.my-original {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 2.5em; /* 角丸 */
  width: 400px; /* ボタンの幅 */
  max-width: 100%; /* はみ出ないようにする */
  background: #333333; /* 背景色*/
  color: #FFF;
  text-align: center;
  font-weight: bold;
}

②そのうえで、ボタンを挿入したい位置で以下のようなショートコードを使用します。

[btn href="リンク先のURL" class="my-original"]ボタンテキスト[/btn]

よろしくお願いします。