まいどおおきに！コクーンの無料カスタム相談をしています。おおもと(@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の表示⤵︎
コンパクトデザインでいいとは思いますが、個人的にキライなので、このコードで元に戻します。
カスタマイズ後⤵︎
元の表示に戻すことで
- 商品リンクが縦に長く表示され目立つ
- ボタンが横幅いっぱいに広がっているので、押しやすい
という利点があります。
コクーンカスタマイズのまとめ
この記事は、コクーンの商品リンクの見た目のカスタマイズ記事でした。
色々な、売れているブログを見て回って「デザインが似るようにカスタマイズ」をしました。
ぜひ、参考にしてください！
コメント一覧 （4件）
おおもとさん
スーパーキャッシュやってみましたが駄目でした。^-^;
Cocoonやプラグインのキャッシュ削除ではタイトルリンク色反映と
リンク下線消しがだめでしたが、他はOKでした。
おそらく別プラグインなどが影響しているのかもしれません。
ひとまず理想の形になりましたのでお礼申し上げます。
おおもとさん
スーパーキャッシュやってみましたが駄目でした。^-^;
Cocoonやプラグインのキャッシュ削除ではタイトルリンク色反映と
リンク下線消しがだめでしたが、他はOKでした。
おそらく別プラグインなどが影響しているのかもしれません。
ひとまず理想の形になりましたのでお礼申し上げます。
おおもとさん
記事ありがとうございます！テーマアップデートでカスタマイズがうまく表示されなくなってしまったので助かりました。モバイル縦表示の戻せてよかったです。
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