まいどおおきに！コクーンの無料カスタム相談をしています。おおもと(@so88qa)です
この記事は、ワードプレス無料テーマCocoon(コクーン)の商品リンクをかっこよくカスタマイズする記事です。
文字で書いても分かりにくいので、画像で変更内容の確認をしてください。
変更箇所は
- 商品リンクの枠を2重線に変更+影をつける
- 商品名の文字色を黒に変更+リンクの下線を消す+左詰め
- 商店名と価格を中央+文字の大きさを調整
- スマホ表示時の画像を中央+ボタンを縦配置+ボタンを横幅を広げる
の４点です。
気になる人はこの記事を読んでコクーンのカスタマイズの参考にしてくださいね♪
もくじ
商品リンクの枠を2重線に変更+影をつける
/*アイテムボックスの枠を変更*/
.product-item-box{
border: 4px double #dfdfdf;/*枠線を灰色の２重線にする*/
box-shadow: 0 1px 2px rgba(0,0,0,.29);/*枠線に薄い影をつける*/
}デザインは、最近ガジェットを売りまくっているマクリン(@Maku_ring )さんの物を参考にしました。
今回参考にした商品リンクで売りまくっているらしい・・・・
商品名の文字色を黒に変更+リンクの下線を消す+左詰
/*商品名を調整*/
.product-item-title{
text-align:left;/*商品名を左詰め*/
font-size:95%;/*文字の大きさを調整*/
padding: 1rem;/*文字を表示位置を調整*/
}
/*商品名リンクを調整*/
.product-item-title-link{
color:#555;/*商品リンクの文字色を変更*/
text-decoration:none;/*商品リンクの下線を消す*/
font-weight:bold;/*商品名を太字に変更*/
}コクーンの商品リンクは「モバイル表示が中央寄せ」なので文字の折り返しがブサイクです。
そこで
- 左詰め・黒字にして違和感をなくす
- 文字を太くして強調させる
をしています。
商店名と価格を中央+文字の大きさを調整
/*商店名を調整*/
.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表示で左詰め」なので、目立たせたい商品名と一つの文章になってメリハリがない。
そこで
- 文章を中央寄せ・文字を細くすることでメリハリをつける
- 価格を赤字→黒字にして、目立たせない
をしています。
スマホ表示時の画像を中央+ボタンを縦配置+ボタンを横幅を広げる
/*ボタンのはみ出し部分を非表示*/
#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の表示⤵︎
コンパクトデザインでいいとは思いますが、個人的にキライなので、このコードで元に戻します。
カスタマイズ後⤵︎
元の表示に戻すことで
- 商品リンクが縦に長く表示され目立つ
- ボタンが横幅いっぱいに広がっているので、押しやすい
という利点があります。
コクーンカスタマイズのまとめ
この記事は、コクーンの商品リンクの見た目のカスタマイズ記事でした。
色々な、売れているブログを見て回って「デザインが似るようにカスタマイズ」をしました。
ぜひ、参考にしてください！
おおもとさん
スーパーキャッシュやってみましたが駄目でした。^-^;
Cocoonやプラグインのキャッシュ削除ではタイトルリンク色反映と
リンク下線消しがだめでしたが、他はOKでした。
おそらく別プラグインなどが影響しているのかもしれません。
ひとまず理想の形になりましたのでお礼申し上げます。