【コピペ可能】「カエレバ」、「Rinker」のようなアフィリエイト用商品リンクボックスを作ろう!【はてなカスタマイズ】
ブログが移転しました。自動的にリダイレクトします
4月25日更新:レスポンシブデザインに対応させました!
アフィリエイトブログを運営する場合にほぼ必須となるものが、商品リンクを貼るボックス的なものですよね。言葉じゃわからないので、実際のものを。
下の画像は「rinker」というWordPress用の商品リンク管理プラグインを使って使ったものです。(rinker公式のページから引用)
こんなものを作りたいと思います。
で、出来上がったものが、これ。↓
どうですかね。だいぶ似せることができたかと思います。あ、これはリンクを挿入してないですが、もちろん挿入できます。ではコードを紹介します。
<div class="affiliate-link-box"> <a href="画像に対するリンクを挿入" target="_blank"><img src="画像のurlを挿入" title="画像タイトルを記入"></a> <div class="affiliate-box-information"> <a href="商品名に対するリンクを挿入" target="_blank"><p class="product-name">商品名を記入</p></a> <p class="maker-name">メーカー名を記入</p> <div class="affiliate-link-buttons"> <div class="affiliate-button-amazon"><a href="amazonでのリンクを挿入" target="_blank">Amazon</a></div> <div class="affiliate-button-rakuten"><a href="楽天市場でのリンクを挿入" target="_blank">楽天市場</a></div> <div class="affiliate-button-yahoo"><a href="Yahooショッピングでのリンクを挿入" target="_blank">Yahooショッピング</a></div> </div> </div> </div>
/* アフィリエイト用ボックスCSS開始 */ .affiliate-link-box { border: rgb(218, 218, 218) solid 1px; display: flex; flex-direction: row; } .affiliate-link-box a { text-decoration: none; } .affiliate-link-box img { margin: 10px 25px; height: 160px; width: 160px; } .affiliate-box-information { margin-right: 10px; } .product-name { font-size: 20px; margin-bottom: 0; color: black; } .maker-name { font-size: 11px; margin-top: 3px; color: rgb(128, 128, 128); } .affiliate-link-buttons { display: flex; flex-direction: row; margin-top: 15px; margin-left: 5px; } .affiliate-link-buttons div { padding: 3px 10px; border-radius: 3px; margin-right: 10px; box-shadow: 1px 1px 5px rgb(167, 167, 167); font-size: 13px; } .affiliate-link-buttons a { color: white; } .affiliate-link-buttons div:hover { transform: scale(1.1, 1.1); } .affiliate-button-amazon { background-color: #FF9900; } .affiliate-button-rakuten { background-color: #B31E23; } .affiliate-button-yahoo { background-color: #FF0033; } /* レスポンシブ */ @media screen and (max-width: 750px) { .affiliate-link-box{ width: 95%; display: flex; flex-direction: column; margin: 0; } .affiliate-link-box img{ width: 80%; height: auto; margin: auto; } .product-name,.maker-name{ margin: auto 5px; } .product-name{ line-height: 22px; } .affiliate-link-buttons{ display: flex; flex-direction: column; margin: 0; margin-bottom: 8px; } .affiliate-link-buttons div{ width: 83%; margin: 5px auto; } .affiliate-box-information{ width: 100%; margin: 0; } } /* アフィリエイト用ボックスCSS終了 */
htmlは画像やアフィリエイト用のリンクをコード内で指示されているように挿入します。そして使用したい場所にhtmlで書き込んでください。
使用する写真のサイズは一辺が160pxの正方形に編集したものurlを貼ってください。
cssは記事内に上記のcssをstyleタグで囲って貼ってもいいのですが、「デザイン→カスタマイズ」から「デザインcss」の部分に貼り付けると一番良いと思います。
これははてなブログ以外でもhtmlとcssを使用できるのであれば、使うことが可能です。貼り方は、各自調べるなりしてください。
あとできる方はご自由にhtmlやcssをイジってカスタマイズしてもOKです!