アフィリエイトになるのかな？
物販系商品紹介は楽天でいうところのルームがきっかけでアフィリエイタ―以外にも身近になりました。
超・初心者の私でもすぐにできた、カエレバを使用したアフィリエイトの始め方とカエレバのカスタマイズについてまとめました。
Contents
物販アフィリエイトを始めるなら、初心者はもしもアフィリエイトとバリューコマース
ブログにこの物販を取り入れるとすれば、有名所は
↓報酬が１番高く、換金のしやすさ◎ 楽天・Ａｍａｚｏｎをつかうなら絶対ここ！
・もしもアフィリエイト
↓ヤフーショッピングの商品紹介をするなら
・バリューコマース
の２択かと思います。
他にもたくさんありますが、正直あっちこっち手を出しても初心者は管理できません。(断言)
商品ページリンクはまずはカエレバ！ Ａｍａｚｏｎの申請が通らないとリンカ―は使えません！
そして商品紹介をするさいに重要なのが商品ページリンク。
アフィリエイトの始め方
１．まずはもしもアフィリエイトに登録。
２．もしもアフィリエイトの中で【楽天】と【Ａｍａｚｏｎ】に提携申請。
楽天は秒速で承認されるのですが、Ａｍａｚｏｎは時間がかかります。
アフィリエイトを取り入れるなら速い段階で申請しておきましょう。
３．次に、ヤフーショッピングに対応するためにバリューコマースにも登録。
４．ヤフーショッピングに提携申請。
５．カエレバに登録。
６．カエレバに必要な情報を入力。
カエレバの使い方が私は少しややこしかったですね。
簡単なカエレバの使い方
１．まず、上部にある商品キーワードに商品名など入力します。
右のプルダウンは私はまだＡｍａｚｏｎと提携できていないので楽天市場にします。
ここを楽天市場にさえすればすぐできます。
２．サイト名(自分用)、あとは提携しているＩＤを入力します。
私はこの時は楽天とヤフーショッピングだけなのでこの２つだけ入力。
３．下の方に保存とあるので保存。
４．リンクを作成。
上の検索に入力したらタイトルなどは勝手に出ました。
デザインで形式を、隣のショップというのはリンクボタンのデザインです。
５．ブログパーツができたのでコピー。
７．記事に貼り付ける。必ず【テキスト】に貼り付けてくださいね。
８．【ビジュアル】で確認する。
この【テキスト】に入力するってやつ、初心者にはなかなか難しい。
違いもよくわからんくらい。笑
私も
リンク系やコード系をとにかくビジュアルエディタに入力しちゃっていて、いつまでも反映されないし意味わからんしもう嫌っ！！！
ってよくなっていました(^_^;)
今ならわかる。
なんでも【テキスト】に入力だ。ワードプレス。←
ここまですればもう完了です（*^_^*）以下は私の失敗談とカエレバのカスタマイズについてです♪
カエレバがスマホで表示されない。余白になる原因はsimplicityのカスタマイズ。私の失敗談
なんだかんだとできたぜ！ と喜んでいたら、今度はスマホ表示でカエレバが表示されなくなりました。泣
先ほどのカエレバの画面では、ブログパーツ生成のデザインというところで【Ｇ－Ｔｏｏｌ風１】という最初からの設定のままにしていた私。
ところが、これってなんかブロガーさんたちの画面と違う。。。。
試しに他のデザインにしてみると、なんかちょっと見やすい。
よし、これにしよう。
コピペ。テキストに貼る。
ビジュアルで確認するとちゃんと表示されているね。よしよし。
が、いざ投稿してみると画像はあるものの商品名や楽天などのリンクが一つも表示されない。
謎の余白だらけに。(^_^;)
なんでや(・。・;
いろいろ検索したものの、それらしい答えはない。
肝心な時にグーグルさんは教えてくれないんだから！
と、最初にカエレバを貼ったページを見てみるとちゃんと表示されている。
まさか。。。
と、最初のＧ－ＴOOL風１にデザインを戻して新しく貼り替えてみると表示されました。笑
なんのことはない。
私がカエレバの画面で簡単に変更できたデザインは、それ自体がカスタマイズされたものだったということ。
カエレバの画面でできたから、てっきり初期設定だとばかり思っていました(^_^;)
さて。
あれがカスタマイズされた表示だとわかれば、あとはもうカスタマイズについてググるのみ。
↓初期設定だとこうだったのが
↓こうなります。(スマホ)
シンプリシティ２でカエレバを５分でカスタマイズする方法
ちょー簡単です。
やることは２つだけ！
１．カスタム用ＣＳＳをコピーして貼り付ける
こちらのコードがカスタム用ＣＳＳです。これを貼るだけ♪
まず↓をコピペして
/*ヨメレバ・カエレバ（レスポンシブ）*/
.booklink-box, .kaerebalink-box {
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, Meiryo, sans-serif;
padding: 22px 25px 22px 25px;
width: 94%;
margin: 0 auto 15px;
border: 3px solid #dfdfdf;
box-sizing: border-box;
text-align: center;
}
.booklink-image, .kaerebalink-image {
width: 100%;
margin: 0 0 5px 0;
}
.booklink-image img, .kaerebalink-image img {}
.booklink-info, .kaerebalink-info {
line-height: 125%;
width: 100%;
}
.booklink-name, .kaerebalink-name {
margin: 0 0 4px 0;
}
.booklink-name a, .kaerebalink-name a {
color: #0066cc;
text-decoration: underline;
}
.booklink-name > a, .kaerebalink-name > a {
font-size: 16px;
}
.booklink-name a:hover, .kaerebalink-name a:hover {
color: #FF9900;
}
.booklink-powered-date, .kaerebalink-powered-date {
font-size: 8px;
}
.booklink-detail, .kaerebalink-detail {
color: #333333;
font-size: 12px;
margin: 0 0 10px 0;
}
.booklink-link2, .kaerebalink-link1 {}
.booklink-link2 a, .kaerebalink-link1 a {
width: 90%;
display: block;
margin: 0px auto -12px;
padding: 10px 1px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
box-shadow: 2px 2px 1px #dcdcdc;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover {
opacity: 0.6;
}@media screen and (min-width: 800px) {
.booklink-box, .kaerebalink-box {
text-align: left;
display: table;
}
.booklink-image, .kaerebalink-image {
vertical-align: top;
box-sizing: border-box;
display: table-cell;
width: 111px;
text-align: center;
margin: 0;
}
.booklink-image img, .kaerebalink-image img {
max-width: 100%
}
.booklink-info, .kaerebalink-info {
line-height: 125%;
vertical-align: top;
box-sizing: border-box;
display: table-cell;
padding-left: 25px;
width: auto;
}
.booklink-name, .kaerebalink-name {
margin: 0 0 24px 0;
}
.booklink-name > a, .kaerebalink-name > a {
font-size: 16px;
}
.booklink-powered-date, .kaerebalink-powered-date {
margin: 6px 0 0 0;
}
.booklink-detail, .kaerebalink-detail {
margin: 0 0 14px 0;
}
.booklink-link2 a, .kaerebalink-link1 a {
width: auto;
text-align: center;
margin: none;
}
.booklink-link2 > div, .kaerebalink-link1 > div {
width: 33.33%;
padding: 0 5px 5px 0;
box-sizing: border-box;
float: left;
}
}.shoplinkamazon a {
color: #ffffff;
background: #ff9901;
border: 2px solid #ff9901;
}
.shoplinkrakuten a {
color: #ffffff;
background: #bf0000;
border: 2px solid #bf0000;
}
.shoplinkkindle a {
color: #ffffff;
background: #0074c1;
border: 2px solid #0074c1;
}
.shoplinkseven a {
color: #ffffff;
background: #00BABE;
border: 2px solid #00BABE;
}
.shoplinkyahoo a {
color: #ffffff;
background: #0074c1;
border: 2px solid #0074c1;
}
↑ これを「Simplicity2」子テーマの「style.css」に貼るだけです。
ダッシュボード ＞ 外観 ＞ テーマの編集 ＞ スタイルシート（style.css） ＞「style.css」を開く。
すると
とあるので、この下にさきほどコピペしたものを貼り付けます。
貼り付けたらファイルを更新をクリックで完了です。
２．「ヨメレバ」「カエレバ」でデザインを指定して商品リンク用ブログパーツを作成
デザインを
| amazlet風２－(カスタマイズ用) | なし |
に指定して、あとはできたブログパーツを記事の【テキスト】に貼ればＯＫ！
こちらのサイト様から引用させていただきました（*^_^*）