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

まいどおおきに！コクーンの無料カスタム相談をしています。おおもと(@so88qa)です

この記事は、ワードプレス無料テーマCocoon(コクーン)の商品リンクをかっこよくカスタマイズする記事です。

文字で書いても分かりにくいので、画像で変更内容の確認をしてください。

PC変更前

PC変更後

スマホ変更前

スマホ変更後

変更箇所は

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

の４点です。

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

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

有料級のワードプレス無料テーマCoccon（コクーン）のCSSカスタマイズ記事のまとめと、ＣＳＳを追加する方法を記載した記事です。古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。

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

ワードプレス無料テーマCocoon（コクーン）のボタンをカスタマイズする記事です。他のブログではあまり見ない動きを作って見たのでぜひ見て、コピペしてくださいね。

この記事を読んで、コクーンのカスタマイズの参考にしてくださいね！

【デザインの参考書】

Amazonで詳細を見る

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

楽天ブックス

￥ 1,944（2019/04/24 00:07時点）

Amazonをみる

楽天市場をみる

Yahoo!ショッピングをみる

Contents

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

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

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

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

Anker（アンカー）は品質が優れているだけでなく、機能の向上も抜かりなく、かつデザインも男子の琴線に触れる無骨な仕上がりと、まさに無敵のガジェットメーカーです。当ブログ【マクリン】では数あるAnkerのモバイルバッテリー・USB充電器・ワイヤレスイヤホン・プロジェクターでも、迷わず購入をおすすめする商品にしぼって紹介

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

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

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

Amazonで詳細を見る

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

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

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

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

そこで

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

をしています。

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

Amazonで詳細を見る

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

/*商店名を調整*/
.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表示で左詰め」なので、目立たせたい商品名と一つの文章になってメリハリがない。

そこで、

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

をしています。

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

Amazonで詳細を見る

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

/*ボタンのはみ出し部分を非表示*/
#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の表示⤵︎

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

カスタマイズ後⤵︎

元の表示に戻すことで、

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

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

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

Amazonで詳細を見る

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

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

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

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

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

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

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

以上です！じゃあまた！

【デザインの参考書】

Amazonで詳細を見る

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

楽天ブックス

￥ 1,944（2019/04/24 00:07時点）

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

おおもと

質問などがあれば、コメント覧に書き込んでくださいね！

Comment

名前:さかたん :投稿日：2018/09/01(土) 15:11:26 ID：E4Mzc1ODQ
おおもとさん
スーパーキャッシュやってみましたが駄目でした。^-^;
Cocoonやプラグインのキャッシュ削除ではタイトルリンク色反映と
リンク下線消しがだめでしたが、他はOKでした。
おそらく別プラグインなどが影響しているのかもしれません。
ひとまず理想の形になりましたのでお礼申し上げます。
返信
名前:さかたん :投稿日：2018/09/01(土) 15:10:32 ID：E4Mzc1ODQ
おおもとさん
スーパーキャッシュやってみましたが駄目でした。^-^;
Cocoonやプラグインのキャッシュ削除ではタイトルリンク色反映と
リンク下線消しがだめでしたが、他はOKでした。
おそらく別プラグインなどが影響しているのかもしれません。
ひとまず理想の形になりましたのでお礼申し上げます。
返信
名前:さかたん :投稿日：2018/08/31(金) 22:18:21 ID：c5NTkxMjc
おおもとさん
記事ありがとうございます！テーマアップデートでカスタマイズがうまく表示されなくなってしまったので助かりました。モバイル縦表示の戻せてよかったです。
1点だけご質問があります。
商品タイトルの色とリンクです。
/商品名リンクを調整/
.product-item-title-link{
color:#555;/商品リンクの文字色を変更/
text-decoration:none;/商品リンクの下線を消す/
font-weight:bold;/商品名を太字に変更/
}
色が置き換わらず、リンクの下線も表示されたままになってしまいます。キャッシュクリアしたのですが他に原因考えられるでしょうか？
返信

名前:おおもと＠滋賀ブロガー :投稿日：2018/08/31(金) 22:34:59 ID：Y3NTg4Mzc
お力になれてよかったです(^-^)
/商品名リンクを調整/ .product-item-title-link{ color:#555;/商品リンクの文字色を変更/ text-decoration:none;/商品リンクの下線を消す/ font-weight:bold;/商品名を太字に変更/ }
の部分ですが、ボクのPCではちゃんと変わるんですよね〜
考えられる原因は、他に書いているCSSコードの影響・キャッシュの影響ですね、
CSSコードの影響はまずないと思うので、キャッシュの影響が強いと思います。（サーバー・プラグイン・テーマのキャッシュがのこているのかも・・・）
時間を置いて、もう一度確認するかこの記事にあるリロードを試して見るといいですよ！
http://www.netyasun.com/browser/reload.html
返信