【SWELL】ボタンのカスタマイズ術|初心者でも簡単!【CSS付き】

【PR】この記事には広告を含む場合があります。
アッフィー

こんな悩みを解決できる記事をご用意しました!
私はブログを始めて2年。
これまでに90本以上の渾身の記事を書き上げてきました。
その結果、累計で5桁のアクセスを達成することができました。

WordPressテーマ「SWELL」のボタンをもっとおしゃれにカスタマイズしたい…でも、CSSの知識もないし、どこから手をつければいいのか分からない。

そんな悩みを抱えているあなたに朗報です。

実は、SWELLのボタンカスタマイズは特別な知識がなくても簡単にできます。

基本設定での色や形の変更はもちろん、簡単なCSSコードをコピペするだけで、クリック率を高めるアニメーション効果も追加できるんです。

この記事では、

まで、具体的な手順とコード例を交えて徹底解説します。

これを読めば、あなたも明日からSWELLボタンを自由自在にカスタマイズできるようになりますよ。

目次

SWELLボタンとは?

SWELLボタンとは、ページ内の好きな場所にボタンを設置できるSWELL独自のボタンブロックです。

WordPressの標準ボタンよりカスタマイズ性が高く簡単におしゃれなボタンが作成できます。

そんなSWELLボタンには、次のような便利な機能が備わっています。

便利な機能を、詳しく解説しますね。

ボタンデザインが豊富

SWELLのボタンには、初心者でも簡単に選べる5つの基本デザインがあります。

  • シンプルな「ノーマル」
  • 少し浮き出た「立体」
  • キラキラ光る「キラッと」
  • 枠線だけの「アウトライン」
  • 横長の「MOREボタン」

どのデザインも、サイトの雰囲気に合わせて色や形を変更できます。

例えば、丸みを付けたり、ボタンの大きさを変えたりするのも簡単。

「このボタンをもっと青っぽく」「角を丸くしたい」といった希望も、難しい設定なしで実現できます。

ブログ初心者の方でも、プロっぽいボタンデザインが作れるのが魅力です。

アイコンが設定できる

ボタンの文字の横に、かわいいアイコンを付けることができます。

矢印やハート、SWELLアイコンなど、たくさんの種類から選べるので、ボタンの目的に合わせて使い分けられます。

アイコンの種類

「商品を見る」というボタンには買い物カートのアイコンを、「詳しく読む」には本のアイコンを付けるなど、直感的な使い方ができます。

アイコンは文字の左右どちらにも配置できるので、見た目のバランスを考えながら調整できますよ。

アフィリエイトリンクが設置できる

SWELLボタンにアフィリエイトリンク設置

アフィリエイトリンクの設置がとても簡単です。

ASPサイト(A8.netやバリューコマースなど)からコピーしたリンクを、そのままボタンに貼り付けるだけでOK。

普通のWordPressだと、HTMLの知識が必要だったり、デザインが崩れたりする心配がありますが、SWELLなら安心です。

しかも、長いURLや複雑なコードも、おしゃれなボタンとして表示されるので、記事の見た目を損なうことがありません。

クリック率が計測できる

ボタンのクリック率が計測できる

ボタンがどれくらいクリックされているか、簡単に確認できる機能も付いています。

記事が何回見られたか、その中でボタンが何回クリックされたのかが分かります。

さらに、「このボタンまで何人が読んでいるか」という情報も教えてくれるので、「もっと上の方にボタンを置いた方が良いかも」といった改善点が見えてきます。

設定も簡単で、ボタンの詳細設定にある「クリック数を計測する」をONにするだけです。

アフィリエイト初心者の方でも、データを見ながら効果的なボタン配置を学べます。

SWELLボタンの基本設定と使い方

SWELLボタンを使いこなすための基本的な設定方法を見ていきましょう。

デザインの設定から実際の設置手順まで、初心者の方でも迷わないよう、順を追って説明しますね!

色と形の初期設定方法

最初に、SWELLボタンの基本的なデザインを設定しましょう。

まずは、SWELLボタンの設定画面を開いていきます。

WordPressのダッシュボードメニューから「SWELL設定」⇒「エディター設定」をクリックしましょう。

「SWELL設定」⇒「エディター設定」をクリック

エディター設定画面になるので「ボタン」をクリックします。

ボタンカラーの設定

SWELLボタンの設定では、3種類のカラーパターンを自由に設定できます。

SWELLボタン_3種類のカラーパターンを自由に設定

カラーピッカーで直感的に色を選んだり、お気に入りの色のカラーコードを入力したりできます。

SWELLボタンの設定_カラーピッカーで色を選ぶ

グラデーション機能もあり、チェックを入れると2色使いのおしゃれなボタンが作れます。

SWELLボタンの設定_グラデーション機能

デフォルトカラーにこだわらず、ブログの雰囲気に合わせて自由にカスタマイズしましょう。

ボタンの丸みの調整

ボタンの形は「丸みなし」「少し丸める」「丸める」の3種類から選べます。

この設定は、ノーマル・立体・キラっと・アウトラインそれぞれに反映されます。

SWELLボタンの設定_ボタンの丸み調整

カラーパターンと丸みの調整が完了したら、「変更を保存」をクリックして設定を保存しましょう!

「変更を保存」をクリック

固定ページ・投稿ページでの設置手順

ボタンを実際のページに設置する方法をご紹介します。

記事の投稿画面で簡単に追加できます。

SWELLボタンブロックの設置

ボタンの設置の手順は以下の通りです。

STEP
「+」マークをクリック

投稿画面右上の「+」マークをクリックします。

「+」マークをクリック
STEP
SWELLボタンをクリック

SWELLブロックの中の「SWELLボタン」をクリックしてください。

「SWELLボタン」をクリック
STEP
SWELLボタンにテキストを入れる

投稿画面にSWELLボタンブロックが表示されるので、ボタンにテキストを入れていきましょう。

今回は、SWELLの購入ページへジャンプするボタンを設置することとし、「SWELLを購入する」と入力しました。

SWELLボタンにテキストを入れる
STEP
リンク先URLを入力

次に、SWELLの購入ページのURLを入れていきましょう。

リンク先:未設定」をクリックします。

「リンク先:未設定」をクリック

URLの入力欄が表示されるので、①SWELLのホームページのURL「https://swell-theme.com/」を入力し、②右側の矢印マークをクリックします。

SWELLのホームページのURLを入力
アッフィー

これでSWELLボタンは使えるようになりますが、続いて色や形を変更する手順を見ていきましょう。

SWELLボタンの色や形を変更する

次に、ボタンの色や形を変更していきましょう。

STEP
サイドバーを表示させる

右上の設定ボタンをクリックしてサイドバーを表示させましょう。

※サイドバーが表示されている場合はSTEP2へ行ってください。

サイドバーを表示させる
STEP
スタイルを選ぶ

サイドバーにSWELLボタンの設定項目が表示されます。

まずは、好みのスタイルを選んでいきましょう。

SWELLボタンの設置_スタイルを選ぶ

形状は「ノーマル」、「立体」、「キラッと」、「アウトライン」、「MOREボタン」の5種類から選べます。

アッフィー

個人的には「立体」が好きです。「キラッと」も気になります…

STEP
ボタンの大きさを設定

次に、ボタンの大きさを設定します。

「ボタンサイズ設定」で、小、標準、大、カスタムからサイズを選びます。

SWELLボタンの設定_ボタンの大きさを設定

小、標準、大を選んだ場合の大きさは以下の通りです。

「カスタム」はカスタムをクリックするとパーセンテージの入力欄が表示されるので、パーセンテージを入れて自分の好みの大きさに変更します。

ボタンの大きさ_カスタム

実際の大きさは以下の通りです。参考にしてくださいね。

STEP
ボタンの色を変更

ボタンのサイズを決めたら、ボタンの色を決めましょう。

選択できるのは、事前にエディター設定で設定した色です。

ボタンの色を変更
STEP
ボタンの計測設定

ボタンのカラー設定の下には、「ボタンの計測設定」があります。

「クリック率を計測する」をONにすると、以下の数値を自動で計測してくれますよ!

  • ボタン設置後のPV数
  • ボタンの表示回数
  • ボタンのクリック数
  • のボタンまで読まれた割合
  • 表示回数に対するクリック率
ボタンの計測測定
STEP
アイコンの追加

続いて、ボタンに入力したテキストにアイコンを追加しましょう。

①アイコンの位置をテキストの左右どちらに追加するか選択

②アイコン選択の「検索」をクリック

アイコンの追加

すると、たくさんのアイコンが選べるようになります。

アイコンが選択できる

今回はSWELLマークを左側に設置してみました。

大きさについては、1.5emにしました。

SWELLボタンの完成
アッフィー

お疲れさまでした!
以上で、SWELLボタンの完成です。

アフィリエイトリンクの設置

アフィリエイトリンクの設置も驚くほど簡単です。

ASPサイトでコピーしたリンクコードを、サイドバーにある「広告タグ設定」の「広告タグを直接入力」欄にペーストするだけでOKです。

SWELLボタンにアフィリエイトリンク設置

通常のWordPressボタンでは難しいアフィリエイトリンクも、SWELLならデザインを崩さずに設置できます。

クリック計測機能も付いているので、効果測定もバッチリ。

アッフィー

広告タグを使用する場合、アイコン設定はできません。

SWELLボタンのカスタマイズ方法【CSS編】

CSSを使うと、SWELLボタンをもっと自由にカスタマイズできます。

初心者の方でも簡単に試せる2つの方法を、順を追って解説していきます。

設定した色以外を使う

SWELLのボタンは「カラー設定」で決めた3色から選ぶことができます。

でも、この3色以外の色を使いたいこともありますよね。

そこで、初期設定した3色は変更せずに他の色を使いたい場合の手順を説明します。

今回はオレンジ色を使います。

STEP
SWELLボタンブロックに「クラス」を追加

まず、SWELLボタンのサイドバーの「高度な設定」を開き、「追加CSSクラス」に好きな名前(クラスといいます)を入力します。

今回は、btn-orangeを追加しました。

下の画像では、「追加CSSクラス」に「is-style-btn_normal」と記載されているので、半角スペースを入力したうえで「btn-orange」を入力しました。

「高度な設定」をクリック

追加CSSクラスの部分を拡大すると次の通りです。

追加CSSクラス
アッフィー

クラスを追加したら保存することを忘れないようにしましょう!

STEP
 「追加CSS」にCSSを追加

WordPressのダッシュボードに戻り「外観」⇒「カスタマイズ」をクリックします。

「外観」⇒「カスタマイズ」

表示された画面で「追加CSS」をクリックします。

「追加CSS」をクリック

すると、左側に「カスタマイズ中 追加CSS」欄が表示されるので以下のコードをコピペして、「公開」をクリックしてください。

.btn-orange{
    --the-btn-color: orange;
}
「カスタマイズ中 追加CSS」欄
STEP
プレビューで確認

CSSを保存しても、投稿画面には反映されません。

投稿画面に戻り、プレビューで確認してみましょう。

プレビュー画面を確認するためには、右上のデスクトップマークをクリックして表示される「新しいタブでプレビュー」をクリックします。

プレビューで確認すると以下のようになります。

ふわふわ動くボタンを作る

ボタンに動きを付けると、さらに注目を集めることができます。

次は、SWELLボタンに上下にゆっくり動く「ふわふわ」効果を付けましょう。

STEP
SWELLボタンブロックに「クラス」を追加

まず、SWELLボタンのサイドバーの「高度な設定」を開き、「追加CSSクラス」に好きな名前(クラスといいます)を入力します。

今回は、btn-updownと入力しました。

下の画像では、すでに「is-style-btn_normal」と記載されているので、半角スペースを入力したうえで「btn-updown」を入力しています。

「高度な設定」をクリック

以下で、追加CSSクラスの部分を拡大しました。

追加CSSクラス
アッフィー

クラスを追加したら保存することを忘れないようにしましょう!

STEP
 「追加CSS」にCSSを追加

WordPressのダッシュボードに戻り「外観」⇒「カスタマイズ」をクリックします。

「外観」⇒「カスタマイズ」

すると、左側に「カスタマイズ中 追加CSS」欄が表示されます。

「追加CSS」を表示

「カスタマイズ中 追加CSS」欄へ以下のCSSをコピペして、「公開」をクリックしてください。

/* ふわふわ動くボタン*/ .btn-updown { animation-name:btn-updown; /* 動きの名前 */ animation-delay:0s; /* 動きの開始時間 */ animation-duration: 2.5s; /* 動きの動作時間 */ animation-timing-function: ease-in-out; /* 動き(徐々に早く)*/ animation-iteration-count: infinite;  } @keyframes btn-updown { 0% { transform: translateY(0); } 50% { transform: translateY(10px); /* 上下の動き */ } 100% { transform: translateY(0); } }
「カスタマイズ中 追加CSS」欄
STEP
プレビューで確認

投稿画面では確認できませんので、プレビューで確認してみましょう。

プレビュー画面で確認

プレビューで確認すると以下のようになります。

アッフィー

クラス名を設定したSWELLボタンを「ブログパーツ」に登録すれば、いつでも呼び出せますよ!

まとめ:SWELLボタンを使ってサイトをおしゃれにしよう!

この記事では、SWELLボタンの基本的な使い方からカスタマイズまで、詳しく解説してきました。

SWELLには多彩な機能が用意されています。

  • 5種類の基本デザイン
  • 4色のカラーバリエーション
  • 豊富なアイコン
  • アフィリエイトリンクの直接設置

初心者の方でも、簡単な設定だけでおしゃれなボタンが作れます。

クリック率の計測機能も備わっているので、効果を確認しながら改善できるのも魅力的です。

さらに、CSSを使えば、オリジナルカラーの設定やふわふわ動くアニメーション効果など、より高度なカスタマイズも可能です。

SWELLボタンを活用することで、サイトの見た目が格段に良くなり、読者の回遊率やコンバージョン率の向上も期待できます。

ぜひ、あなたのブログでも活用してみてください。

本ブログではWindowsテーマのSWELLを使用しています。

あなたも、豊富な機能を備えたボタンが使えるSWELLにしませんか?

このブログではSWELLを使用しています

今回は以上です。

最後までお読みいただきありがとうございました。

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