BizVektorでリンクボタンを作成する方法
商品やサービスページの下にある「詳しくはこちら」や「お申し込みはこちら」のリンクは、リンクボタンや画像などにできればクリック率も上がりそうです。
![リンクボタンにできれば…](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-10-23-46.jpg)
BizVektorであれば、簡単に次のようなボタン風のリンクとして表示できます。
![BizVektorならリンクボタンも簡単に作成できる](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-10-32-06.jpg)
これは画像ではなく、次のようなリンクタグ(aタグ)にclass名「btn btnL」を付けたものです。
<a href="http://example.com/" class="btn btnL">詳しくはこちら</a>
これを投稿や固定ページの編集画面(テキストエディタ)に入力することで、「詳しくはこちら」がリンクボタンとして表示されます(移動先のexample.comは変更してください)。
BizVektorでリンクボタンを作成する手順
以下、ページに「詳しくはこちら」ボタンを追加する手順を紹介します。
まずは、投稿や固定ページの編集画面(テキストエディタ)にリンクボタンとして表示したい文字を入力して、その文字を選択します。
![リンクボタンに使う文字の入力](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-10-48-081.jpg)
文字を選択したまま、リンク作成ボタンをクリックします。
![「リンク作成」メニューを開く](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-10-48-082.jpg)
開いたメニューでリンク先を設定します。
リンク先が外部サイトの場合は、任意のURLを入力して「リンクを新ウィンドウまたはタブで開く」をチェックします。「タイトル」はページの名称などを入力しますが未入力でも大丈夫です。
![外部サイトにジャンプするリンクの場合](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-10-57-44.jpg)
リンク先が同じサイトのページの場合は、「または既存のコンテンツにリンク」をクリックして、下に表示される一覧から移動先のページを選択します。
ページを選択すると、そのURLとタイトルが自動で入力されます。
![サイト内のページに移動するリンクの場合](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-11-00-53.jpg)
画面下の「リンク追加」ボタンをクリックすると、テキストエディタにリンク(aタグ)が追加されます。
![「詳しくはこちら」リンクが追加される](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-11-04-32.jpg)
このままでは、冒頭に紹介した普通の「リンク」なので、aタグにclassを追加してリンクボタンに加工します。具体的には、「<a」の後あたりに「class="btn btnL"」を追加します。「href」以降はそのままです。
<a class="btn btnL" href="http://abiko.xsrv.jp/support" title="WordPress個別サポート【スカイプ対応】">詳しくはこちら</a>
これで、「詳しくはこちら」がリンクボタン風に表示されるようになります。
![「詳しくはこちら」がリンクボタン風に](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-11-08-29.jpg)
通常、このリンクボタンにマウスオーバーすると色が変わるようになっていますが、色が変わらない場合は次のCSSを子テーマのstyle.cssなどに入力してみてください。
/* ボタンのマウスオーバー時に色を変更 */ a.btn.btnL:hover { background-color:red; color:white; }
表示結果は次のようになります。
![マウスオーバー時に背景色を変更](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-11-36-58.jpg)
マウスオーバー時に「opacity」(透過度)を指定して色を薄く(透明に)することもできます。
/* ボタンのマウスオーバー時に透明に */ a.btn.btnL:hover { background-color:red; color:white; opacity:0.6; }
opacityは0(完全に透明)から1(完全に不透明)まで指定できます。
表示結果は次のようになります。
![マウスオーバー時にボタンを薄くする](http://www.nishi2002.com/wp-content/uploads/2014/11/2015-04-30-10-42-12.jpg)
上記のボタンは大サイズのボタンでしたが、class名を変えることで大・中・小サイズのボタンを表示することができます。
<a class="btn btnL" href="#">詳しくはこちら</a> <a class="btn btn" href="#">詳しくはこちら</a> <a class="btn btnS" href="#">詳しくはこちら</a>
表示結果は次のようになります。
![サイズ別のリンクボタン](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-11-14-45.jpg)
class名が異なるだけです。マウスオーバー時のCSSの例も紹介しておきます。
/* ボタンのマウスオーバー時に色を変更 */ a.btn.btn:hover, a.btn.btnS:hover, a.btn.btnL:hover { background-color:red; color:white; }
![マウスオーバー時に背景色を変更](http://www.nishi2002.com/wp-content/uploads/2014/11/2014-11-13-11-35-28.jpg)
BizVektorにはリンクボタンを含めて役立つ「class名」がいろいろと定義されています。詳しくは、以下のページをご覧ください。