WordPressでリンクをボタン画像のように設置する方法(HTML&CSS編集、プラグインを使う方法)

 

WordPressで記事を投稿する場合、多くは本文中にリンクを含みます。記事のコンバージョンが資料請求なのか、目的のサイトへの誘導なのか、顧客の獲得であるのか、いずれにせよリンクをクリックしてもらうというアクションをしてもらいたいというのが本音です。

しかしながら、本文中にリンクをテキストで埋め込むと目立ちにくく、クリックされにくい場合もあります。そんなときに活用したいのがリンクをボタン化する方法。ボタンと言っても画像を作成するわけではなく、あくまでもリンクをボタン画像のように見せるだけです。

ボタン画像のように見せることにより、下記のメリットが生まれます。

  • リンクであることが明確になる
  • 視認性の向上
  • バナーのようにブロックされることがない
  • バナーより表示が軽い

WordPressでは標準機能でリンクをボタン化することが可能です。その手法は2種類。

  • ブロックエディタでボタンブロックを追加する
  • CSSを編集してリンクをボタン化
  • テキストエディタでタグを直接書き込む

それでは、WordPressでリンクをボタンのような表示にする方法を具体的に見ていきましょう。

ブロックエディタでボタンブロックを追加する

WordPressのバージョンが5以上でブロックエディタを利用している場合、ボタンブロックとしてボタンを配置することが可能です。

プラグインの追加等は不要で容易にボタンを配置できます。

①ブロックの追加でボタンを追加する

②ボタンのブロックを選択し、リンクの編集を起動

③リンクを編集する。

ボタン位置、ボタンのスタイル、色なども編集可能です。

CSSを編集してリンクをボタン化

WordPressの標準機能として利用できるCSSの編集機能を利用して、リンクをボタン化する方法です。

CSSの設定

ダッシュボードの外観メニューからCSSの追加を行います。左メニューの「外観」→「カスタマイズ」→「CSSの追加」から追加できます。なお、CSSの追加は一度設定してしまえば、それ以降は設定内容が保持されるため、再利用が可能です。

①メニューから「外観」「カスタマイズ」を呼び出します。

②「追加CSS」をクリックします。

③CSSを記載し「公開」ボタンをクリックしてCSSを有効化します。

CSS記載内容の例

リンクの設定

記事内のリンクに対し、コードエディターでCSSを指定します。

①「設定」ボタンをクリックしてコードエディターを起動します。

②コードエディターにてリンク(aタグ)のタブ部分にclassを追記します。

③ボタンの表示イメージ(プレビュー)

テキストエディタにタグを入力してボタンを作成

テキストエディタにてHTMLのbuttonタグを記載することでリンクをボタン化する方法もあります。

なお、基本的にはCSSを編集してリンクをボタン化することをオススメします。サイト内で複数回ボタンを利用する場合などは、デザインの統一などの観点でCSSでの管理が便利です。一回限りの利用などであれば、テキストエディタから直接タグを入力する方法でも実現可能です。

①「設定」ボタンをクリックしてコードエディタを起動します。

②buttonタグを記載して保存します。

タグの記述例

③ボタンの表示イメージ(プレビュー)

プラグインを使う方法

リンクをボタン化するには、別の方法も存在します。プラグインを使う方法です。標準のWordPressにプラグインを導入することで簡単にリンクをボタン化できます。

ただし、プラグインの導入にはメリット/デメリットの両面が存在します。利用する際は慎重にご検討ください。

○メリット

  • 欲しい機能をかんたんに導入して利用できる
  • 難易度の高いコーディングを避けることができる
  • WordPressの管理画面内から機能が利用できる

○デメリット

  • プラグインを複数導入するとサイトが重くなることがある
  • プラグインを複数導入すると管理コストが上がる
  • 他のプラグインとの競合やバグの発生により、エラーが出たり、ページが表示されなくなることがある
  • プラグインのアップデートが行われず、Wordpressのバージョンによっては適用対象外となるリスクが有る

テーマ「New Standard」なら、クリックするだけで大中小のボタンを設定可能

株式会社ninoyaの提供する事業用WordPressテーマ「New Standard」なら、クリック操作だけで簡単にリンクをボタン化することができます。

また、このボタンによるリンクを「New Standard」ではキービジュアルに設定することも可能です。

「集客を優先するのはもちろんだけど、デザインにも妥協したくない!でも自分ひとりでは細かな設定は難しい……」そんな方に寄り添えるテーマでありたいと考えています。

New Standard 無料お試し体験

有料テーマを購入するリスクを、お客さまに負わせない。そんな想いから、New Standard では業界を先駆けて「無料お試し体験」を始めました。

いまなら「お試し体験」ユーザー限定で特別な特典をプレゼント中。内容はぜひ、お申込後にお確かめください。

お試し体験とは

お客さま専用のサンプルサイトを、14日間無料で自由に編集いただけます。

お試し体験の流れ

・申し込み
ページ下部のフォームよりお申込ください

・アカウント受領
1営業日以内にお客さま専用のURL・ID・パスワードをお送りします

・お試し体験
アカウント発行日より14日間ご利用いただけます

・サイトクローズ
期間が過ぎると自動的にサイトが閉鎖されます

お試し体験でできないこと

デモサイトではセキュリティ上の観点から、「編集者」権限のアカウントをご使用いただきます。

そのため、以下のような一部操作が制限されます。

  • WordPressの基本設定
  • テーマの切り替え
  • プラグインの追加、編集
  • 外部サイトの埋め込み(Facebook、Twitter、Instagram等のiframe)
  • ユーザーアカウントの追加・編集
  • カスタムCSSの編集

ほかは、製品版と同様の機能をお試しいただけます。

なお、商品購入時にデモサイト制作内容の引き継ぎは行えません。あらかじめご了承ください。

お試し体験申込フォーム

※4/29より5/9までGW休業となります。同期間のお問合せは、5/10以降順次対応させていただきます

法人名・屋号

氏名*

メールアドレス*