【SWELL】ボタンブロックの使い方とデザイン設定まとめ

SWELL

・このサイトも「SWELL」を使用してサイトを作成しています!

・「国内人気No.1のWordPressテーマ」使用すれば分かる!

・とにかくWordPressテーマで迷ったら「SWELL」で間違いなし!

・よく分からなくても大丈夫!このサイトでも解説してるよ!


WordPressテーマ「SWELL」には、サイトのデザインをワンランク上に仕上げる専用ボタンブロックが用意されています。
この記事では、SWELLボタンのデザイン一覧からの使い方を画像付きでわかりやすく解説します!

SWELLボタンブロックとは?

SWELLの「ボタンブロック」は、リンクボタンをブロックエディター上で直感的に作成・デザインできる機能です。
文字サイズや角丸の大きさ、影の有無、アニメーションまで細かく調整できるのが特徴。

たとえば次のような使い方ができます👇

  • 「詳細はこちら」などのリンクボタン
  • アフィリエイトリンクへの誘導ボタン
  • サービスページ・購入ページへのCTAボタン

CTA:Call To Actionの略で、「行動を促す」という意味です。

SWELLボタンのデザイン一覧

SWELLでは、ボタンブロックのスタイルをワンクリックで切り替え可能です。
デザインは以下のように豊富に用意されています。

SWELLボタンの使い方(ブロックエディター)

STEP
ブロック追加ボタン(+)をクリック
STEP
検索欄に「ボタン」と入力
STEP
「SWELLボタンブロック」を選択
STEP
テキストを入力してリンクを設定

さらに、右側の「ブロック設定パネル」で以下を調整できます👇

  • ボタンのサイズ・色
  • ボタンの計測設定
  • アイコン設定(位置・サイズ)
  • ホバー時のアニメーション

SWELLでは、ブロックを選択した状態で右サイドバーの設定項目をいじるだけでデザインがリアルタイムに反映されます!

ボタンのデザイン設定(共通)

SWELLでは、ボタンの基本デザインをサイト全体で統一できます。
設定場所は以下の通りです👇

STEP
WordPress管理画面 > SWELL設定 >エディター設定
STEP
「ボタンデザイン設定」をクリック
STEP
カラー設定・ボタンの丸みなどを設定し、変更を保存

これにより、サイト全体のボタンが一括で変更されます。
統一感を持たせたいときに便利な機能です。

まとめ:ボタン1つで印象が変わる!

SWELLのボタンブロックは、デザイン性と操作性が抜群。
コード不要で美しいCTAボタンを作成できるため、コンバージョン率UPにも直結します。

小さなボタンでも「クリックしたくなるデザイン」を意識すると、ブログの印象がグッと上がるため上手に使いましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次