アフィリエイトショップリンクカエレバのCSSカスタマイズ用をいろいろなサイトを参考に見た目を変更、レスポンシブテーマに対応してみた

kaerebaburoguparts

いろいろ調べたんですが、あまりカエレバのカスタマイズについての記事はないんですね。取りあえず納得行く表示がされたのでメモします。いかんせん素人ですのでコードは貼ってありますが気にる場合は修正、並び替えたりしてください。


HaLPosTではこんな感じで表示

気をつけたことはHaLPosTはレスポンシブテーマですのでスマホやタブレットでもそれなりに綺麗に表示されることが前提です。

こんな感じで表示されます。

❚PC



❚スマートフォン


HaLPosTでのカスタムCSS

❚カエレバカスタムCSS

/* カエレバ用 */
.kaerebalink-box{text-align:left;padding-bottom:20px;margin-top:20px;font-size:17px;/zoom: 1;overflow: hidden;}
.kaerebalink-image{float:left;margin:0 15px 10px 0;}
.kaerebalink-info{line-height:120%;/zoom: 1;overflow: hidden;}
.kaerebalink-name{margin-bottom:10px;line-height:120%;}
.kaerebalink-powered-date{font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%}
.kaerebalink-detail{margin-bottom:5px;}
.kaerebalink-link1{margin-top:10px;}
.shoplinkamazon{margin-right:5px;background: url('画像URL') no-repeat;padding: 0 0 5px 18px;white-space: normal;}
.shoplinkrakuten{margin-right:5px;background: url('画像URL') no-repeat;padding: 0 0 5px 18px;white-space: normal;}
.shoplinkyahoo{margin-right:5px;background: url('画像URL') no-repeat;padding: 0 0 5px 18px;white-space: normal;}
.shoplinkyahooAuc{margin-right:5px;background: url('画像URL') no-repeat;padding: 0 0 5px 18px;white-space: normal;}
.shoplinkseven{margin-right:5px;background: url('画像URL') no-repeat;padding: 0 0 5px 18px;white-space: normal;}
kaerebalink-boxのfont-sizeはご自分のサイトに合わせていただければ良いかなと思います。


❚コード参考サイト

こちら様のサイトのコードだとHaLPosTのサイトだとはみ出てしまったのでちょこっと修正しています。もしはみ出ないようであれば、こちらのサイト様の方が専門の方だと思いますので参考にしてください。


❚ショップ画像

画像はこちらのサイト様のを頂きました。画像リンクは切れている!?ようですのでダウンロードしてご自分のサーバーにアップロードしてください。



スマホでの表示がちょっと納得がいってないのですが、取りあえずはみ出ないで表示されているので良しとしています。



もっと綺麗に表示させている方がおられましたら教えて下さい(・_・;)

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です