「ボタン」を作って便利に使う方法！[DIVER入力補助]

ばにら営業部長

こんにちは。ばにら営業部長です

この記事はWordPressテーマDIVERの入力補助機能「ボタン」の使い方をご案内します。

ボタンとはみなさんもよくご存知のボタンを押す機能です。DIVERではそのボタンをどのように使うのか分からないという方に向けた記事です。

この記事ではWordPressのブロックエディター「Gutenberg」の場合の使い方をレビューしています。

クラシックエディター「旧エディター」を使っている場合は機能が若干違います。

ばにら営業部長

クラシックエディターとブロックエディターで若干違う場合があるよ

DIVERの入力補助「ボタン」はどう使うのか？

入力補助機能「ボタン」とは名前の通り自分のブログやサイトにボタンを設置する機能のことです。ではなぜボタンを設置するのでしょうか？

ボタンを設置する場面は自分のブログやサイトの記事を他のページへ飛ばしたり、外部サイトへリンクを貼りたいときに使うことができる便利な機能として使えるからです。

それでは早速どのような機能なのか見ていきましょう。下記のオレンジ色の部分がボタンです。

この状態はボタンを設定して色とボタンタイトルを入力しただけになります。この状態ではボタンを押しても何の反応もしません。

ボタンを設定したらリンク先URLを忘れずに設定しましょう。そうすればボタンを押して他のページや外部リンクへと繋がるようになります。

他のブログなどに多く記載されている解説はクラシックエディターを使用している解説が多く作成方法が若干異なります。

この記事ではクラシックエディターではなく（ブロックエディター）Gutenbergでの入力補助機能で解説しているため他の解説と若干違うと思います。

ではこのボタンの作成方法はどうするのでしょうか？下記の画像で確認しましょう。

Gutenbergのブロックエディターでは文字を入力する場合右端にある＋をクリックしてブロックの種類を選びます。

そこでブロック検索の一番下にある入力補助を選べば「ボタン」のブロックが表示されのでボタンをクリックすれば「ボタン」が表示されます。

では入力補助のボタンをクリックしてみましょう。すると下の画像のようにブロックにボタンが表示されます。右側には色の設定やボタン設定が表示されます。

これでボタンを作成出来ます。同じようにボタンを作成すれば下記のようにボタンを押せばちゃんと他のページが表示されます。

追加情報

2020/8現在では WordPressが更新されていて画像と若干異なりますが基本は同じ操作で可能です。

ボタンを押してバニラワールドのDIVREカスタマイズの記事を見てみましょう！

どうでしたか？ボタンを押したらDIVREのカスタマイズ記事に飛んだでしょう？

画像で解説した通り使い方は簡単です。ボタンを設置してURLを埋め込んで完成です。

ボタン機能にはボタン種類とカラーが選べるようになっています。自分のオリジナルなボタンを作成することが出来ます。

他のDIVER入力補助機能についての記事にもボタンを作成したのでクリックしてみてください。下のボタンは「大サイズ、楕円デザイン、背景色＝黄色、テキスト色＝黒で作成しました。

下のボタンは中サイズ、四角いデザイン、背景色＝緑、テキスト色＝青、枠線色＝黒で作成しました。

ばにら営業部長

自分だけのボタンを作ろう！

ボタンの設定はどうすれば良いのか？

ボタンの設定はボタンの種類とカラーが選べます。カラーは背景、テキスト、枠線それぞれ設定可能です。

ボタンの種類は全部で10種類あります。「Gutenbergの場合。」あなたはどのタイプのボタンを選びますか？

ボタンのカラーは背景が11種類＋カスタムカラーが選べます。あなたはボタンの背景色はどれにしますか？

ボタンのテキスト、枠線もそれぞれ11種類＋カスタムカラーが選べます。あなたはボタンのテキストの色をどうしますか？

ばにら営業部長

色の種類が豊富にあるんだね

ボタンサイズは3種類あり好きな大きさを選ぶことが可能です。あなたはどのくらいの大きさが良いですか？

どのようにボタンを作成するかはあなた次第です。楽しんで作成しましょう。

ボタンの設定はリンク先URLの設定、別タブで開く、nofollow、サイズ、デザイン、カラーの設定があります。主に使うのはURL設定とサイズ、デザイン、色の設定です。

nofollowは「ほとんど使わない」けど設定はできます。（DIVERもそう言っています。）

ボタンの設定で良く使うのはリンク先URLとボタンのデザインと背景カラーリングとテキスト色の設定を良く使うことでしょう。

私もボタンを設定する時はまずデザインを選び、背景カラーとテキストカラーを選びます。

最後にリンク先URLをペーストすればボタンの完成です。

下のボタンは全て設定した場合のボタンです。これで別の記事にいけます。

まとめ

WordPressテーマDIVERの入力補助機能「ボタン」は結構使える機能ですね。

DIVERの入力補助機能「ボタン」を使って自分の他のページにすぐにジャンプできるようにしましょう。

他の関連記事にすぐに辿り着けるようSEO的にもどんどん使える便利な機能です。使えるものは使ってブログ更新が捗るように自分のものにしていけば楽しくブログも更新できます。