株式会社火燵(こたつ)は、成果や売上にこだわる方のための動画マーケティング会社です。動画コンサルティング・動画制作・WEBマーケティング・動画制作内製化支援ならお任せください。

WordPressで記事にボタンを挿入してクリック率アップ!【初心者向け/WordPressの使い方】

その他

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、WordPressでボタンリンクを挿入する方法をお伝えいたします。

ボタンブロックの挿入方法

リンクをボタンで載せたいときは「ボタン」を使用します。

プラスボタンから「ボタン」ブロック選択
エディタ画面の「ブロックを追加」から「ボタン」ブロック選択
プラスボタンから「ボタン」ブロック選択
画面左上プラスボタンからメニューを開き「ボタン」ブロック選択

ボタンブロックの編集

ボタンにテキストを追加

挿入したら、「テキストを追加…」と書かれたところに、ボタンの文言を記述します。

ボタンのリンク設定

「🔗」マークでリンクをつけましょう。「新しいタブで開く」かどうかも設定できます。

ボタンブロックツールの文字装飾など

文字装飾や、インライン画像の挿入もできます。

ボタンブロックの配置変更

  1. ボタンの枠にあたる、外側の大きなブロックを選択します。
    ボタンブロック全体選択
  2. ブロックツールバーから「コンテンツ揃え位置を変更」をクリックしましょう。
    ボタンの配置を変更
  3. 左・中央・右・両端に揃えられます。
    ボタンの配置変更(アニメーション)

ブロック内のボタンを選択した状態だと、該当のアイコンがツールバーに表示されません。ご注意ください。

中のボタンを選択すると配置変更アイコンがブロックツールバーに出ない
ブロックの中にあるボタンを選択した場合のブロックツール表示

右メニューバーでの編集

それでは、右メニューバーでいろいろいじっていきましょう。

スタイル

ボタンスタイルを選択
ボタンの塗りつぶしスタイルと輪郭スタイル

塗りつぶし(枠線なし)か輪郭(枠線付き)を選択できます。デフォルトは「塗りつぶし」です。

タイポグラフィ

ボタンのタイポグラフィ設定

ボタンのフォントサイズを変更できます。

色設定

ボタンの色設定
ボタンの色設定(アニメーション)

文字と背景の色を設定します。

幅の設定

ボタンの幅設定

ボタンの横幅サイズを設定します。

ボタンの幅設定(アニメーション)

ボタンの追加と編集

ボタンを追加

新しいボタンを追加で並べて配置したいなら、ボタンの横にある「+(プラスボタン)」から新しいボタンをクリックしましょう。

ボタン追加後

横にボタンが追加されました。

ボタン追加(アニメーション)

個別でボタンのデザインを設定できます。

別々のボタンスタイル

ボタン配置の順番を変えるには、ボタンを選択し、ブロックツールバーの「ドラッグ」でドラッグするか、右と左の矢印をクリックして移動します。

ボタンの移動方法
ボタンの移動(アニメーション)
ボタンの移動

バリエーションへの変換

複数のボタンを縦に並ばせたいときは、ボタンブロック全体を選択し、右メニューバーの「バリエーションへの変換」で「」を選びましょう。

ボタンのバリエーションへの変換
ボタンのバリエーションの変換(アニメーション)
バリエーションへの変換

ファイルブロック

ファイルブロックアイコン

PDFやZIPなどを、ユーザーがダウンロードできるボタンをつけたいときは、「ボタン」ブロックでも良いでしょう。ですがもう一つ、ピッタリのブロックがあります。「ファイル」ブロックです。

プラスボタンから「ファイル」ブロック選択
エディタ画面の「ブロックを追加」から「ファイル」ブロック選択
左上のプラスボタンからメニューを開いて「ファイル」ブロックを選択
画面左上プラスボタンからメニューを開き「ファイル」ブロック選択

ファイルのアップロード・選択

ファイルブロック

ユーザーにダウンロードしてほしいファイルを、アップロードもしくはメディアライブラリから選択します。

画像と同じく、ファイルをドラッグしてドロップするだけでもOKです。

ファイルをWordPressにドロップするとファイルブロックになる(アニメーション)

アップロード時の注意点

アップロードの際に注意すべきなのは、アップ容量には限度があることです。

メディアライブラリ」から「ファイルをアップロード」タブを選択してみてください。

メディアライブラリの「ファイルをアップロード」をクリック
メディアライブラリの最大アップロードサイズ容量確認

ここにある「最大アップロードサイズ」容量以上のファイルはアップできません。エラーになります。もちろん、画像ファイルも例外ではありません

エラー:アップロードファイルの容量が大きすぎる

サーバーの設定によって、制限は異なります。最大アップロードサイズ容量は、必ず確認しておきましょう。

もし、ファイル容量が大きくこれ以上削減できない場合は、「ファイル」ブロックは使えません。

ボタンブロックでファイルのリンクを挿入

別の方法でサーバーにアップロードし、「ボタン」ブロックで該当ファイルのリンクを貼るのが良いでしょう。

ファイル名が日本語の場合

ファイルブロックでのファイル名の表記
ファイル名がリンク文言になる
メディアギャラリーのファイルのタイトル
メディアライブラリの「タイトル」がファイルブロックのリンク文言になる

アップロードもしくは選択できたら、ファイル名(タイトル)がそのままリンクテキストに表記されます。

しかし、日本語名のファイルをアップすると、よくわからない英数字になってしまいます。

これはWordPressの仕様です。日本語でつけられたすべてのファイル名は、このような形に変換して保存されます。

このリンク文言は変更できるため、わかりやすいものに変えておきましょう。文字装飾も可能です。

ファイルブロックの配置変更

配置も左、中央、右寄せに変えられます。

置換

ファイルブロックツールの「置換」メニュー

WordPressへアップ済みのファイルに差し替えるなら「メディアライブラリを開く」を、新しい画像をアップロードするなら「アップロード」を選択します。

メディアライブラリから画像を選択する
メディアライブラリからの画像選択方法

URLをコピー

アップしたファイルのURLをコピーできます。

別のタブでURLをペーストして開くことで、きちんとファイルがアップされているか確認できます。

ファイルブロックツールから「URLをコピー」して、新規タブにペースト(アニメーション)

右メニューバーでの編集

右メニューバーを確認していきましょう。

テキストリンク設定

ファイルブロックのテキストリンク設定
リンク先
リンクテキストのリンク先を設定します。
新しいタブで開く
通常のリンクと同様、新しいタブでリンクを開きます。
テキストリンク設定のリンク先のプルダウンメニュー
メディアファイル
アップしたファイル単体を開きます。
添付ファイルのページ
ファイル説明のページに移動します。

ダウンロードボタンを表示

ダウンロードボタン設定

「メディアファイル」にリンクしているダウンロードボタンの表示/非表示を設定します。

ファイルブロックのダウンロードボタン

オンにすると、リンクテキストの右に表示されます。

ダウンロードボタンの表示・非表示(アニメーション)

ダウンロードボタンのリンク先は「メディアファイル」です。
リンクテキストのリンク先を「添付ファイルのページ」に設定しても、ダウンロードボタンは変わらず「メディアファイル」のままです。

ダウンロードボタンを表示するなら、ボタンのデザインを調整したいところです。
が、2021年8月現在のGutenbergエディタでは、テキストの編集や装飾はできても、ボタンの色や形の調整はできません

細かいデザインの設定がしたいなら、「ボタン」ブロックの方が良いでしょう。


以上、リンクボタンの挿入方法を解説しました。

その他のブロックについての解説は、WordPressレクチャーからご覧ください。

WordPressレクチャーシリーズ一覧

「その他」の関連記事


新着記事