【シンプル】おしゃれなアフィリエイトリンクを自作したので共有します
こんにちは、りょうです。
カエレバ・もしもリンクが使えなくなったので、おしゃれなアフィリエイトリンクを自作しました。
本記事で紹介するリンクの完成形
かなりシンプルで、使いやすいかなと思ってます。ぶっちゃけ、他のリンク作成サイトのものよりお気に入りです。
ちなみに、プログラミングの知識はゼロなので、よりきれいな並びがあったら、そちらをおすすめします(*´∀｀*)
では、早速作り方を解説していきます。
本記事の目次
【シンプル】おしゃれなアフィリエイトリンクを求めて自作しました
下記の手順です。
- その①：追加CSSにコピペ
- その②：HTMLをコピペ編集
基本的にはコピペで完了します。
その①：追加CSSにコピペ
追加CSSに下記をコピペです。
/*********
アフィリエイト
*********/
.af-box{
width: 90%;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border: 1px solid #d1d1d1;
padding: 10px;
margin: auto;
margin-bottom: 60px;
}
@media screen and (min-width: 810px) {
.af-imgbox{
width: 198px;
margin-right: 1em;
float: left;
}
}
@media screen and (max-width: 800px) {
.af-imgbox{
width: 230px;
margin-right: 1em;
float: left;
}
}
.af-textbox{
width: 100%;
}
.af-title{
font-size: 18px;
color: #444444;
font-weight: bold;
margin-bottom:7px;
text-align: start;
}
.af-price{
font-size: 14px;
color: #4169E1;
text-align: start;
}
.af-desc{
font-size:14px;
margin-bottom: 15px;
text-align: start;
}
.af-kobox{
width: 130px;
margin: 0 5px 0 0;
font-size: 15px;
font-weight: bold;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
float: left;
text-align: center;
}
.af-kobox a.aflink{
display: block;
padding: 5px 0 5px 0;
text-decoration: none;
}
.af-amazon{
border: 1px solid #F3A847;
}
.af-amazon a{
color: #F3A847;
}
.af-amazon a:hover {
color: #ffffff;
background-color: #F3A847;
cursor: pointer;
}
.af-rakuten{
border: 1px solid #FA8072 ;
color: #FA8072 ;
}
.af-rakuten a{
color: #FA8072 ;
}
.af-rakuten a:hover {
color: #ffffff;
background-color: #FA8072 ;
cursor: pointer;
.clear{clear:both;}
@media screen and (max-width: 399px) {
.af-imgbox{
margin: 0 auto;
text-align: center;
float: none;
}
}
} 色やサイズは完全ぼく好みに設定しているので、気になる箇所は、ご自由にカスタムして下さい。
その②：HTMLをコピペ編集
下記の該当する方に、HTMLをコピペします。
・クラシックエディタ → テキストエディタ
・ブロックエディタ → カスタムHTML
・ブロックエディタ → カスタムHTML
<div class="af-box">
<div class="af-imgbox">
*画像*
</div>
<div class="af-textbox">
<div class="af-title">
*タイトル*
</div>
<div class="af-price">
*価格*（Amazon：〇〇時点）
</div>
<div class="af-desc">
*商品の説明*
</div>
<div class="af-kobox af-amazon"><a href="*リンク*" target="_blank" class="aflink" rel="noopener"><center>Amazon</center></a></div>
<div class="af-kobox af-rakuten"><a href="*リンク*" target="_blank" class="aflink" rel="noopener"><center>楽天</center></a></div>
</div><div class="clear"></div>
</div>各所に入力する内容は下記のとおり。
| *画像* | 商品画像のURLを挿入です。Amazonの中サイズ画像を推奨。 |
| *タイトル* | 商品名を入れて下さい。 |
| *価格*（Amazon：〇〇時点） | 価格を入れて下さい。筆者は、Amazon価格を入れています。 |
| *商品の説明* | 商品の説明を入れて下さい。 |
| *リンク* | Amazonアソシエイト、楽天アフィリのリンクを挿入です。 |
カエレバやもしもリンクより、多少の手間がかかります。が、オリジナルリンクが作れるので、サイトデザインには合わせやすいかと。
補足1：画像のサイズによって、モバイル表示が変わります
すみません。ぼくは、プログラミング知識がゼロなので、難しい指示はできません。
本記事で紹介したCSSだと、画像にその他文字を沿わせる指示をしています。ので、画像サイズが小さいとモバイル表示が気に入らないかもです。
画像サイズを大きくすると、いい感じにバランスがとれるので、ご了承下さい🙇
補足2：商品の説明は少なめで
あと、商品の説明は長すぎるとボタンが画像の下に表示されてしまいます。
必要最低限の説明のみ挿入すると、デザインが整いますので、ご了承下さい。
では、今回は以上です。
人気記事【感謝】仮想通貨・NFTブログ図鑑｜74人のURL掲載【超有益です】