【感動体験!】THE THORよりもSWELLのボタンが素晴らしい理由

ボタンブロックで比べてみるTHE THORとSWELL

THE THORとSWELLの「ボタンブロック(ボタンリンク)」機能について比較してみました。

この記事のSWELL公式マニュアルはこちら

SWELL専用ボタンブロックの使い方 | 【公式サイト】WordPressテーマ SWELL

リンクにはテキストリンクバナーリンクボタンリンクと大きく3種類の形式がありますが、ボタンリンクはテキストリンクよりも、目に留まりやすく、バナー広告ほど押し売り感がない非常に使い勝手の良いリンク形式です。

さらにスマホのユーザビリティを考えると、テキストリンクよりも「押しやすさ」に優れています。

例えば文字数が少ないテキストリンクだと、指でテキストリンクが隠れてしまい、正確にリンクを押す努力を訪問者に強いることになります。

ボタンリンクならば一定の大きさが確保されているため、指でボタンが隠れてしまう恐れがありません。

THE THORとSWELLのボタンリンク機能を紹介する前に簡単にリンク形式の特徴をまとめておきます。

この記事の目次

THE THOR ボタンリンク

THE THORのボタンリンクは「共通ボタン」とエディターの「スタイル」から設定できる「ボタン」の2種類があります。

区別しやすくするため、この記事では便宜上「スタイル」の「ボタン」は「スタイルボタン」と称して紹介します。

デフォルトデザイン紹介

共通ボタン

大きさの違う3種類のボタンです。

設定でカラー変更できます。

投稿記事内だけでなくテンプレートエリアのボタンにも共通ボタンのデザインが適用されます。

THE THOR 共通ボタン デフォルトデザイン
スタイルボタン

10種類が登録されています。

好きなデザインに変更可能です。

THE THOR スタイルボタン デフォルトデザイン

共通ボタンの設置方法

共通ボタンはエディターのツールバーにある「共通ボタン」から使いたいボタンを選択すれば設置完了です。

THE THOR エディター 共通ボタン

ボタンの配置が3パターンから選びます。

THE THOR 共通ボタン 配置一覧

設置した後もツールバーからワンクリックで変更可能です。

THE THOR エディター 配置指定

共通ボタンのカスタマイズ方法

共通ボタンのデザインは、「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」 →「共通ボタン設定(全ページ用)」で変更できます。

THE THOR カスタマイザー 共通ボタン設定

共通ボタン設定ではボタンの文字色・背景色を指定することができます。
ノーマルボタンは文字色のみ変更できます。

共通ボタンが表示されるテンプレートエリア

確認した範囲で記載しておきます。

プライマリーボタン
  • サーチパネル
  • メインビジュアル上ボタン
  • CTAボタン
THE THOR プライマリーボタン 表示場所
セカンダリーボタン
  • プロフィールウィジェット
THE THOR セカンダリーボタン 表示場所
プロフィールウィジェット
  • 記事一覧リード文
THE THOR ノーマルボタン 表示場所

スタイルボタンの設置方法

スタイルボタンはエディターのツールバーにある「スタイル」→「ボタン」から使いたいボタンを選択することで設置できます。

THE THOR エディター スタイルボタン 設置方法

デフォルトでは先に紹介したで10個のスタイルボタンがリストに表示されます。

THE THOR エディター スタイルボタン一覧

スタイルボタンのカスタマイズ方法

スタイルボタンのデザインは、「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」 →「ボタン設定」で変更できます。

THE THOR カスタマイザー スタイルボタン設定

「ボタン設定」では10個のボタンのタイトルとスタイルの入力欄が表示されます。

「スタイル」のコードを変更することで、ボタンデザインを変更することができます。

THE THOR スタイルボタン 設定項目
コード例

ep-btn bgc-Vorange es-size100 ftc-white es-TpaddingS es-BpaddingS es-BTarrow es-bold

このコードはep-がパーツタイプbgc-が背景色・・・といった具合にパーツの要素を1行で指定したものです。

一からコードを覚えるのは大変です。
先人の知恵をお借りしましょう。
ネットで調べると、ボタンのサンプルコードがたくさん公開されています。
組み合わせパターンに制限がないので、使いこなせれば思い通りのボタンが作れるはずです。

THE THORはこのコード機能でボタンやボックスデザインのカスタマイズ性が非常に高く、オリジナリティの高いボタンを作ることができます。

SWELLではここまで自由にカスタマイズできません。

サイトデザインのオリジナリティを高めたい人ほど、THE THORは向いていると思います。

SWELL ボタンブロック

SWELLではGutenbergで標準搭載されているボタンブロックとは別に「SWELLボタン」という独自のカスタマイズがされたボタンブロックが用意されています。

今回は「SWELLボタン」を中心に紹介したいと思います。

簡単に綺麗なボタンを設置できて、使っていて楽しくなります。
SWELLの中でも特にお気に入りの機能です!

SWELLボタンのデザイン

SWELLボタンはスタイルが5パターンあり、その内4パターンでボタンカラーを3色から設定することができます。

こんなボタンが簡単に作れます。

\ MOREボタンはカラー設定不可 /

グラデーション効果も付けることができます。

SWELLボタン グラデーション
ノーマルボタンとキラッとボタンのみ適用

SWELLボタンはデフォルトデザインでもすごくきれいなところがいいですね!

SWELLボタンの設置方法

こんなにきれいなSWELLボタンの設置方法はとても簡単です。

STEP
「ブロックを追加」から「SWELLボタン」を選択
SWELLボタン ブロックライブラリー

初期状態のさっぱりとしたSWELLボタンが設置されます。

SWELLボタン 初期状態
STEP
SWELLボタンのスタイル・カラー設定

設置した「SWELLボタン」を選択すると右サイドメニューにSWELLボタンの設定パネルが表示されます。

SWELLボタン 設定パネル

プレビューされたスタイルとカラーパレットをクリックすればSWELLボタンのデザインを変更できます。

SWELLボタン スタイル ボタンカラーの設定

その他の設定項目

設定パネルではスタイルとカラーの他にもさまざまな設定が可能です。

ボタンサイズ設定

3サイズ用意されています。

SWELLボタン ボタンサイズ設定
SWELLボタン ボタンサイズ一覧
リンク設定

ONにするとSWELLボタンのリンクを別タブで開くことができます

SWELLボタン リンク設定
アイコン設定

25種類のアイコンをクリックするだけでボタンにアイコンを追加することができます。

SWELLボタン アイコン設定
広告タグの設定

テキスト型のアフィリエイトタグを張り付けておくとSWELLボタンをアフィリエイトリンクとして使うことができます。

SWELLボタン 広告タグ設定

ASPによってはアフィリエイトリンクのボタン化が認められていない場合があるので、各ASPの規約やFAQなどを事前に確認して利用するようにしましょう。

ボタンの計測設定

SWELLボタンではクリック率の計測機能も実装されています。

「クリック率を計測する」をONにするだけ

SWELLボタン ボタンの計測設定

ここの設定で驚いたのが、計測指標の内訳。

SWELLボタンがちゃんと表示されてからのクリック率も分かるという大変高度な分析が可能です。

SWELLボタンの計測指標
  • ボタン設置後のPV数
  • ボタンの表示回数
    (SWELLボタンが表示されるまでスクロールされた回数)
  • ボタンのクリック数
  • このボタンまで読まれた割合
    (ボタンの表示回数÷ボタン設置後のPV数)
  • 表示回数に対するクリック率
    (ボタンのクリック率÷ボタンの表示回数)

ボタンのインプレッション率まで計測できるとは恐れ入りました。

感動する!ボタンのデザイン設定

SWELLボタンは「SWELL設定」→「エディター設定」の「ボタン」タブで「色」とボタンの「丸み」をカスタマイズすることができます。

SWELL エディター設定 SWELLボタン

SWELLボタンの設定は本当にすごくて、はじめて見たとき感動しました!
とにかく公式サイトの動画見てみてください。18秒です。

引用元URL:https://swell-theme.com/function/341/
カラー設定

デフォルトでは赤、青、緑の3色が設定されています。

カラーピッカーで好みの色に変更できます。

SWELLボタンの設定
グラデーション効果の追加

「ボタンのグラデーションをオンにする」にチェックを入れるだけで、グラデーション効果を追加することができます。

カラーピッカーをいじるだけで簡単におしゃれなボタンを作ることができます!

SWELLボタン グラデーション追加
ボタンの丸み

SWELLボタンの形を3種類から選ぶことができます。

SWEELLエディター ボタンの丸み

丸める

SWELLボタンの形(丸める)

すこし丸める

SWELLボタンの形(少し丸める)

丸みなし

SWELLボタンの形(丸みなし)

SWELLのエディター設定はプレビューがとっても便利!

SWELLのエディター設定は色やスタイルを調整すると保存する前にプレビューされるので設定のイメージが掴みやすいところがとても気に入っています!

しかもボタンのプレビューをマウスホバーするとちゃんとアクションするんです!
設定してるだけで楽しくなります!

クリックすると動きます。

SWELLボタン プレビュー マウスホバー

このプレビュー機能のお陰で、直感的に操作できるので、記事を書くことに集中できるんです!
何より設定していて楽しい!小難しいコードを覚える必要がないので、ブログ初心者にもおすすめです。

まとめ やっぱりSWELLのボタンブロックがおすすめ!

THE THORはデザインにこだわりたい人に向いている

THE THORはコードで細かくボタンの要素を指定できます。

ネットで調べると50種類以上のサンプルコードが紹介されているほど、デザインの自由度は高いです。

他のサイトとデザインが被るのが嫌な人はTHE THORが向いていると思います。

SWELLは設定が簡単!デザインも良い!

SWELLの良さはなんといっても簡単にデザインできるところ!

クリックするだけで、デザインの指定ができるので、初心者でも使いこなせます。

SWELLエディターは一見の価値あり!

SWELLエディターにはSWELLボタンだけでなく、アイコンボックスやふきだしのデザインを設定することができます。

SWELLボタンと同じく、色やスタイルを変更すると、その場でプレビューできるので、デザインの調整がとにかく簡単!かつ楽しいです!

ほかの要素でもプレビューできます!

SWELL アイコンボックス設定のプレビュー
アイコンボックスの設定画面
SWELL エディター設定 吹き出し
吹き出しのカラー設定画面
SWELLエディター設定のいいところ
  • マウス操作だけで簡単にデザインの変更が可能!
  • 変更がすべてのページに適用されるので、デザイン統一が簡単
  • プレビュー機能でデザインがその場で確認できる!(楽しい!)

感動するほど使いやすいテーマはSWELL

THE THORとSWELLのボタンブロックを比較してみましたが、どちらのテーマがワクワクしましたか?

わたしは簡単に・楽しく・素早く書ける工夫がされたSWELLのボタンブロックの方が解説していてワクワクしました!

最新のブロックエディター『Gutenberg』に完全対応しているSWELLは本当に書きやすいです。
(SWELLではじめて記事書いたときは心底感動しました。)

これからワードプレステーマを購入するなら、SWELLでなくともブロックエディター『Gutenberg』対応かどうかで選ぶことをおすすめします。

クラシックエディターとブロックエディターではブログを書く楽しさが全然違います!

ワードプレステーマの購入を検討中なら一度SWELL公式サイトをご覧ください。
ブログを書くのに役立つ素晴らしい機能がたくさんあります。

もっと気軽に、楽しく記事を書こう。

ボタンブロックで比べてみるTHE THORとSWELL

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

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

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次
閉じる