ワードプレステーマ Diver のボタン機能の使い方を解説【クリック率がアップします】

 

 

ワードプレステーマ Diver の入力補助機能の１つ

「ボタン」の使い方について解説します。

 

この機能を使って、実際にボタンを作りながら解説しているので

表示デザインやクリックしたときの挙動なども、あわせて確認してみてください。

１．Diver のボタン機能の使い方

Diver のボタン機能は、入力補助機能の中に入っています。

ワードプレスの投稿編集画面から、入力補助 ＞ ボタン とクリックすると作成画面が開きます。

↓　　　↓　　　↓

 

こちらが実際のボタン作成画面です。

 

２．Diver のボタン作成機能の各項目を解説

Diver のボタン作成機能の設定項目は、全部で7箇所あります。

それぞれがどういう意味を持つのか、1つずつ確認していきましょう。

 

2-1 ボタン生成タイプ

ボタン生成タイプでは、URL または 広告タグ の、いずれかからボタンを作るかを選択することができます。

 

 

どちらを選択したかによって、下部の入力欄が変更されます。

 

通常を選択した場合

通常を選択した場合は、ボタンテキスト と リンク先URL に情報を入力します。

ボタンテキストの例：公式サイトはこちら

リンク先URLの例：https://waken01.com/

 

広告タグから作成を選択した場合

こちらを選択した場合、入力枠は1つだけになります。

ASP（広告代理店）などから発行された広告タグを、そのまま入力するだけでOKです。

 

2-2 リンクオプション

リンクオプションの設定項目は2つです。

別タブで～にチェックを入れると、リンクに「" target="_blank"」が付与され

クリックしたときに、ブラウザの別タブでページが開かれるようになります。

 

nofollow は、「このリンク先のページを私は推奨していません」

ということを、検索エンジンにアピールしたいときにチェックを入れます。

 

nofollow について詳しく知りたい方は、以下のページでご確認ください。

参考リンクnofollow属性とは？（アレグロのSEOブログ）

 

2-3 ボタンタイプ

ボタンタイプでは、表示するボタンのデザインを指定することができます。

 

選択できるボタンのデザインは、全部で13種類あります。

ボタン	ボタン	ボタン	ボタン
ボタン	ボタン	ボタン	ボタン
ボタン	ボタン	ボタン	ボタン
ボタン

 

2-4 色

ボタンの「色」を指定できます。デフォルトで選択できるのは8色。

 

カスタム を選択すると、さらに細かく各部位の色を指定することができます。

 

2-5 ボタンアイコン

ボタンのテキストの、前や後ろにアイコンを表示できます。

ボタンアイコンの設定項目は3箇所です。

 

↓　　　↓　　　↓

 

以下ボタンアイコンの表示サンプルです。

非表示	前	後ろ
ボタン	fa-arrow-circle-rightボタン	ボタンfa-arrow-circle-right

 

2-6 オプション

ボタンの表示方法を選択できます。選択できる項目は3つ。

 

以下表示サンプルです。

 

 

2-7 大きさ

ボタンの大きさを変更できます。設定項目は3つです。

 

以下それぞれのサイズの表示サンプルです。

 

 

 

さいごに

Diver の入力補助機能の、ボタン に絞って使い方を解説しました。

 

通常なら、HTML や CSS を使う必要がありますが

なにもわからなくても手軽にボタンをつくることができる嬉しい機能です。

 

「リンクはここにありますよ！」と、ユーザーに知らせることが重要ですので

あまり使いすぎずに、ここぞ！というところに設置するようにしましょう。

 

最後にこのページのおさらいです。