旅行系のブログも運営しており、ホテルを紹介するためのオリジナルのアフィリエイトリンクが欲しくなり、CSSで自作してみました。
CSSコードやHTMLコードも公開していますので、参考にしてもらえればと思います。
仕上がりはこんな感じになります。
PC版
スマホ版
デザインについて
デザインは、もしもかんたんリンクのボタンカスタマイズを紹介した以下の記事と同じように、mybestというサイトを参考におしゃれな色に仕上げています。
参考【コピペOK】mybestっぽいもしもかんたんリンクをCSSで作成する方法！
「緑色のリンクボタンはクリック率が高い」と言われており（諸説あります）、大手のサイトも緑色を取り入れていることがあります。
まだまだデザインを勉強中の私は、そういった背景からこの色を意識的に取り入れています。
旅行・ホテル紹介リンクの作り方
私の紹介する旅行・ホテル紹介リンクの作成手順は以下の通りです。
CSSをコピー
CSSをstyle.cssにペースト
htmlコードをブログ記事にペースト
リンク作成・ボタン情報入力
順に解説していきます。
CSSをコピー
以下のCSSをすべてコピーします。
/***box-link-btns***/
/*参考リンク： https://zaco-engineers.com/2022/05/29/travel-box-link-btns/*/
.box-link-btns {
width:100%;border: 1px solid rgba(0, 0, 0, 0.1);
padding:10px;box-sizing:border-box;}
.box-link-btns__imgpart {
text-align:center;width:100%;}
.box-link-btns__btns {
width:100%;margin-top:1em;text-align:left;}
.box-link-btns__btns .btn._1 {
width:100%;padding:0.8em 0;padding-left:0;padding-right:0;}
/*button*/
/*コピーして.btn._2などを作ることで、複数色のリンクを作ることも可能*/
.btn._1 {border-radius:0.5rem;border:0;color:#fff;
cursor:pointer;display:inline-block;font-size:1.0em;
font-weight:bold;line-height:1;padding:8px 3px 8px 3px;
transition:background-color 150ms ease;vertical-align:middle;
background-color:#02bb80;margin-bottom:10px;/*ボタン色 距離*/
box-shadow: 0px 5px 0 #01a873;/*ボタン影 サイズ 色*/
transition: 0.2s all ease 0s;
overflow: hidden;
}
/*mobile*/
@media screen and (max-width:480px) {
.box-link-btns {display: table;width:100%;font-size:1.1em;}
.box-link-btns__imgpart img{margin-top:5px;margin-bottom:5px;width:70%;}/*画像の位置とサイズ*/
.box-link-btns__btns.__one > div{width:85%;margin-left:auto;margin-right:auto;}
}
/*PC*/
@media screen and (min-width: 480px) {
.box-link-btns {display: table;width:100%;}
.box-link-btns__imgpart {display:table-cell;width:30%;}
.box-link-btns__imgpart img{margin-top:40px;margin-bottom:40px;}
.box-link-btns__infopart {display:table-cell;vertical-align:top;
position:relative;padding-left:20px;width:77%;}
.box-link-btns__btns > div {float:center;margin-bottom:5px;}
.box-link-btns__btns {position: relative;bottom:0;box-sizing:
border-box;padding-right:10px;}
.box-link-btns__btns.__one > div{width:85%;margin-left:auto;margin-right:auto;}
}
/***box-link-btns***/コメントにも記載してありますが、以下の部分を複製して『.btn._2』など作成してもらえれば、色の違うもたんが作成できます。
それらを組み合わせて複数色のリンクボタンにすることもできます。
.btn._1 {border-radius:0.5rem;border:0;color:#fff;
cursor:pointer;display:inline-block;font-size:1.0em;
font-weight:bold;line-height:1;padding:8px 3px 8px 3px;
transition:background-color 150ms ease;vertical-align:middle;
background-color:#02bb80;margin-bottom:10px;/*ボタン色 距離*/
box-shadow: 0px 5px 0 #01a873;/*ボタン影 サイズ 色*/
transition: 0.2s all ease 0s;
overflow: hidden;
}CSSをstyle.cssにペースト
上の画像を参考に、コピーしたCSSをstyle.cssまたは追加CSSにペーストします。
手順は以下の通りです。
(画面はブログテーマcocoonを使っている場合の例です。)
外観をクリック
テーマエディタファイルをクリック
style.cssを選択
エディタに先ほどコピーしたCSSをペースト
ファイルを更新する
これで、ボタンデザインは終了です。
htmlコードをブログ記事にペースト
以下のコードコピーしてをブログ記事の挿入したいところに、htmlコードとしてペーストします。
<div class="box-link-btns">
<div class="box-link-btns__imgpart"><a href="【メインURL入力】" rel="sponsored"><img src="【画像URL入力】" /></a></div>
<div class="box-link-btns__infopart">
<div class="box-link-btns__title"><a href="【メインURL入力】" rel="sponsored">【タイトル入力】</a></div>
<div class="box-link-btns__description">【住所入力】
<a href="【地図URL入力】" rel="sponsored">【地図】</a></div>
<div class="box-link-btns__btns __one">
<div><a class="btn _1" href="【楽天トラベルURL入力】" rel="sponsored">楽天トラベルで見る</a></div>
<div><a class="btn _1" href="【Yahoo!トラベルURL入力】" rel="sponsored">Yahoo!トラベルで見る</a></div>
<div><a class="btn _1" href="【じゃらんURL入力】" rel="sponsored">じゃらんで見る</a></div>
</div>
</div>
</div>リンク作成・ボタン情報入力
アフィリエイトリンクを作成して、先ほどペーストしたhtmlコードの中にURLを挿入していきます。
何をどこに入れればいいかは簡単に分かると思います。
その他にも地図や住所、タイトルといった情報を入力していきます。
また、いらない情報は消してもらっても使えます。
ボタンの数も増やしたり減らしたり自由にしてもらって構いません。
現状では基本的に『楽天トラベル』、『Yahoo！トラベル』、『じゃらん』の3つを用意しておけば問題ないかと思います。
ちなみに私は、楽天トラベルは『もしもアフィリエイト』で、Yahoo！トラベルとじゃらんは『バリューコマース』でアフィリエイトリンクを作成しています。
ここまで来たら完成です。
仕上がりはこんな感じ
ページの初めでも載せましたが、仕上がりはこんな感じになりました。
PC版
スマホ版
なかなかいい出来栄えなのではないでしょうか。
自分の好みにアレンジして使えるようにしてあるので、好きに使ってみてください！
ちなみに私の最新リンクは以下のサイトで使っているので、興味のある方は確認してみてください。
自由にアレンジを
上述していますが、このアフィリエイトボタンは自由にアレンジすることができます。
今回は旅行・ホテルのリンクとして使いましたが、リンクと情報を書き換えるだけで、ネットショッピングや飲食店の紹介にも使えます。
またどのようにすればいいかの記事もアップ予定ですので、興味のある方は参考にしていただけると幸いです。
その他参考になるサイト・関連の記事
もしもアフィリエイトのかんたんリンクのデザインを紹介したページ
CSSを作成する上で参考にさせていただいたページ
デザインの参考にしたページ
コメント