こんにちは、情報系大学生のハル（Blog_IT_haru）です。
今回は、カエレバのように、アフィリエイトをまとめて表示するHTMLとCSSを作ってみたので、それについて紹介します。
はてなブログ無料版でもできますので、参考にしてください！
もちろん、WordPressでもできますが、Amazon,楽天,Yahooしか載せないといった方は、WordPressで簡単にアフィリエイトリンクを設置できるRinkerなどのプラグインがあるので、そちらを使われたほうが、簡単だと思います。
なぜ作ったのか？
もしもアフィリエイトのかんたんリンクや、バリューコマースのMyLink、カエレバで十分じゃないの？
そういうふうに思うよね？
でも、少し物足りないと感じることが多くあったんだ。
それは以下の点だよ。
・カエレバだと、powerd by カエレバというふうに表示される。
・もしもかんたんリンクだと、もしもアフィリエイトである広告しか簡単には作れない。
このサイトははてなブログなので、それも関係しているよ。
WordPressで使えるRinkerなどは使えないからね。
なるほど！そうなんだね。
じゃあ早速そのHTMLとCSSを教えて！
次の見出しになるよ。
HTMLとCSSのコード
以下のコードはコピペ可です。
ぜひ自由に使ってくださいね。
使い方
**リンク**となっているところにそれぞれのサイトのアフィリエイトリンクを入れるだけ！
対応しているサイト
Amazon,Kindle,楽天,楽天Kobo,Yahooショッピング,セブンネット,honto,紀伊国屋書店,ebookjapan
CSSとHTMLを少し変えるだけで、新しいサイトにもご自身で対応いただけます。
See the Pen 商品リンク共有用 by Haru@FUN (@blog_it_haru) on CodePen.
参考にしたサイト
以上のコードを作るにあたって、以下のサイトのコードを参考にさせていただきました！
デザインは、RoughLogさんのを参考にしました！
HTMLは、イズクルさんのコードのclassを元に、カエレバのHTMLコードも参考にしました！
CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2] | RoughLog
収益増加！カエレバより綺麗なアフィリエイトリンクをコピペで設定 | イズクル
https://kaereba.com/temp/template2.txt | カエレバ
まとめ
いかがでしたか？
カエレバやもしもかんたんリンクではなく、HTMLとCSSでアフィリエイトリンクを簡単に設置できる方法をまとめました。
HTMLやCSSの初心者の方は、書籍で基本をおさえておきましょう！
この記事がいいな、と思ってくれたら、SNSなどで拡散したり、
ブックマークやコメントなどしてくれると励みになります！
下の方とサイドバーにある、サポートもお待ちしています！
更に、読者になってくれたら、お返しに私も読者になります！
また、この記事の内容についてなにかありましたら、
お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。
それでは。
