コクーンの商品リンクをかっこよくカスタマイズして収益をあげよう！

Webコピーライティングの新常識ザ・マイクロコピー [ 山本琢磨 ]

楽天ブックス

【おすすめ】Ankerのモバイルバッテリーで今すぐ買うべき11モデル！

クリックできる目次

商品リンクの枠を2重線に変更+影をつける
商品名の文字色を黒に変更+リンクの下線を消す+左詰
商店名と価格を中央+文字の大きさを調整
スマホ表示時の画像を中央+ボタンを縦配置+ボタンを横幅を広げる
コクーンカスタマイズのまとめ

商品リンクの枠を2重線に変更+影をつける

/*アイテムボックスの枠を変更*/
.product-item-box{
  border: 4px double #dfdfdf;/*枠線を灰色の２重線にする*/
  box-shadow: 0 1px 2px rgba(0,0,0,.29);/*枠線に薄い影をつける*/
}

デザインは、最近ガジェットを売りまくっているマクリン(@Maku_ring ‏ )さんの物を参考にしました。

Anker（アンカー）のモバイルバッテリーは、バッテリー容量・USBポート・サイズ・重さで、さまざまな種類があります。当ブログ【マクリン】では、今も愛用している「Ankerのおすすめモバイルバッテリー」にしぼってご紹介します。

皆さま！
昨日のレビュー依頼の結果、予想を上回るご回答をいただきました((((；ﾟДﾟ)))))))
今までブログ書いてきて良かったなぁと感激した😭
自分が魂込めて書ける製品のメーカーと心が通じ合うって、控えめにいって最高ですね(^q^)
みんなも機が熟したら、ぜひチャレンジしてみよう٩( ‘ω’ )و pic.twitter.com/w1APXq41hu
— マクリン (@Maku_ring) 2018年8月30日

今回参考にした商品リンクで売りまくっているらしい・・・・

【ブログで稼ぐための参考書】

アフィリエイトで夢を叶えた元OLブロガーが教える本気で稼げるアフィリエイトブログ収益・集客が1.5倍UPするプロの技79

ソーテック社

商品名の文字色を黒に変更+リンクの下線を消す+左詰

/*商品名を調整*/
.product-item-title{
  text-align:left;/*商品名を左詰め*/
  font-size:95%;/*文字の大きさを調整*/
  padding: 1rem;/*文字を表示位置を調整*/
}

/*商品名リンクを調整*/
.product-item-title-link{
  color:#555;/*商品リンクの文字色を変更*/
  text-decoration:none;/*商品リンクの下線を消す*/
  font-weight:bold;/*商品名を太字に変更*/
}

コクーンの商品リンクは「モバイル表示が中央寄せ」なので文字の折り返しがブサイクです。

そこで

左詰め・黒字にして違和感をなくす
文字を太くして強調させる

をしています。

【ブログで稼ぐための参考書】

元Google AdSense担当が教える本当に稼げるGoogle AdSense 収益・集客が1.5倍UPするプロの技60

ソーテック社

商店名と価格を中央+文字の大きさを調整

/*商店名を調整*/
.product-item-maker{
  text-align:center;/*商店名を中央寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
  margin:.5em;/*文字位置の調整*/
}

/*価格文章を調整*/
.product-item-price{
  text-align:center;/*価格文書を中央寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
  margin-top:-.5em;/*価格文章を表示した時の文字位置の調整*/
  margin-bottom:.5em;/*価格文章を表示した時の文字位置の調整*/
}

/*価格の色を黒に*/
.item-price{
  color:#555;/*金額を黒字に変更*/
}

コクーンの商店名と価格は「PC表示で左詰め」なので、目立たせたい商品名と一つの文章になってメリハリがない。

そこで、

文章を中央寄せ・文字を細くすることでメリハリをつける
価格を赤字→黒字にして、目立たせない

をしています。

【ブログで稼ぐための参考書】

沈黙のWebライティング —Webマーケッターボーンの激闘—〈SEOのためのライティング教本〉

エムディエヌコーポレーション

スマホ表示時の画像を中央+ボタンを縦配置+ボタンを横幅を広げる

/*ボタンのはみ出し部分を非表示*/
#main{
  overflow:hidden;
}

/*ipad以下の大きさのデザインを調整*/
@media screen and (max-width: 768px){/*ipad以下の大きさのデザインを調整*/
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
  width: 100%;/*商品画像を中央寄せ*/
} 
.booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content {
  margin-top: 8em;/*商品名以下の文章を画像の下に下げる*/
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons {
  display: flex;/*ボタンをフレックスボックス化*/
  flex-flow: column;/*ボタン縦並びに変更*/
  justify-content: space-between;/*ボタンを均等配置*/
  width:300%;/*ボタンの長さを調整*/
}
.booklink-link2>*>a, .kaerebalink-link1>*>a, .tomarebalink-link1>*>a, .product-item-buttons>*>a{
  font-size:85%;/*文字の大きさを調整*/
  padding: .8em;/*ボタンの大きさを調整*/
    }
}

/*iPhone5Sぐらいの大きさのデザインの調整*/
@media screen and (max-width: 480px){
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
  width: 100%;/*商品画像の大きさの調整*/
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons {
  width:200%;/*ボタンの長さを調整*/
}
}

Cocoon(コクーン)のアップデート（Cocoon1.1.7）でスマホの表示が変わってしまいました。

Cocoon1.1.7の表示⤵︎

コンパクトデザインでいいとは思いますが、個人的にキライなので、このコードで元に戻します。

カスタマイズ後⤵︎

元の表示に戻すことで、

商品リンクが縦に長く表示され目立つ
ボタンが横幅いっぱいに広がっているので、押しやすい

という、利点があります。

【ブログで稼ぐための参考書】

すばる舎

コクーンカスタマイズのまとめ

この記事は、コクーンの商品リンクの見た目のカスタマイズ記事でした。

色々な、売れているブログを見て回って「デザインが似るようにカスタマイズ」をしました。

ぜひ、参考にしてください！

【コクーンのカスタマイズ記事】

【CSSカスタマイズ】コクーンで使えるＣＳＳを追加するオススメの方法

コクーンカスタマイズ｜コピペで簡単クリックを促すボタンの作り方！

以上です！じゃあまた！

【デザインの参考書】

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

SBクリエイティブ

Webコピーライティングの新常識ザ・マイクロコピー [ 山本琢磨 ]

楽天ブックス

アフィリエイトで夢を叶えた元OLブロガーが教える本気で稼げるアフィリエイトブログ収益・集客が1.5倍UPするプロの技79

【ブログで稼ぐための参考書】

ソーテック社

元Google AdSense担当が教える本当に稼げるGoogle AdSense 収益・集客が1.5倍UPするプロの技60

ソーテック社