BizVektorのカスタマイズ

商品やサービスページの下にある「詳しくはこちら」や「お申し込みはこちら」のリンクは、リンクボタンや画像などにできればクリック率も上がりそうです。

リンクボタンにできれば…

リンクボタンにできれば…

BizVektorであれば、簡単に次のようなボタン風のリンクとして表示できます。

BizVektorならリンクボタンも簡単に作成できる

BizVektorならリンクボタンも簡単に作成できる

これは画像ではなく、次のようなリンクタグ(aタグ)にclass名「btn btnL」を付けたものです。

<a href="http://example.com/" class="btn btnL">詳しくはこちら</a>

これを投稿や固定ページの編集画面(テキストエディタ)に入力することで、「詳しくはこちら」がリンクボタンとして表示されます(移動先のexample.comは変更してください)。

スポンサーリンク

BizVektorでリンクボタンを作成する手順

以下、ページに「詳しくはこちら」ボタンを追加する手順を紹介します。

まずは、投稿や固定ページの編集画面(テキストエディタ)にリンクボタンとして表示したい文字を入力して、その文字を選択します。

リンクボタンに使う文字の入力

リンクボタンに使う文字の入力

文字を選択したまま、リンク作成ボタンをクリックします。

「リンク作成」メニューを開く

「リンク作成」メニューを開く

開いたメニューでリンク先を設定します。

リンク先が外部サイトの場合は、任意のURLを入力して「リンクを新ウィンドウまたはタブで開く」をチェックします。「タイトル」はページの名称などを入力しますが未入力でも大丈夫です。

外部サイトにジャンプするリンクの場合

外部サイトにジャンプするリンクの場合

リンク先が同じサイトのページの場合は、「または既存のコンテンツにリンク」をクリックして、下に表示される一覧から移動先のページを選択します。

ページを選択すると、そのURLとタイトルが自動で入力されます。

サイト内のページに移動するリンクの場合

サイト内のページに移動するリンクの場合

画面下の「リンク追加」ボタンをクリックすると、テキストエディタにリンク(aタグ)が追加されます。

「詳しくはこちら」リンクが追加される

「詳しくはこちら」リンクが追加される

このままでは、冒頭に紹介した普通の「リンク」なので、aタグにclassを追加してリンクボタンに加工します。具体的には、「<a」の後あたりに「class="btn btnL"」を追加します。「href」以降はそのままです。

<a class="btn btnL" href="http://abiko.xsrv.jp/support" title="WordPress個別サポート【スカイプ対応】">詳しくはこちら</a>

これで、「詳しくはこちら」がリンクボタン風に表示されるようになります。

「詳しくはこちら」がリンクボタン風に

「詳しくはこちら」がリンクボタン風に

通常、このリンクボタンにマウスオーバーすると色が変わるようになっていますが、色が変わらない場合は次のCSSを子テーマのstyle.cssなどに入力してみてください。

/* ボタンのマウスオーバー時に色を変更 */
a.btn.btnL:hover {
    background-color:red;
    color:white;
}

表示結果は次のようになります。

マウスオーバー時に背景色を変更

マウスオーバー時に背景色を変更

マウスオーバー時に「opacity」(透過度)を指定して色を薄く(透明に)することもできます。

/* ボタンのマウスオーバー時に透明に */
a.btn.btnL:hover {
    background-color:red;
    color:white;
    opacity:0.6;
}

opacityは0(完全に透明)から1(完全に不透明)まで指定できます。

表示結果は次のようになります。

マウスオーバー時にボタンを薄くする

マウスオーバー時にボタンを薄くする

上記のボタンは大サイズのボタンでしたが、class名を変えることで大・中・小サイズのボタンを表示することができます。

<a class="btn btnL" href="#">詳しくはこちら</a>
<a class="btn btn" href="#">詳しくはこちら</a>
<a class="btn btnS" href="#">詳しくはこちら</a>

表示結果は次のようになります。

サイズ別のリンクボタン

サイズ別のリンクボタン

class名が異なるだけです。マウスオーバー時のCSSの例も紹介しておきます。

/* ボタンのマウスオーバー時に色を変更 */
a.btn.btn:hover,
a.btn.btnS:hover,
a.btn.btnL:hover {
    background-color:red;
    color:white;
}
マウスオーバー時に背景色を変更

マウスオーバー時に背景色を変更

BizVektorにはリンクボタンを含めて役立つ「class名」がいろいろと定義されています。詳しくは、以下のページをご覧ください。

BizVektor ページ装飾指定一覧表

この記事をSNSで共有する
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク