ワードプレスでリンク付きボタンの作成方法。記事内にリンク付きの「商品購入ボタン」や、お問い合わせなどへの「誘導ボタン」を作成しよう。今回は、ワードプレスでリンク付きボタンの作成方法について書いていきます。
投稿や固定ページにCTAと呼ばれる(Call to Action)ボタンを設置して、そのブログを訪問したユーザーに対し、商品の購入やお問い合わせ、アクションを起こして貰いたい行動など、視覚的に明示してみましょう。
| 結論を先に話ししておきます |
| ワードプレスで記事を投稿する場合、その多くは、記事内にリンクを含みます。それは「資料請求する為なのか」「Webサイトへの誘導なのか」です。いずれにせよ、リンクをクリックして貰いたいと言うのが本音でしょう。
ですが、記事内にリンクをテキストで埋め込むと目立ちにくく、クリックされにくい場合があります。そんな時、活用したいのがリンクを「ボタン化」する方法です。ボタンと言っても「ボタン画像」のように見せるだけです。
ボタン画像に関しては、次のメリットがあります。「リンクであることが明確」「視認性の向上」「ブロックされにくい」「表示が軽い」です。今回の記事内容は、ブロックエディターの「ボタン」と言うブロックを使っていきます。
以前投稿した下記の記事にも目を通して貰えると幸いです。
|
目次はコチラ
【ブロックエディターとは(動画付き)】
ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
ブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
この章では、ブロックの「ボタン」を作成していきますが、その前に、ブロックエディターとして設定されていない方は、下記の図解を参考に設定してみて下さい。やり方はとても簡単なので心配はいりません。
では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。まずは、ブロックエディターに設定する為のやり方を解説していきます。
- 「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。この場合「固定ページ」でも問題ありません。
- 次の画面で「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えるかと思います。 |
【ブロックエディターでボタンの設置(動画付き)】
この章では、実際にブロックエディターのボタンと言うブロックを使ってボタンの設置をしていきます。一応、図解を用いて解説していきますので分からないと言うことはありませんし、難しくないので心配ご無用です。
ブロックエディターの一覧を見てもお分かりのように、沢山のブロックがあって、それぞれ設定の仕方はバラバラですが、弄ってみると結構楽しいものです。それではボタンの設置をしていきましょう。
では初めに、下記の図解を見て貰う前に、動画を視聴してみて下さい。題して「WordPress ボタンブロックの使い方・ボタンの作り方を解説」です。
- ブロックエディターの新規画面を開いたら「赤色枠」で囲まれている「+」を押します。画面上では、開いた後なので「×」となってますが気にしないで下さい。すると左側にブロック一覧が開くと思います。
次に、ブロックの中に「緑色枠」で囲まれている「ボタン」があるので開いてみましょう。
- ボタンを押すと「黄色枠」で囲まれているような画面が表示されます。
- 最初に「桃色枠」で囲まれている中にリンクとなる「テキスト」を入力します。コチラでは、商品購入はコチラとしています。次に「オレンジ色枠」で囲まれている「アイコン」を押しましょう。
- すると「オレンジ色枠」で囲まれている中の「紫色枠」の中に、リンク先となるURL「コチラでは、グーグルのURLを入力しています」を入力し、最後に「水色枠」で囲まれている「下向き丸矢印」を押します。
- 「オレンジ色枠」で囲まれている内容を見ると、グーグルへ飛ぶように設定されていることが分かります。では一度、プレビューで見てみましょう。まずは「紫色枠」で囲まれている「プレビュー」を押します。
すると「桃色枠」で囲まれているプルダウンが開きます。その中の「水色枠」で囲まれている「新しいタブでプレビュー」を開いてみましょう。
- トップ画面から見てみた感じです。「黄色枠」で囲まれている箇所にリンク先となる「商品購入はコチラ」が表示されており、そのリンクを押してみましょう。
- 商品購入はコチラを押すと、リンク先である「グーグル」を表示させることができました。
ボタンのスタイルを設定
ボタンのスタイルには、デフォルト(塗りつぶし)の他、アウトライン(輪郭)を選択することもできます。上記同様、こちらも図解を用いて解説していきます。やり方はとても簡単なので誰でも直ぐ覚えられます。
- 初めに「紫色枠」で囲まれている辺りに「マウスポイント」を表示させます。すると「オレンジ色枠」で囲まれているように「ブロック」が表示され、スタイルの中の「黄色枠」で囲まれている「輪郭」を押します。
- 輪郭を選択すると「桃色枠」で囲まれている「ボタン」の色が変わったかと思います。
- 次は、ボタンを中央に寄せます。まずは「赤色枠」で囲まれている「アイコン」を押します。すると「緑色枠」で囲まれているようにプルダウンが開き、その中の「水色枠」で囲まれている「中央揃え」を押します。
- すると「桃色枠」で囲まれている「ボタン」が中央に移動しました。では「赤色枠」で囲まれている「プレビュー」を押して確認してみましょう。すると「緑色枠」で囲まれているようにプルダウンが開きます。
その中の「オレンジ色枠」で囲まれている「新しいタブでプレビュー」を開いてみましょう。
- トップ画面から見てみた感じです。「紫色枠」で囲まれている中央にリンク先となる「商品購入はコチラ」が表示されています。先程のボタンの色は黒でした。ではそのボタンを押してみましょう。
- 商品購入はコチラを押すと、先程と同様、リンク先である「グーグル」を表示させることができました。
ブロックパターンのボタンを使用
この章では、ブロックパターンについて、いくつかボタンの種類があるのでそれらを変更するやり方も覚えていきましょう。いろいろ覚えてくるとブログ自体も華やかになり、ユーザーに目を引くこと間違いありません。
- ブロックエディターを開いたら、ブロック一覧を開きましょう。下記の図解がその画面表示です。
- まず初めに「桃色枠」で囲まれている「パターン」を選択します。次に「緑色枠」内の下向き▼を押します。すると、プルダウンが開くので「オレンジ色枠」で囲まれている「ボタン」を押しましょう。
- 次に「黄色枠」で囲まれているようにボタンの種類がいくつか表示されていることが分かります。ではここで「紫色枠」で囲まれている「参照」を開いてみましょう。
- 参照を開いてみると「オレンジ色枠」で囲まれているように「日本語版のボタン」と、色で囲われていない「英語版のボタン」が表示されていることが分かります。では日本語版のボタンを見ていきましょう。
- 一つ目が「共通の背景色が付いたソーシャルリンク」です。やり方については割愛させて頂きます。
- 二つ目が「シンプルな行動喚起(CTA」です。やり方については割愛させて頂きます。
- 三つ目が「価格テーブル」です。やり方については割愛させて頂きます。
「共通の背景色が付いたソーシャルリンク」「シンプルな行動喚起(CTA)」「価格テーブル」に於いて、設置方法はいずれも難しくないので各自でやってみて下さい。それも勉強です。頑張りましょう。
今回は以上となります。ワードプレスでリンク付きボタンの作成方法については理解して頂けたでしょうか。ブロックエディターには、数多くのブロックがあり、覚えるのは大変ですが、その分やりがいはあります。
以前投稿した下記の記事にも目を通して貰えると幸いです。
- 「サイトとブログの違い」。
- 「ブログ用の記事構成テンプレート」。
