みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、WordPressでボタンリンクを挿入する方法をお伝えいたします。
ボタンブロックの挿入方法
![](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_btn.png)
リンクをボタンで載せたいときは「ボタン」を使用します。
![プラスボタンから「ボタン」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/btn-add-1.png)
![プラスボタンから「ボタン」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/btn-add-2.png)
ボタンブロックの編集
![ボタンにテキストを追加](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-text-input.png)
挿入したら、「テキストを追加…」と書かれたところに、ボタンの文言を記述します。
![ボタンのリンク設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-link.png)
「🔗」マークでリンクをつけましょう。「新しいタブで開く」かどうかも設定できます。
![ボタンブロックツールの文字装飾など](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-text-decoration.png)
文字装飾や、インライン画像の挿入もできます。
ボタンブロックの配置変更
![ボタンブロック全体選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-block-select-area.png)
![ボタンの配置を変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-align.png)
![ボタンの配置変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/j5GvoM8Vcv-min.gif)
ブロック内のボタンを選択した状態だと、該当のアイコンがツールバーに表示されません。ご注意ください。
![中のボタンを選択すると配置変更アイコンがブロックツールバーに出ない](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-select-area.png)
右メニューバーでの編集
それでは、右メニューバーでいろいろいじっていきましょう。
スタイル
![ボタンスタイルを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-style.png)
![ボタンの塗りつぶしスタイルと輪郭スタイル](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-style-prevew.png)
塗りつぶし(枠線なし)か輪郭(枠線付き)を選択できます。デフォルトは「塗りつぶし」です。
タイポグラフィ
![ボタンのタイポグラフィ設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-typography.png)
ボタンのフォントサイズを変更できます。
色設定
![ボタンの色設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-color-select.png)
![ボタンの色設定(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/s4odPLIMe6-min.gif)
文字と背景の色を設定します。
幅の設定
![ボタンの幅設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-width-setting.png)
ボタンの横幅サイズを設定します。
![ボタンの幅設定(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/pf4JedZ39u-min.gif)
ボタンの追加と編集
![ボタンを追加](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-add-btn.png)
新しいボタンを追加で並べて配置したいなら、ボタンの横にある「+(プラスボタン)」から新しいボタンをクリックしましょう。
![ボタン追加後](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-add-after-1024x244.png)
横にボタンが追加されました。
![ボタン追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/pqXgRmMhfu-min.gif)
個別でボタンのデザインを設定できます。
![別々のボタンスタイル](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-style-another.png)
順序変更
ボタン配置の順番を変えるには、ボタンを選択し、ブロックツールバーの「ドラッグ」でドラッグするか、右と左の矢印をクリックして移動します。
![ボタンの移動方法](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-move-1024x246.png)
![ボタンの移動(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/pTt8WAtpUB-min.gif)
バリエーションへの変換
複数のボタンを縦に並ばせたいときは、ボタンブロック全体を選択し、右メニューバーの「バリエーションへの変換」で「縦」を選びましょう。
![ボタンのバリエーションへの変換](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-validation.png)
![ボタンのバリエーションの変換(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/v60Yn6i9JU-min.gif)
ファイルブロック
![ファイルブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_file.png)
PDFやZIPなどを、ユーザーがダウンロードできるボタンをつけたいときは、「ボタン」ブロックでも良いでしょう。ですがもう一つ、ピッタリのブロックがあります。「ファイル」ブロックです。
![プラスボタンから「ファイル」ブロック選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-add-1.png)
![左上のプラスボタンからメニューを開いて「ファイル」ブロックを選択](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-add-2-863x1024.png)
ファイルのアップロード・選択
ユーザーにダウンロードしてほしいファイルを、アップロードもしくはメディアライブラリから選択します。
![ファイルブロック](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-block.png)
画像と同じく、ファイルをドラッグしてドロップするだけでもOKです。
![ファイルをWordPressにドロップするとファイルブロックになる(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/5eR3qrcTkS-min.gif)
アップロード時の注意点
アップロードの際に注意すべきなのは、アップ容量には限度があることです。
「メディアライブラリ」から「ファイルをアップロード」タブを選択してみてください。
![メディアライブラリの「ファイルをアップロード」をクリック](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-library-upload.jpg)
![メディアライブラリの最大アップロードサイズ容量確認](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-library-max-upload-size.png)
ここにある「最大アップロードサイズ」容量以上のファイルはアップできません。エラーになります。もちろん、画像ファイルも例外ではありません。
![エラー:アップロードファイルの容量が大きすぎる](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-library-error-upload-over.png)
サーバーの設定によって、制限は異なります。最大アップロードサイズ容量は、必ず確認しておきましょう。
もし、ファイル容量が大きくこれ以上削減できない場合は、「ファイル」ブロックは使えません。
![ボタンブロックでファイルのリンクを挿入](https://kotatsu.info/blog/wp-content/uploads/2021/08/button-file-link.png)
別の方法でサーバーにアップロードし、「ボタン」ブロックで該当ファイルのリンクを貼るのが良いでしょう。
ファイル名が日本語の場合
![ファイルブロックでのファイル名の表記](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-block-filename.png)
![メディアギャラリーのファイルのタイトル](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-library-filename.jpg)
アップロードもしくは選択できたら、ファイル名(タイトル)がそのままリンクテキストに表記されます。
しかし、日本語名のファイルをアップすると、よくわからない英数字になってしまいます。
![日本語名のファイルをWordPressにアップするとファイル名が変わる](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-block-filename-jp.png)
![日本語名のファイルをWordPressにアップするとファイル名が変わる(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/ZppUcc5qTd-min.gif)
これはWordPressの仕様です。日本語でつけられたすべてのファイル名は、このような形に変換して保存されます。
このリンク文言は変更できるため、わかりやすいものに変えておきましょう。文字装飾も可能です。
![ファイルのリンクテキスト変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/Mc8ufNF5oO-min.gif)
![フォルダブロックツールの文字装飾](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-link-text-edit.png)
ファイルブロックの配置変更
配置も左、中央、右寄せに変えられます。
![ファイルブロックツールの配置変更](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-block-tool-align.png)
![ファイルブロックツールの配置変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/TyMQ6RQoDn-min.gif)
置換
![ファイルブロックツールの「置換」メニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-block-tool-replacement-1024x322.png)
WordPressへアップ済みのファイルに差し替えるなら「メディアライブラリを開く」を、新しい画像をアップロードするなら「アップロード」を選択します。
![メディアライブラリから画像を選択する](https://kotatsu.info/blog/wp-content/uploads/2021/08/media-text-replacement-library.jpeg)
URLをコピー
![ファイルブロックツール「URLをコピー」](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-block-tool-url-copy.png)
![ファイルブロックツールから「URLをコピー」(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/HrZ5RYG0iO-min.gif)
アップしたファイルのURLをコピーできます。
別のタブでURLをペーストして開くことで、きちんとファイルがアップされているか確認できます。
![ファイルブロックツールから「URLをコピー」して、新規タブにペースト(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/Nu5vfHxvex-min.gif)
右メニューバーでの編集
右メニューバーを確認していきましょう。
テキストリンク設定
![ファイルブロックのテキストリンク設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-text-link-setting.png)
- リンク先
リンクテキストのリンク先を設定します。 - 新しいタブで開く
通常のリンクと同様、新しいタブでリンクを開きます。
![テキストリンク設定のリンク先のプルダウンメニュー](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-link-dropdown-list.png)
- メディアファイル
アップしたファイル単体を開きます。 - 添付ファイルのページ
ファイル説明のページに移動します。
ダウンロードボタンを表示
![ダウンロードボタン設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-download-button-setting.png)
「メディアファイル」にリンクしているダウンロードボタンの表示/非表示を設定します。
![ファイルブロックのダウンロードボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/file-download-button.png)
オンにすると、リンクテキストの右に表示されます。
![ダウンロードボタンの表示・非表示(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/vO6yCJY23x-min.gif)
ダウンロードボタンのリンク先は「メディアファイル」です。
リンクテキストのリンク先を「添付ファイルのページ」に設定しても、ダウンロードボタンは変わらず「メディアファイル」のままです。
ダウンロードボタンを表示するなら、ボタンのデザインを調整したいところです。
が、2021年8月現在のGutenbergエディタでは、テキストの編集や装飾はできても、ボタンの色や形の調整はできません。
細かいデザインの設定がしたいなら、「ボタン」ブロックの方が良いでしょう。
以上、リンクボタンの挿入方法を解説しました。
その他のブロックについての解説は、WordPressレクチャーからご覧ください。