【ブロックエディタ】ボタンブロックの使い方とテーマ独自のボタンブロックも紹介!

【ブロックエディタ】ボタンブロックの使い方とテーマ独自のボタンブロックも紹介!

こんにちは!さとしん(@__satoshin)です。

記事中の「ここぞ!」という所でボタンリンクを設置したいですよね。

ボタンリンクは目立つので流し読みをしている読者の視線も止まりやすく、リンク先に飛んでほしい時には特に効果が大きいです。

WordPressのブロックエディタでは、ボタンリンクを作成するための「ボタンブロック」がWordPress本体の機能で用意されています。

テーマ独自のボタンブロックはデザイン性も良いですよ…!
この記事の内容まとめ
  • ボタンブロックの基本的な使い方
  • テーマやプラグインによるボタンデザインや機能の違い
  • 改変せずアフィリエイトリンクを設置する方法

WordPressのテーマによっては、独自のボタンブロック機能が付与されていて、クリック率が計測できたり、アフィリエイトリンク(HTMLタグ)を改変せずにリンクが設置できる仕様のものもあります。

さとしん

細かい機能の違いはテーマを選ぶときの参考にもなるかも…!

目次

【記事内の箇条書きに必須】ボタンブロックの基本的な使い方

早速ブロックエディタ、ボタンブロックの使い方を解説していきます。

STEP
メインコンテンツエリアで「+」ボタンをクリック
ボタンブロックの使い方
STEP
ボタンを探してクリック
ボタンブロックの使い方-2
STEP
好きな文字を入力する
ボタンブロックの使い方-3
STEP
URLを入力する
ボタンブロックの使い方-4

これで、基本的なボタンブロックの使い方は以上です。

さとしん

特に難しく感じる手順はないと思います…!

ちなみに、ブロックエディタでは、段落ブロックに「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

ボタンブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /button
  • /ボタン
さとしん

ぜひ覚えておいてください…!

ボタンの形状やカラーなどスタイルの変更方法

サイドバーからボタンブロックのスタイルを編集することができます。

スタイルは以下の2種類から選択できます。

塗りつぶし

アウトライン

ボタンの色とボタン内のテキストの色も自由に設定できます。

ボタンブロックの使い方-5

そして、ボタンの形状も変更することができます。枠線設定から角丸半径の数字を変更してあげると、単純な四角形から円形などお好みの形に調整できるようになっています。

ボタンブロックの使い方-6

リンク先を新しいタブで開く

初期の設定状態だと、ボタンをクリックすると同じタブの中でリンク先のページが開きます。

もし、自分の記事ページを開いたまま、別のタブでリンク先を開かせたい場合は、「リンク設定」→「新しいタブで開く」ボタンをクリックしておきましょう。

ボタンブロックの使い方-7

2021年2月時点で、アフィリエイトリンクは基本的に同じタブで開くことが推奨されています。

別タブで開く(Target=”_blank”)はセキュリティの観点から非推奨になっていますので、注意しましょう。

テーマやプラグインでボタンブロックのスタイルは大きく違う!

WordPress本体側で用意されているボタンブロックですが、WordPressテーマや関連プラグインを使うことによって、便利機能が追加されたり、選べるデザインも増えます。

今回は、100%GPLの3つのWordPressテーマ、プラグインのボタンブロックの機能をご紹介します。

さとしん

テーマ選びで悩んでいる方には良い判断材料になるかも…!

【SWELL】アイコンが簡単に挿入出来て、広告タグも改変無しで設置可能!

WordPressテーマ『SWELL』
SWELL』公式サイト

ブロックエディタ完全対応のWordPressテーマ『SWELL』では、追加のプラグインなど不要で、テーマを適用するだけで、ブロックの機能が拡張されます。

『SWELL』では、オリジナルブロック「SWELLボタン」が用意されています。

SWELLボタンブロックの特徴は以下です。

  • デザインのバリエーションが豊富!
  • アイコンもクリック操作だけで挿入可能!
  • アフィリエイトリンクを改変せずに設置可能!
  • ボタンのクリック率が計測できる!

SWELLボタンのデザインとアイコンの挿入

まずはSWELLボタンのデザインからご紹介します。

かなりバリエーション豊富で、管理画面から簡単に色や形状を選択することができます。

SWELLのボタンブロック
さとしん

僕はアニメーション付きの「キラッとボタン」が好きです…!

ボタンのサイズも3段階から選べます。上記ボタンは1番大きいサイズです。

また、オシャレなアイコンもワンクリックで挿入できます。

サイドバーからお好きなアイコンをクリックするだけでOKです。

SWELLのボタンブロック-2
さとしん

これは本当に嬉しくありがたい機能です…!

アフィリエイトリンクの貼り方

サイドバーの「広告タグ設定」の中に「広告タグを直接入力」という欄が用意されています。

SWELLのボタンブロック-3

ここに、アフィリエイトリンク(HTMLタグ)を直接入力することができます。

計測用のimgタグを省略したり、広告タグを改変することなく、簡単にリンクが設置可能です。

ボタンのクリック率計測

サイドバーの「ボタンの計測設定」の中にある「クリック率を計測する」ボタンをクリックするだけで、クリック率を計測することができます。

SWELLのボタンブロック-4

とても簡単な設定で、必要十分なデータが取得できます。

さとしん

データがあればサイトや記事の改善に役立ちますね…!

Snow Monkey Blocks

WordPressテーマ『Snow Monkey』
Snow Monkey』公式サイト

WordPressテーマ『Snow Monkey』の関連プラグイン『Snow Monkey Blocks』もオリジナルのボタンブロックが用意されています。

『Snow Monkey Blocks』は無料でインストールできて、Snow Monkey以外のテーマでも一部ブロックは使用できない制約があるものの、多くのブロックが使用可能です。

『Snow Monkey Blocks』のボタンブロックでは、以下のように以下のようなデザインを選択できます。

Snow Monkey Blocksのボタンブロック

ブログで使用する分には必要な機能が揃っています。

また、コーポレートサイトなどでは、画像右上の様なテキストボタンも使いたい場面は多いのではないかと感じています。

ボタンの幅が5段階から設定できるのもありがたい機能です。

Snow Monkey Blocksのボタンブロック-2

VK Blocks

WordPressテーマ『Lightning』
Lightning』公式サイト

VK Blocks』は株式会社ベクトルさんが開発された無料プラグインです。

ベクトルさんはWordPress公式ディレクトリに登録されている無料テーマ『Lightning』や、上位版である『Lightning Pro』、『Katawara』という有料のWordPressテーマを開発されています。

有料テーマのライセンスを購入すると上位版の『VK Blocks Pro』というプラグインを使用できるようになります。

『VK Blocks』でも独自のボタンブロックが用意されています。

まず、VK Blocksオリジナルの機能として、サイドバーから簡単にサブテキストを入力することができます。

VK Blocksのボタンブロック

また、ボタンの位置や幅はサイドバーから簡単に設定が可能です。

VK Blocksのボタンブロック-2

『SWELL』同様にアイコンを挿入することができますが、『VK Blocks』ではFont Awesomeのタグを入力してあげる必要があるので、知識がない方の場合はSWELLよりも難しく感じるかもしれません。

VK Blocksのボタンブロック-3

ボタンブロックの良く見る使い方【マイクロコピー】

ここまでボタンブロックの使い方や、テーマ、プラグインによるデザインや機能の違いをご紹介してきました。

最後に、いろいろなサイトで見かけるボタンリンクの作り方をご紹介します。

いわゆる「マイクロコピー」と呼ばれる、ボタンの上などにコメントが書かれているスタイルです。

今回はSnow Monkey Blocksを例に作っていきます。

STEP
「ボタンボックス」ブロックを挿入
マイクロコピー
STEP
ボタン上下に自由にテキストを入力
マイクロコピー-2

『ボックスボタン』というブロックが用意されているので、これで簡単に作成することができます。

ちなみに、『SWELL』の場合は、段落ブロックとSWELLボタンを組み合わせてマイクロコピー風のボタンを作ることができます。

SWELLはブロックの下側の余白を調節できる機能があるので、段落ブロックの余白を小さくしてあげることで簡単に作成可能です。

マイクロコピー-3

それからSWELLでは、ブロックパターンにもマイクロコピーボタンが用意されているので、いつでも呼び出して使うことができます。

マイクロコピー-4

お好みのボタンブロックで読者の目線を引き付けましょう!

記事中の適切なタイミングでリンク先へ誘導してあげることは、読者に満足してもらうためにも大切です。

そんな「ここぞ!」というタイミングで、ボタンブロックはとても有効なブロックです。

ボタンブロックには、テーマによっていろいろな機能やデザインが追加されています。

WordPress標準のボタンでは少し物足りないと感じる場合は、今回紹介したテーマやプラグインの導入をぜひ検討して見てください。

今回は以下の3つのテーマとプラグインをご紹介しました。

  • SWELL(テーマ)
  • Snow Monkey Blocks(プラグイン)
  • VK Blocks(プラグイン)

ブロックの細かい機能ひとつひとつもテーマ選びの判断材料になると思っています。

みなさんが、お好みのデザインを見つけて、ボタンブロックを適切に活用されることを願っています。

ブロックエディタで楽しくコンテンツを作っていきましょう。

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

よかったらシェアしてね!

この記事を書いた人

WordPressが好きで毎日触って勉強しています。ブロックエディタに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

目次
閉じる