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

 

わかば
山本さん、Diver の入力補助機能の「ボタン」ってありますよね?
あれの使い方が、いまいちよくわからなくって...

山本
おっけー
じゃあ今回は Diver のボタンの使い方について解説していくよ!

 

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

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

 

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

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

1.Diver のボタン機能の使い方

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

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

Diverでボタンをつくる方法

↓   ↓   ↓

Diverでボタンをつくる方法

 

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

Diverでボタンをつくる方法

わかば
そうそう、ここまではいけたんですけど
設定項目が多くて頭がこんがらがっちゃって...

山本
確かに初めてだとちょっと難しく感じるかもね
でも、使い方はとても簡単だから1項目ごとに解説するよ

 

2.Diver のボタン作成機能の各項目を解説

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

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

 

2-1 ボタン生成タイプ

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

 

  • 通常:URLからボタンを生成します
  • 広告タグから作成:広告タグ(HTMLタグ)からボタンを生成します

 

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

 

通常を選択した場合

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

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

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

ボタン生成タイプ

 

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

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

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

山本
主にアフィリエイトリンクに使うことが多いですが
”何のリンクを貼るのか” によって、使い分けましょう

 

2-2 リンクオプション

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

  • 別タブで開く
  • nofollow

 

リンクオプション

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

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

山本
わー研。では ”外部リンクのみ” 別タブで開くように設定してます

 

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

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

 

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

参考リンクnofollow属性とは?(アレグロのSEOブログ)

 

2-3 ボタンタイプ

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

ボタンタイプ

 

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

 

2-4 色

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

色

 

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

色

 

2-5 ボタンアイコン

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

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

  • 非表示
  • 後ろ

 

ボタンアイコン

↓   ↓   ↓

ボタンアイコン

 

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

非表示 後ろ

 

2-6 オプション

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

  • ブロック
  • インライン
  • フルサイズ

 

オプション

山本
インラインはほとんど使う機会がないと思うので
ブロックかフルサイズを選択しましょう

 

以下表示サンプルです。

 

 

2-7 大きさ

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

 

大きさ

 

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

 

 

 

さいごに

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

 

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

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

 

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

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

 

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

  • HTML や CSS の知識がなくても簡単にボタンを作れる
  • Diver のボタン機能の呼び出し方
  • Diver のボタン作成機能の各項目の設定方法

 

わかば
これで私のブログにもボタンをつくれそうです!
レインボーカラーとかあればもっと良かったんですけどねー

山本

ははっ...レインボーですか...笑

ちなみにボタンは「緑色」が1番クリック率が高いと
言われているから覚えておくといいよ

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事