【SANGO】カエレバのデザインを見やすくするカスタマイズ

SANGOのカエレバのデザインをカスタマイズするCSS

TAGS:

SANGOのカエレバのデフォルトのデザインCSSだと、商品画像が小さいので見にくいと思ったので、CSSを追記したカスタマイズしました。

あわせて、ボタン幅の変更と、ウィンドウサイズによってボタンから文字がはみ出る現象を解決しています。

カスタマイズ(PC)

カエレバのデザインのカスタマイズ(PC)

カスタマイズ(スマホ)

カエレバのデザインのカスタマイズ(スマホ)

今回はCSSの追記のみです。

これでCVアップするだろ。ふふふ。

SANGOのカエレバのデザインをカスタマイズするCSS

カスタマイズした内容は、

  • 商品画像の大きさを変更
  • PC時のボタンを横幅いっぱい
  • スマホ時の表示を縦に並べて横幅いっぱいに
  • ウィンドウサイズによって文字がはみ出る現象を修正

がメインとなっています。

スマホ時の表示もこっちの方がCVが良いみたい。

注意
CSSのみの変更なので、大丈夫だとは思いますが、カスタマイズは、自己責任でお願いします。

追記するCSS

下記のCSSを子テーマのstyle.cssに追記してください。

コード
/*--------------------------------------
  カエレバのカスタマイズ
--------------------------------------*/
.cstmreba .kaerebalink-link1 > div, .booklink-link2 > div {
	height: auto;
}
	.cstmreba .kaerebalink-link1 > div, .booklink-link2 > div {
		width: 100%;
		text-align: center;
	}
	.cstmreba .kaerebalink-link1 > div a, .cstmreba .booklink-link2 > div a {
		width: 100%;
		position: relative;
	}

@media only screen and (min-width: 481px){
	.cstmreba .kaerebalink-image {
		width: 200px;
	}
	
}
@media only screen and (max-width: 481px){
	.cstmreba .kaerebalink-image {
		display: block;
		margin: 0 auto 20px;
		width: 100%;
		text-align: center;
	}
	.cstmreba .kaerebalink-image a img {
		width: auto;
		max-width: 240px;
		max-height: 240px;
	}
	.cstmreba .kaerebalink-info {
		display: block;
		width: 100%;
	}
	.cstmreba .kaerebalink-link1 a:before, .booklink-link2 > div a:before {
		padding: 0;
		right: 5px;
		position: absolute;
	}
}

キャッシュをクリアする

最後に、キャッシュをクリアして今回の編集内容を確認してみてください。

変更が反映されていない場合は、ブラウザを再起動したり、既にCSSでカエレバのデザインに変更を加えていないかなど、確認してください。

スーパーリロードをしてもいいですが、こちらの方法が楽ちんでおすすめです。

CSSのバージョン管理 【CSSのバージョン管理】スーパーリロードなしで変更を反映させる【SANGO】

その他のSANGOのカスタマイズ

その他にも、面白いSANGOのカスタマイズを結構行っているます。

ぜひぜひ使ってください!

SANGOのカスタマイズ

SANGOの固定ヘッダーを小さく 【SANGO】固定ヘッダーをスクロールで小さく変化させる方法

SANGOの記事ヘッダーにタグを追加 SANGOの記事ヘッダーにタグを表示するカスタマイズ

もしもアフィリエイトの簡単リンクをカスタマイズ もしもの「かんたんリンク」のボタンをカスタマイズ|スマホ表示もあり

画面下部に次の見出しを表示するカスタマイズ|離脱率を下げよう 【SANGO】画面下部に次の見出しを表示するカスタマイズ|離脱率を下げよう

SANGOのヘッダーを固定する方法 【スマホ対応】SANGOのヘッダーをCSSで固定する方法

コメントを残す