本記事では,アフィリエイトサイトなどに不可欠な「リンクボタン」を作成する方法を説明します.デザインがきれいで,マウスを乗せたときに色が変化するボタンを作ることで,単純な文字リンクに比べてクリック率が格段に向上します.
今回は以下の3種類のリンクボタンを作成する方法を紹介します.
ボタンの上にマウスポインタをのせると変化しますので試してみてください.ちなみにクリックすると本サイトのトップページが開きます.
本記事の内容
画像を使わずCSSだけでリンクボタンを作成する方法
アフィリエイト商品の販売ページへリンクするボタンの作成方法を紹介します.
あなたのサイトではこんなリンクを使用していませんか?
こんなあじけない感じでは,クリックしてもらうことはなかなか難しいかもしれません.
無料ブログの場合は自由にリンクボタンをデザインできないので仕方ないですが・・・
そこでまず最初に,次のようなリンクボタンを作成する方法について説明します.
このリンクボタンは,ただの文字リンクよりもデザインもきれいで見やすいですし,マウスを上に乗せると色も変わります.
このデザインでは画像データをいっさい使っておらず,全部スタイルシートでcssを定義して作成しています.
このような画像を使わないリンクボタンの作り方を説明します.
スタイルシートの設定方法
①WordPressの管理画面から「外観→テーマの編集」を選択し,スタイルシートを表示させます.
②つぎのコードをスタイルシートに貼り付けてください.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* ボタン1作成*/ .button1 { width: 250px; /*ボタンの幅*/ background-color: #00b050; /*ボタンの背景の色*/ border: 1px solid #ffffff; /*ボタンの枠線の色と太さ*/ border-radius: 14px; /*ボタンの角の丸め具合*/ display: block; font-weight: bold; /*太字に*/ color: #ffffff; /*文字の色*/ padding: 10px 20px; /*文字とボタンのスペースの幅*/ text-align: center; /*文字を真ん中そろえに*/ text-decoration: none; /*文字の下線をなくす*/ } .button1:hover { /*マウスが乗ったときの変化を設定*/ background-color: #00d070; /*ボタンの背景の色*/ color: #ffffff; /*フォントの色*/ text-decoration:none; /*文字の下線をなくす*/ top:1px; left:1px; position:relative; /*場所を少しずらす*/ } |
各コードの意味はコメントの通りです.
マウスが乗ったときには,背景の色を少し薄い緑にするように設定しています.
これでスタイルシートの設定は終了です.
次に記事中でこのボタンを使用する方法を説明します.
記事中でボタン1を入れる方法
①WordPress管理画面から「投稿一覧→新規追加」を選択し,通常通りに記事を書きます.
②記事のモードを右上のタブから「ビジュアル」から「テキスト」に切り替え,次のhtmlコードを貼り付けます.
1 |
<a class="button1" href="http://www.how-to-make-affiliate-blog.com/" target="_blank">○○の申し込みはこちら→→</a> |
リンクURLや文字は適宜書き換えてください.
これでリンクボタンが完成です.
画像を使ったリンクボタンの作り方
次に画像を使って以下のようなリンクボタンを作成する方法を説明します.
このリンクボタンは1つ目のボタンと動作は同じですが,画像データを使って作成されています.
売れているアフィリエイトサイトを見ていると,このタイプのボタンが主流です.
スタイルシートの設定方法
①WordPressの管理画面から「外観→テーマの編集」を選択し,スタイルシートを表示させます.
②つぎのコードをスタイルシートに貼り付けてください.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* ボタン2作成*/ .button2 { display: block; border: 0px; /*枠線はなし*/ width:300px; /*ボタンの幅*/ height:80px; /*ボタンの高さ*/ background: url(http://www.how-to-make-affiliate-blog.com/wp-content/uploads/2016/12/button2.png) left top no-repeat; /*使用する画像のURL*/ background-size:contain; /*ボタン内に収まるよう画像を縮小*/ } .button2:hover { /*マウスが乗ったときの変化を設定*/ top:1px; left:1px; position:relative; /*場所を少しずらす*/ opacity:0.8; /*透過率を上げて,画像をうすくする*/ text-decoration: none; /*文字の下線をなくす*/ } |
各コードの意味はコメントの通りです.
hover時には画像の透過性を調整することで,薄くしています.
これでスタイルシートの設定は終了です.
次に記事でこのボタンを使用する方法を説明します.
記事中でボタン2を入れる方法
①WordPress管理画面から「投稿一覧→新規追加」を選択し,通常通りに記事を書きます.
②記事のモードを右上のタブから「ビジュアル」から「テキスト」に切り替え,次のhtmlコードを貼り付けます.
1 |
<a class="button2" href="http://www.how-to-make-affiliate-blog.com/" target="_blank"> </a> |
リンクURLや文字は適宜書き換えてください.
これでリンクボタンが完成です.
ここで注意点があります.最後の</a>の前に全角スペースが入っています.
ここで全角スペースが入っていないと,記事を書く画面で「ビジュアルモード」と「テキストモード」を切り替えたときに,勝手にタグが調整されて,リンクボタンが消えてしまいます.
あまりかっこよい対処方法ではないですが,全角スペースを入れる方法が一番手軽なので紹介します.
画像が切り替わるリンクボタンの作り方
次に画像を使って以下のようなリンクボタンを作成する方法を説明します.
このリンクボタンはマウスを乗せると画像が切り替わるようにできています.
スタイルシートの設定方法
①WordPressの管理画面から「外観→テーマの編集」を選択し,スタイルシートを表示させます.
②つぎのコードをスタイルシートに貼り付けてください.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* ボタン3作成*/ a.button3 { display: block; border: 0px; /*枠線はなし*/ width:300px; /*ボタンの幅*/ height:64px; /*ボタンの高さ*/ background: url(http://www.how-to-make-affiliate-blog.com/wp-content/uploads/2016/12/button3henka.png) left top no-repeat; /*使用する画像のURL*/ background-size:cover; /*ボタン内に収まるよう画像を縮小*/ } a.button3:hover { /*マウスが乗ったときの変化を設定*/ top:0px; left:0px; position:relative; /*場所をずらさない*/ background-position: 0 -65px; text-decoration: none; /*文字の下線をなくす*/ } |
各コードの意味はコメントの通りです.
ここで肝なのは,hover時にどう画像を切り替えるかです.
簡単なのはhover時に別の画像を読み込む方法ですが,その方法を使うとhover時に画面がちらついてしまって違和感が出てしまいました.
そのため今回は,2つのボタン画像をくっつけた一つの大きな画像ファイルを使用し,最初は上半分を表示して,hover時に下半分を表示させています.
使っている画像は以下のようになっています.
(注意:画像サイズは少し変わっています)
自分で作成したボタンの画像サイズに合わせて,ボタンサイズや動かす量を調整してください.
これでスタイルシートの設定は終了です.
次に記事でこのボタンを使用する方法を説明します.
記事中で変化する画像ボタンを入れる方法
①WordPress管理画面から「投稿一覧→新規追加」を選択し,通常通りに記事を書きます.
②記事のモードを右上のタブから「ビジュアル」から「テキスト」に切り替え,次のhtmlコードを貼り付けます.
1 |
<a class="button3" href="http://www.how-to-make-affiliate-blog.com/" target="_blank"> </a> |
リンクURLや文字は適宜書き換えてください.
これでリンクボタンが完成です.
以上,3種類のリンクボタンを作成する方法について解説しました.
ご一読いただきありがとうございます.