blogger CSSでカエレバカスタマイズをやってみた

2023年5月21日2023年8月10日

当ページのリンクには広告が含まれています。

管理人
えーぽん

今回は、bloggerでカエレバカスタマイズの設定を行った手順を紹介します。

今回はこんな内容をまとめました

bloggerで使えたカエレバカスタマイズソースコード
au PAYボタンを追加しました
カラーコードを変更
その他、bloggerテーマに対応したカエレバカスタマイズ

bloggerで使えたカエレバカスタマイズソースコード

前回、bloggerで現時点、使えたカスタマイズのまとめを投稿した時にカエレバカスタマイズも紹介し、参考サイトもご紹介させていただきました。こちらのサイトです↓

ブログサイト「ひょんなことから」さんでご紹介されたソースコード

「ひょんなことから」さんのソースコードを使ったカエレバカスタマイズは、パソコンで表示された場合…こんなテイストです↓

スマホで表示すると、こんなテイストになります↓

ボタンの表示は、通常より少し大きめなのでスマホで確認しても分かりやすいのが特徴的です。

また、様々なソースコードを使ってみたのですが、画像だけが表示されないなど問題があったので、こちらを採用させていただきました<(_ _)>

ひょんなことからさんの参考にさせていただいたソースコード

.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a {
  transition: all ease-in-out .3s;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 13px;
}

.shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover {
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.shoplinkamazon a {
  background: #FF9901;
  border-radius: 7px;
  color: #fff;
}

.shoplinkkindle a {
  background: #007dcd;
  border-radius: 7px;
  color: #fff;
}

.shoplinkrakuten a {
  background: #c20004;
  border-radius: 7px;
  color: #fff;
}

.shoplinkyahoo a {
  background: #7b0099;
  border-radius: 7px;
  color: #fff;
}

.booklink-image {
  zoom: 1.2;
}

.kaerebalink-box, .booklink-box {
  border: 1px #9C9996 solid;
  box-shadow: 2px 2px 4px gray;
  margin: 20px 0;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  justify-content: space-around;
}

.booklink-footer {
  display: none;
}

.kaerebalink-info, .booklink-info {
  width: 43%;
  font-size: 16px;
}

@media screen and (max-width: 640px) {
  .kaerebalink-box, .booklink-box {
    display: block;
  }
  .kaerebalink-info, .booklink-info {
    width: 100%;
  }
  .kaerebalink-image, .booklink-image {
    margin: 0 0 20px 0!important;
    text-align: center;
    float: none!important;
  }
  .kaerebalink-name, .booklink-name {
    text-align: center;
  }
}

au PAYボタンを追加しました

他のショップを増やす場合、参考にしてもらえるといいかもしれません。管理人は、au PAYボタンを作りたかったので、増やすことにしました。

ショップコードの調べ方

ショップコードは、実際にカエレバ公式サイトでソースコードをコピーして、メモ帳などに貼り付けて調べます。

手順

カエレバソースコードを利用するためには、ASP登録が必要になります。

カエレバに必要なASP

カエレバ公式サイトでサイト登録を済ませる

カエレバ公式サイト画面をスクロールすると、データ入力が表示されます。ここに、サイト名と各ASPで取得したIDを入力していきます。

カエレバ商品コードソースを取得

ここで、「ひょんなことから」さんのソースコードにないショップコードを調べます。ちなみに、管理人が調べたいショップは、au PAYですが、こちらのショップコードはこうなります↓

.shoplinkwowma

「ひょんなこと」からさんのコードにショップコードを加えるのは３か所

①一つ目はこちらのコードに「.shoplinkyahoo a 」の後に、「.shoplinkwowma a 」を加えます↓

.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a {
  transition: all ease-in-out .3s;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 13px;
}

修正後はこんな感じ↓

.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a .shoplinkwowma a {
  transition: all ease-in-out .3s;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 13px;
}

②二つ目はこちらのコードに、「.shoplinkyahoo a:hover 」の後に、「,」を入力した後、「.shoplinkwowma a:hover 」を、加えます↓

.shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover {
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

修正後はこんな感じ↓

.shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkwowma a:hover {
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

③三つ目は、この直後にコードを加えます↓

.shoplinkyahoo a {
  background: #7b0099;
  border-radius: 7px;
  color: #fff;
}

加えるコードはこちら↓

.shoplinkwowma a {
  background: #好きなカラーコード;
  border-radius: 7px;
  color: #fff;
}

③番目に加えたコードは、ショップボタンのコードになっているので、加えたいショップがあれば、このコードに「ショップコード」と、使いたいカラーコードを加えて、カエレバカスタマイズコードに加えていく…という具合です。

カラーコードを変更してみた

今現在の管理人がbloggerブログで使っているカエレバボタンは、パソコンやタブレット端末の場合、こんなテイストです↓

スマホ表示の場合、こんなテイストです↓

カラーコードを調べる場合、管理人はこのサイトを使ってます↓

WEB色見本原色大辞典 – HTMLカラーコード (colordic.org)

管理人のカエレバカスタマイズコードはこちらです。au PAYボタンが設定されているのでそのまま使えます(カラーコードは、好きな色を使ってくださいね)↓

/*カエレバCSS*/

.shoplinkamazon a, .shoplinkkindle a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkwowma a{
  transition: all ease-in-out .3s;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 13px;
}

.shoplinkamazon a:hover, .shoplinkkindle a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover .shoplinkwowma a:hover  {
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.shoplinkamazon a {
  background: #ff7f50;
  border-radius: 7px;
  color: #fff;
}

.shoplinkkindle a {
  background: #da70d6;
  border-radius: 7px;
  color: #fff;
}

.shoplinkrakuten a {
  background: #ff69b4;
  border-radius: 7px;
  color: #fff;
}

.shoplinkyahoo a {
  background: #ee82ee;
  border-radius: 7px;
  color: #fff;
}

.shoplinkwowma a {
  background: #ff7aff;
  border-radius: 7px;
  color: #fff;
}

.booklink-image {
  zoom: 1.2;
}

.kaerebalink-box, .booklink-box {
  border: 1px #9C9996 solid;
  box-shadow: 2px 2px 4px gray;
  margin: 20px 0;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  justify-content: space-around;
}

.booklink-footer {
  display: none;
}

.kaerebalink-info, .booklink-info {
  width: 43%;
  font-size: 16px;
}

@media screen and (max-width: 640px) {
  .kaerebalink-box, .booklink-box {
    display: block;
  }
  .kaerebalink-info, .booklink-info {
    width: 100%;
  }
  .kaerebalink-image, .booklink-image {
    margin: 0 0 20px 0!important;
    text-align: center;
    float: none!important;
  }
  .kaerebalink-name, .booklink-name {
    text-align: center;
  }
}

/* カエレバCSSここまで */