MENU
アカロア
サラリーマン・ブロガー
①サラリーマンとして管理畑を中心に17年が経過→②ゴルフ&海が大好きな2児のパパ→③副業ブログの始め方「JETBLOG」を開設→④「英語の学び方ナビ」を開設→⑤日々、SEOを学びつつ2サイトを運営中
\ 当サイト使用テーマ「SWELL」/

SWELL|ボタンブロックをおしゃれにする方法!アレンジ例も

SWELLボタン

こんにちは。アカロア@akaroa789です!

SWELLボタンを設置してみたけど、目立ちすぎて逆に違和感があるな…。

この記事では、WordPressテーマ「SWELL」のオリジナルボタンを記事に馴染ませ、自然な感じで表示する方法を解説します!

この記事がおすすめな人
  • SWELLボタンだけでは物足りない
  • SWELLボタンをアレンジしたい

結露からいうと、SWELLボタンを装飾するために多くの時間は必要ありません。

次の3ステップでかんたんに、おしゃれなSWELLボタンが作れるのです♪

  1. 土台となるブロックを挿入
  2. SWELLボタンを挿入
  3. 補足テキストを挿入

すると、次のようなSWELLボタンが表示されます。

シンプル&高機能のWPテーマ

※クリックすると公式HPへ飛びます

それでは、詳しく見ていきましょう!

かんたん・そしてお洒落なテーマ

  • シンプルだけどハイセンス
  • ユーザーファーストの利便性
  • 初心者にも扱いやすいテーマ
目次

SWELLボタンをおしゃれにする方法

早速、おしゃれなSWELLボタンを作っていきます!

STEP
土台となるブロックを挿入

記事作成画面の左上にある「+」よりブロックエディタを開きます。

タブを「パターン」に切り替え、「薄い枠線と背景付きのリスト」を選択します。

SWELLボタンをおしゃれにする方法①
薄い枠線と背景付きのリストを挿入

すると、SWELLボタンの土台となる部分が挿入されます。

  • リスト
  • リスト
  • リスト

リスト部分は使いませんので削除しておきます。

右上の設定(歯車)からボーダー設定で薄い枠線を選べますが、SWELLボタンを挿入すると枠外に改行されてしまうため、上のような方法をとっています。

STEP
SWELLボタンをパターンで挿入

ステップ2では、SWELLボタンを「パターン」から選んで挿入します。

SWELLボタンをおしゃれにする方法②

STEP1で削除したリスト部分をタップすると「ブロックを追加」とコメントがでますので、もう一度タップします。

SWELLボタンをおしゃれにする方法②

タブを「パターン」に切り替え、「マイクロコピーとアイコン付きのボタン」を選択します。
「すべて表示」をタップした後、タブを「パターン」に切り替え「マイクロコピーとアイコン付きのボタン」を挿入します。

SWELLボタンをおしゃれにする方法②

続いて、SWELLボタンをタップしてから右上の設定(歯車)をタップします。

ボタンの横をタップするとSWELLボタン全体を選択できます。

SWELLボタンをおしゃれにする方法②

「広告タブを直接入力」エリアに、テキスト広告を設定しておいた広告タグを入力します。
ボタン上のマイクロコピーも編集しておきましょう。

STEP
SWELLボタン下にテキストを挿入

SWELLボタンの下に段落を挿入します。

段落の入れ方

SWELLボタンの下に段落を入れる方法が分からない人のためにおさらいです。

  1. SWELLブロックの横でタップ
  2. 左上の「+」をタップ
  3. 「段落」を選択

SWELLボタン下の段落には任意のコメントを入れ、配置を「中央寄せ」にします。

これでおしゃれなSWELLボタンの完成です!

シンプル&高機能のWPテーマ

※クリックすると公式HPへ飛びます

SWELLボタンの作り方は2通り

SWELLボタン

便利なSWELLボタンですが、作り方には次の2通りがあります。

広告タグを作っている場合

前述の通り、アフィリエイト用のテキスト広告を設定した広告タグを既に作っている場合は、SWELLボタンに挿入するだけで完了です。

広告タグを使う場合はアイコンの設定ができなくなり、設定してあるテキストがボタンに表示されます。

ボタンスタイル・カラーを決め、広告タグを挿入します。

ボタンスタイル

ノーマル
立体
キラッと
アウトライン
MOREボタン

ボタンカラー

赤系
青系
緑系

なお、ボタンカラーはswell設定から変更可能です。

広告リンクを直接入力

SWELLボタンを作るもう一つの方法は、ASPから取得した広告リンクをボタンに直接入力する方法です。

広告リンクを使う場合は、アイコン・ボタンテキストを自由に設定できます。

SWELLボタンのクリック率をカウントしたい場合は、右上の設定(歯車)から「計測する」にチェックしておきましょう。

SWELLボタンのアレンジ例

SWELLボタンのアレンジ例をひとつご紹介します。

かんたん・そしてお洒落なテーマ

  • シンプルだけどハイセンス
  • ユーザーファーストの利便性
  • 初心者にも扱いやすいテーマ

上に表示したSWELLボタン入りバナーを作る手順は次のとおりです。

  1. 土台となるブロック(スタイル:方眼)
  2. バナー広告
  3. リストスタイル:チェック
  4. SWELLボタンスタイル:MORE
  5. マイクロコピー

ポイント

マイクロコピーの「\」はバックスラッシュと入力すると変換候補に出てきます。「/」は同様にスラッシュと入力すると変換候補に出てきます。

まとめ

SWELLボタンをおしゃれにする方法をご紹介してきましたが、アレンジの幅は無限大です。

広告ボタンが目立ちすぎると、売り込む意識が見えすぎて敬遠されてしまいますよね。

記事に馴染む「おしゃれなボタン」でアフィリエイトの効率を高めましょう!

「SWELL」
総合評価
( 5 )
メリット
  • ムダのないシンプルなテーマ
  • 洗練されたお洒落なデザイン
  • DEMOページへの着せ替えが便利
  • オリジナルブロックが豊富
  • パターンデザインが豊富
  • 多機能が標準搭載されている
  • フォーラムで質問できる
  • ユーザー間で横のつながりが強い
  • アップデートが多い
  • 使っていて楽しい♪
デメリット
  • 導入コストがかかる
  • カスタマイズ性は高くない(普通)

シンプル&高機能のWPテーマ

※クリックすると公式HPへ飛びます

今回は以上です。

最後まで読んでいただき、ありがとうございました♪

こちらの記事もおすすめ

SWELLボタン

この記事が気に入ったら
フォローしてね!

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