【コピペOK!】旅行・ホテル紹介用アフィリエイトリンクをCSSで作成する方法!カエレバ・トマレバをアレンジしたい方必見!

【コピペOK!】旅行・ホテル紹介用アフィリエイトリンクをCSSで作成する方法!カエレバ・トマレバをアレンジしたい方必見! ウェブ開発

旅行系のブログも運営しており、ホテルを紹介するためのオリジナルのアフィリエイトリンクが欲しくなり、CSSで自作してみました。

CSSコードやHTMLコードも公開していますので、参考にしてもらえればと思います。

仕上がりはこんな感じになります。

PC版

スマホ版

ホテル紹介アフィリエイトリンクCSS スマホ版

スポンサーリンク

デザインについて

デザインは、もしもかんたんリンクのボタンカスタマイズを紹介した以下の記事と同じように、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の更新方法

上の画像を参考に、コピーした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 PC版

スマホ版

ホテル紹介アフィリエイトリンクCSS スマホ版

なかなかいい出来栄えなのではないでしょうか。

自分の好みにアレンジして使えるようにしてあるので、好きに使ってみてください!

ちなみに私の最新リンクは以下のサイトで使っているので、興味のある方は確認してみてください。

スポンサーリンク

自由にアレンジを

上述していますが、このアフィリエイトボタンは自由にアレンジすることができます。

今回は旅行・ホテルのリンクとして使いましたが、リンクと情報を書き換えるだけで、ネットショッピングや飲食店の紹介にも使えます。

またどのようにすればいいかの記事もアップ予定ですので、興味のある方は参考にしていただけると幸いです。

スポンサーリンク

その他参考になるサイト・関連の記事

もしもアフィリエイトのかんたんリンクのデザインを紹介したページ

【コピペOK】mybestっぽいもしもかんたんリンクをCSSで作成する方法!【ブログデザイン】
mybestというサイトのボタンが素敵だったので、mybest風のもしもアフィリエイトかんたんリンクを作成しました。 仕上がりはこんな感じ。 PC版 スマホ版 この記事の通りにするだけで、このデザイン...

CSSを作成する上で参考にさせていただいたページ

Amazon/楽天/トラベルのアフィリエイトリンクをCSS+HTMLで作成

デザインの参考にしたページ

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ|WebFood
カエレバやヨメレバは、1商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。ですが、評判の割に、実際に使ってみると結構難しい。なので、もっと簡単に使えるカッテネというものを作りました。カッテネとは?こんな感じのものです。カエレバやヨメレバのように、一つの商品に

コメント

タイトルとURLをコピーしました