人気ブログランキング にほんブログ村 主婦日記ブログ 平凡主婦へ

応援お願いします♪

Howto

【JINカスタマイズ】css-「カエレバ」のリンクボタンを増やして4つに

JINのcssではカエレバリンクのボタンは3つ表示です。

モフ雄

「Wowma」も表示させたいな

※Wowmaは現在「au PAY」と名称変更しました。

カスタマイズの注意事項

必ず「子テーマのstyle.css」に追加してください。

カエレバとは?

アマゾン、楽天、yahooショッピングのボタンがならんでいる商品紹介を見たことがありませんか?

お買い物は自分の利用しているショッピングモールだとポイントも溜まって登録もしてあるから即買いやすい。

それをリンクを貼りやすくしてくれるサービスが「カエレバ」です。

モフ子

私もなんとか設定できるまでになってきました!

JINオリジナルデザインを使用

まず前提として、私は「外観」「カスタマイズ」「その他の設定」で「カエレバヨメレバをJINオリジナルデザインにする」にチェックを入れています。

ですが、対応がアマゾン、楽天、ヤフーショッピングまでのようなので、このように表示されてしまいました。

「Wowma」だけテキスト表示と寂しい結果に・・・。

モフ子

ではカスタマイズしてみましょう。

JINのcss記述場所を探す

モフ雄

どんな記述になっているのかな?

左メニュー「外観」「テーマエディター」に移動し、右上の赤枠のところを「JIN」(親テーマ)に変更。

すると「kaereba.css」がありました。ここに書いてあるんですね。

カエレバではどんなクラス名?

そのcssを見ていくと「.shoplinkamazon」「.shoplinkrakuten」「.shoplinkyahoo」というクラス名を見つけました。

これは「カエレバ」側で設定してあるcssのクラス名ですね。

では追加したい「Wowma」はどうなのか、htmlソースを見ると「.shoplinkwowma」となっていました。

必要なところだけを子テーマに追記

では親テーマ「JIN」の「kaereba.css」に直接追加した方が早いのですが、子テーマの「style.css」に必要なことだけを書いていきます。

さきほどの「テーマエディター」で「jin-child」を指定しなおすか、カスタマイズメニューにある「追加css」に書き込みます。

css
/*カエレバリンク*/
@media (min-width: 768px) {
  .shoplinkyahoo {/*ヤフーのボタンのヨコに隙間を開けたい*/
    margin-right: 8px; } }
@media (max-width: 767px) {
  .shoplinkwowma{
    margin: 0 auto;
    margin-bottom: 1px; } }

.shoplinkwowma a{/*各ディスプレイサイズごとの指定*/
  display: block;
  font-size: 0.85rem;
  text-decoration: none !important;
  color: #fff !important;
  text-align: center;
  border-radius: 2px; }
  @media (max-width: 767px) {
    .shoplinkwowma a{
      padding: 10px; } }
  @media (min-width: 768px) {
    .shoplinkwowma a{
      font-size: 0.8rem;
      padding: 12px 5px; } }
  @media (min-width: 1024px) {
    .shoplinkwowma a{
      padding: 12px 12px; } }

.shoplinkwowma a {/*Wowmaの背景色*/
  background: #ff7800; }

.kaerebalink-box{/*ボックス全体をちょっと調整*/
	padding: 20px 20px 10px 20px !important;
	margin-bottom:20px;
}

記述内容を合わせるためにまるごとコピーしてきて、いらないところを削り、.shoplinkwowmaを足したソースとなっています。


めでたく、ボタンの形になりました!

※Wowmaは現在「au PAY」と名称変更しました。

カエレバで変換するとまだ「Wowma」表示になっているようですので、ご自分のサイトに載せるときは


カエレバのhtmlソースから


「target=”_blank” >Wowma<img src=」


この辺りを探して、ここの「Wowma」を「au PAY」に変更してください。

カエレバでは他に「セブンネット」「ベルメゾン」「セシール」「価格コム」が表示できるそうです。追加される方は参考になさってみてください。