WordPress個別サポート

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

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

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

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

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

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

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

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

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

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

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でお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート