クリック率がアップ！色や画像が切り替わるリンクボタンをWordPressのcssで作る方法

 

本記事では，アフィリエイトサイトなどに不可欠な「リンクボタン」を作成する方法を説明します．デザインがきれいで，マウスを乗せたときに色が変化するボタンを作ることで，単純な文字リンクに比べてクリック率が格段に向上します．

 

今回は以下の3種類のリンクボタンを作成する方法を紹介します．

ボタンの上にマウスポインタをのせると変化しますので試してみてください．ちなみにクリックすると本サイトのトップページが開きます．

 

○○の申し込みはこちら→→

 

　

 

　

 

 

画像を使わずCSSだけでリンクボタンを作成する方法

アフィリエイト商品の販売ページへリンクするボタンの作成方法を紹介します．

 

あなたのサイトではこんなリンクを使用していませんか？

 

○○の申し込みはこちら→→

 

こんなあじけない感じでは，クリックしてもらうことはなかなか難しいかもしれません．

 

無料ブログの場合は自由にリンクボタンをデザインできないので仕方ないですが・・・

 

 

そこでまず最初に，次のようなリンクボタンを作成する方法について説明します．

 

○○の申し込みはこちら→→

 

 

このリンクボタンは，ただの文字リンクよりもデザインもきれいで見やすいですし，マウスを上に乗せると色も変わります．

 

このデザインでは画像データをいっさい使っておらず，全部スタイルシートでcssを定義して作成しています．

 

このような画像を使わないリンクボタンの作り方を説明します．

 

スタイルシートの設定方法

①WordPressの管理画面から「外観→テーマの編集」を選択し，スタイルシートを表示させます．

 

②つぎのコードをスタイルシートに貼り付けてください．

各コードの意味はコメントの通りです．

マウスが乗ったときには，背景の色を少し薄い緑にするように設定しています．

 

これでスタイルシートの設定は終了です．

 

次に記事中でこのボタンを使用する方法を説明します．

 

 

記事中でボタン１を入れる方法

①WordPress管理画面から「投稿一覧→新規追加」を選択し，通常通りに記事を書きます．

 

②記事のモードを右上のタブから「ビジュアル」から「テキスト」に切り替え，次のhtmlコードを貼り付けます．

 

リンクURLや文字は適宜書き換えてください．

これでリンクボタンが完成です．

 

 

画像を使ったリンクボタンの作り方

次に画像を使って以下のようなリンクボタンを作成する方法を説明します．
 
　

 

このリンクボタンは1つ目のボタンと動作は同じですが，画像データを使って作成されています．

 

売れているアフィリエイトサイトを見ていると，このタイプのボタンが主流です．

 

 

スタイルシートの設定方法

①WordPressの管理画面から「外観→テーマの編集」を選択し，スタイルシートを表示させます．

 

②つぎのコードをスタイルシートに貼り付けてください．

各コードの意味はコメントの通りです．

hover時には画像の透過性を調整することで，薄くしています．

 

これでスタイルシートの設定は終了です．

 

 

次に記事でこのボタンを使用する方法を説明します．

 

 

記事中でボタン2を入れる方法

①WordPress管理画面から「投稿一覧→新規追加」を選択し，通常通りに記事を書きます．

 

②記事のモードを右上のタブから「ビジュアル」から「テキスト」に切り替え，次のhtmlコードを貼り付けます．

リンクURLや文字は適宜書き換えてください．

これでリンクボタンが完成です．

 

 

ここで注意点があります．最後の</a>の前に全角スペースが入っています．

 

ここで全角スペースが入っていないと，記事を書く画面で「ビジュアルモード」と「テキストモード」を切り替えたときに，勝手にタグが調整されて，リンクボタンが消えてしまいます．

 

あまりかっこよい対処方法ではないですが，全角スペースを入れる方法が一番手軽なので紹介します．

 

 

画像が切り替わるリンクボタンの作り方

次に画像を使って以下のようなリンクボタンを作成する方法を説明します．
 
　

 

このリンクボタンはマウスを乗せると画像が切り替わるようにできています．

 

 

 

スタイルシートの設定方法

①WordPressの管理画面から「外観→テーマの編集」を選択し，スタイルシートを表示させます．

 

②つぎのコードをスタイルシートに貼り付けてください．

各コードの意味はコメントの通りです．

 

ここで肝なのは，hover時にどう画像を切り替えるかです．

 

簡単なのはhover時に別の画像を読み込む方法ですが，その方法を使うとhover時に画面がちらついてしまって違和感が出てしまいました．

 

そのため今回は，2つのボタン画像をくっつけた一つの大きな画像ファイルを使用し，最初は上半分を表示して，hover時に下半分を表示させています．

 

使っている画像は以下のようになっています．

（注意：画像サイズは少し変わっています）

 

自分で作成したボタンの画像サイズに合わせて，ボタンサイズや動かす量を調整してください．

 

 

これでスタイルシートの設定は終了です．

次に記事でこのボタンを使用する方法を説明します．

 

 

記事中で変化する画像ボタンを入れる方法

①WordPress管理画面から「投稿一覧→新規追加」を選択し，通常通りに記事を書きます．

 

②記事のモードを右上のタブから「ビジュアル」から「テキスト」に切り替え，次のhtmlコードを貼り付けます．

リンクURLや文字は適宜書き換えてください．

これでリンクボタンが完成です．

 

 

以上，3種類のリンクボタンを作成する方法について解説しました．

 

 

ご一読いただきありがとうございます．