\ Advertisements/

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

Cocoon
この記事は約8分で読めます。

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

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

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

PC変更前

PC変更後

スマホ変更前

スマホ変更後

変更箇所は

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

の4点です。

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

【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
コクーンカスタマイズ|コピペで簡単クリックを促すボタンの作り方!
ワードプレス無料テーマCocoon(コクーン)のボタンをカスタマイズする記事です。他のブログではあまり見ない動きを作って見たのでぜひ見て、コピペしてくださいね。

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

【デザインの参考書】

\ Advertisements/

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

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

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

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

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

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

\ Advertisements/

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

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

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

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

そこで

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

をしています。

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

\ Advertisements/

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

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

そこで、

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

をしています。

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

\ Advertisements/

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

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

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

カスタマイズ後⤵︎

元の表示に戻すことで、

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

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

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

\ Advertisements/

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

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

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

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

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

【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
コクーンカスタマイズ|コピペで簡単クリックを促すボタンの作り方!
ワードプレス無料テーマCocoon(コクーン)のボタンをカスタマイズする記事です。他のブログではあまり見ない動きを作って見たのでぜひ見て、コピペしてくださいね。

以上です!じゃあまた!

【デザインの参考書】

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

おおもと
おおもと

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

  1. おおもとさん

    スーパーキャッシュやってみましたが駄目でした。^-^;
    Cocoonやプラグインのキャッシュ削除ではタイトルリンク色反映と
    リンク下線消しがだめでしたが、他はOKでした。
    おそらく別プラグインなどが影響しているのかもしれません。

    ひとまず理想の形になりましたのでお礼申し上げます。

  2. おおもとさん

    スーパーキャッシュやってみましたが駄目でした。^-^;
    Cocoonやプラグインのキャッシュ削除ではタイトルリンク色反映と
    リンク下線消しがだめでしたが、他はOKでした。
    おそらく別プラグインなどが影響しているのかもしれません。

    ひとまず理想の形になりましたのでお礼申し上げます。

  3. おおもとさん

    記事ありがとうございます!テーマアップデートでカスタマイズがうまく表示されなくなってしまったので助かりました。モバイル縦表示の戻せてよかったです。

    1点だけご質問があります。
    商品タイトルの色とリンクです。

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

    色が置き換わらず、リンクの下線も表示されたままになってしまいます。キャッシュクリアしたのですが他に原因考えられるでしょうか?

    • お力になれてよかったです(^-^)

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

      の部分ですが、ボクのPCではちゃんと変わるんですよね〜

      考えられる原因は、他に書いているCSSコードの影響・キャッシュの影響ですね、

      CSSコードの影響はまずないと思うので、キャッシュの影響が強いと思います。(サーバー・プラグイン・テーマのキャッシュがのこているのかも・・・)

      時間を置いて、もう一度確認するかこの記事にあるリロードを試して見るといいですよ!

      http://www.netyasun.com/browser/reload.html

タイトルとURLをコピーしました