• HOME > 
  • WordPress > 
  • ワードプレスでボタンを作成する方法【画像付きでわかりやすく解...

ワードプレスでボタンを作成する方法【画像付きでわかりやすく解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

WEBサイトにおけるボタンの役割

別ページへのリンクやフォームの送信といった機能そのものはaタグなどによりテキストだけでも実装することは可能です。しかし、テキストではページ内の他の部分にまぎれてしまい、せっかくアクションを起こそうとしてくれたユーザーを逃してしまいます。

誰でも一目でわかるようなボタンという形にして設置することにより、視認性が高まり、ユーザーにアクションを起こしてもらいやすくなるという効果が期待できます。

特に注文やお問い合わせにつながるボタンは設置場所やデザインによってクリック率に大きな差が出るのでサイトにとって重要なパーツと言えます。

このページでは、ワードプレスを使ってサイトにボタンを設置する方法について説明します。

ワードプレスで作成する方法

ワードプレスでサイトを制作している場合、ページ内にボタンを表示させる方法は大きく分けて3通りあります。

  • ・ボタンブロックを使う
  • ・画像として用意し挿入する
  • ・HTMLとCSSで作成する

ひとつ目はワードプレスのビジュアルエディターの機能である「ボタンブロック」を使う方法です。

この方法であればクリックするだけで好きな場所に簡単にボタンを設置することが可能です。

ふたつ目はボタンを画像として用意し挿入する方法です。

Adobe Illustratorなどのイラスト編集ソフトで作れば凝ったデザインのボタンも表示できます。

もうひとつはHTMLで要素を記述し、CSSでボタンの外観を装飾する方法です。

HTMLとCSSという言語の知識が必要になりますが、思い通りの見た目のボタンを作ることが可能です。

ここでは、ボタンを作る手順をそれぞれ説明していきます。

このページの説明や画像は、WordPress-5.6を使用したものになります。

ビジュアルエディターのボタンブロックを使う

ワードプレスのビジュアルエディターはHTMLやCSSなどの専門知識が無い方でも、様々な種類のブロックを組み合わせるだけでページを作ることができます。

ブロックには、見出しを表示するものや画像や動画を挿入するためのものなど色々なタイプがあり、その中にボタンを設置できるものもあるのでそれを使用します。

リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。...【もっと読む】

固定ページ(もしくは投稿ページ)の編集画面を開いたら、ブロックの追加をクリックします。

ブロックの追加

左側に表示されるブロック一覧の中から、「ボタン」を選択します。

ブロック一覧

エディター内にボタンブロックが挿入されます。

ボタンブロックが挿入

テキストを入力するとボタンに文字を打ち込めます。

テキストを入力

ブロックメニューからリンクをクリックし、URLを入力すればリンクを貼ることが可能です。

リンクを貼る

左端の「ブロックタイプまたはスタイルを変更」を押すと、塗りつぶしかアウトラインかを選べます。

ブロックタイプまたはスタイルを変更

アウトラインを選ぶと次のようになります。

アウトライン

ボタンの隣に表示されている「+」を押すとボタンを追加して並べることができます。

ボタンを追加

デザインをカスタマイズしたい場合はCSSを記述する必要がある

ビジュアルエディターで設置したボタンのデザインは、上記のようなものしか変更できません。

設置したボタンを思い通りのデザインにしたい時は、後述するCSSを使って装飾します。

ボタン画像を使用する

続いてはあらかじめ用意した画像データを使用してボタンを表示する方法です。

フリー素材やイラスト編集ソフトで作るのでスキルさえあれば複雑なデザインのボタンでも作ることが可能です。

画像ブロックで挿入する

先ほどのボタンブロックではなく、画像ブロックを使って挿入し、リンクを持たせるという手順になります。

事前作業としてボタンの画像データを準備しておきます。

ボタンの画像 リンク先のサムネイル
Inkscapeのインストール方法

無料で使えるベクターグラフィック描画ソフト「Inkscape」をダウンロードしてwindows10にインストールする流れを画像付き順を追って説明します。インストールが完了したら製作を始める前に、まず自動保存の設定を行っておくことをおすすめします...【もっと読む】

ビジュアルエディターで画像ブロックを追加します。

画像ブロックを追加

アップロードをクリックし、用意した画像をアップロードします。

画像をアップロード

画像としてボタンが挿入できました。

ボタンが挿入

続いてブロックメニューからリンクを設定すれば完成です。

修正に手間が掛かるのが欠点

画像なので自由にデザインできる反面、修正する場合は別途ソフト等で作り直した画像を再度アップロードしなくてはならず、ボタンの文字を一文字変えたいだけでもワードプレス上で行うことはできないため、手間がかかってしまうのが難点です。

ボタンにカーソルをのせると出る下線を消したい

ボタンにリンクを持たせるとマウスオーバーした際に下線が表示される場合があります。

これはテーマによってリンク機能を持つaタグにCSSを指定しているためです。

カーソルを合わせた時に下線が表示させたくない場合は、CSSで調整します。

カーソルを合わせた時に下線

ボタンのブロックのメニューにある「・・・」をクリックし、HTMLとして編集を押します。

ボタンのブロックのメニュー

ブロックのHTMLソースコードが表示されます。

ブロックのHTMLソースコード

この中の、

HTML

<a href="http://~">

の部分に、下図のように「class="sample-button"」を追記します。

HTML

<a class="sample-button" href="http://~">
追記

続いてプレビューを開きます。

プレビュー

プレビュー画面から「カスタマイズ」を表示させます。

カスタマイズ

追加CSSを開きます。

追加CSS

追加CSSの中に以下のように入力して下さい。

CSS

.sample-button:hover{
  box-shadow:none;
  text-decoration:none;
}

ボタンにカーソルを合わせてみると下線が表示されなくなりました。

有効化しているテーマによっては上記の方法でも消せない場合があるのでご了承下さい。

HTMLとCSSでゼロから作る

前述の通りビジュアルエディターのボタンブロックでは作れるデザインが限られていますので、思い描いたボタンを作りたければHTMLとCSSを記述して作成するのが確実です。

HTMLにはbuttonタグというボタン用のタグがありますが、ほかのタグでもCSSで装飾すればボタンとして使えます。

ビジュアルエディターでHTMLを入力する場合、「カスタムHTML」ブロックを利用が便利です。

記述の仕方は人それぞれではあるのですが、例としては以下のようなコードになります。

HTML

<button class="sample-button"><a href="http://locakhost/sample/contact/">お問い合わせ</a></button>

あとは、先程と同様に追加CSSでクラス名を指定してスタイルを決定すればOKです。

まとめ

以上がワードプレスでボタンを設置する方法です。

ビジュアルエディターのボタンブロックは簡単ですが、デザインは単調なのでやはりCSSでの調整が必要になると思います。

ボタンは、お問い合わせなどコンバージョンに直結する重要なパーツですのでこだわって作成しましょう。

関連する記事

サムネイル

ワードプレスの固定ページにPHPファイルを読み込む方法【ショ……

2023年12月04日
ワードプレスの固定ページ(投稿ページ)内にPHPを書いたり、PHPファイルを読み込ませることができたら便利ですよね。「PHPファイルを作成して、ショートコードを使って固定ページ内に読み込ませる」という方法をご紹介します。
サムネイル

コンタクトフォーム7のショートコードをテーマファイル内に埋め……

2023年11月24日
テーマファイル(PHPファイル)内にコンタクトフォーム7のショートコードをそのまま記述しても、フォームを呼び出すことはできません。
サムネイル

ワードプレスで前後の記事の公開日を取得して表示する方法【ge……

2023年10月01日
最終更新日:2023年09月12日
ワードプレスの投稿ページで前後の記事の公開日を表示させたいときはget_previous_postとget_next_post関数を使います。
サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年12月08日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。