ヨメレバ・カエレバをボタン化する方法!CSSを編集して「ストーク」へ設置してみよう!初心者でもOK!

ヨメレバ・カエレバのボタン化のアイキャッチ

初心者ブロガーの一歩先を行く、なかのっちです@fumikondatackle

それでは、あなたのWordPressブログに「ヨメレバ・カエレバを設置する方法」と「ボタン化する方法」を解説していきますね。

この記事を読みながら作業すれば、初心者ブロガーのあなたでも、かっこいいブログパーツ=アフィリエイトリンク(書籍や商品の紹介パーツ)を表示させることができますよ!

この記事で使用する用語の解説です。

ヨメレバ=ブログパーツのこと

ブログパーツ=本や商品画像付きのアフィリエイトリンクのこと

 

「子テーマ」の導入と「CSS」の基礎知識について

ヨメレバを設置する前にWordPressテーマSTORK(ストーク)の「子テーマ」を導入しておくことをオススメします。

「子テーマ」を導入していなくても、ヨメレバを設置することはできます。こんな感じです。

▼パソコンでの表示はこちら

ヨメレバのボタンなしバージョン

▼スマホでの表示はこちら

ヨメレバのボタンなしバージョン@スマホでの表示

しかし、このままではamazon」や「楽天」へのリンクが小さくて分かりにくいですよね。

amazonへのリンクが小さくて見えにくいですよね

そこで、この記事では「amazonへのリンク」を「ボタン化」する方法を紹介します。ボタンにすることで、読者がどこをクリックすればよいのかが、ひと目で分かるようになります。

読者にとってもわかりやすくなりますし。ボタンのほうが、見た目もカッコイイですよね(笑)

 

ボタン化するためには「子テーマ」の導入が必要!?

ボタン化するためには、やることが2つあります。

  1. 「子テーマ」の導入
  2. 「子テーマ」の「CSS」をいじる

 

▼「子テーマ」の導入がまだの方は、こちらの記事を見ながら先に設定しておいてください!

ストークで「子テーマ」を導入する方法とメリットを「初心者」にも分かりやすく解説!

2017.09.05

 

つぎに「CSS」をいじくる必要があるんですけど、、、初心者ブロガーにとって「CSS」とか「HTML」とかって、ゲロ吐きそうになるくらい意味不明ですよね(泣)

初心者ブロガーのあなた
WordPressの設定だけでも苦労したのに「CSS」なんて無理、、、

安心してください!初心者ブロガーのボクが、初心者でもわかるように解説していきますので(^^

 

「CSS」の基礎知識 ~超・初心者編~

「CSS」とは、ざっくり言うと「ブログの見た目」「ブログのデザイン」や「文字の装飾」のことです。具体的にいうと以下のものがあります。

  • ヘッダーの形や大きさ
  • 「メインカラム」や「サイドバー」のデザイン
  • 「太文字」や「文字の色」

などですね。

もっと詳しく知りたい方は、ググってみてくださいね。

 

ヨメレバをWordPressストークに設置する方法

ヨメレバをブログに設置する手順は、次の4つです。

  1. ユーザデータを登録する
  2. 紹介したい本の「ISBN」を入力して「ヨメレバ(ブログパーツ)」を作成する
  3. 「CSS」をいじって「ヨメレバ(ブログパーツ)」のボタン化を有効にする
  4. 2で作成した「ヨメレバ(ブログパーツ)」をブログ記事に貼り付ける

では、順番に見ていきましょう。

 

ユーザデータを登録する

まず、ヨメレバの公式サイトへ行きます。

ヨメレバさんのトップページ(ホームページ)

 

はじめに利用上の注意を読みます。

下にスクロールしていくと「ユーザーデーター」の入力フォームがあります。最初に「サイト名」を入力します。

サイト名を入力します

 

つぎに「amazonアソシエイト」のIDを入力します。

amazonアソシエイト(amazonアフィリエイト)のIDを入力します

 

amazonアソシエイトの登録がまだの方はこちらの公式ページへ行って「会員登録」と「サイトの提携」を完了させてください。

amazonアソシエイトのトップページ画像

 

つぎに「楽天アフィリエイト」のIDを入力します。

楽天アフィリエイトのIDを入力します

 

楽天アフィリエイトに入力する「データ」の作り方

「ユーザデーターの楽天アフィリエイト」に入力するデータの取得方法ですが、ちょっとややこしいので詳しく図解します。やることは3つです。

1.まず楽天アフィリエイトの会員登録を済ませます。

2.つぎに楽天アフィリエイトへ行って「http://books.rakuten.co.jp/」と入力して「リンク作成」をクリックします。

リンクを作成に入力

 

3.「ソースをコピーして掲載する」の「hgrc/」と「/?pc=」の間にある文字列をコピーして「ユーザーデーターの楽天アフィリエイト」の欄に貼り付ければOKです。

楽天アフィリエイトから抜き出す文字列はこちら

 

ヨメレバの「ユーザーデーター入力」欄に、

  1. 「サイト名」
  2. 「amazonアソシエイト」
  3. 「楽天アフィリエイト」

の3つを入力したら、下にスクロールして「保存」をクリックします。

保存をクリックします

以上で「ユーザーデーターの入力」は完了です。

 

紹介したい本の「ISBN」の取得と入力

amazonへ行って、紹介したい本のページへ。ここでは例として堀江貴文さんの「ゼロ」でやってみます。

「ISBN-10」の10桁の数字「4478025800」をコピーします。

ISBN-10の10桁の数字をコピーします

 

ヨメレバのサイトに戻って「ブログパーツ生成」赤枠の部分に、10桁のISBN「4478025800」を貼りつけます。

ISBNはこちらに入力します

 

「ゼロの画像つきアフィリエイトリンクのコード」=「ブログパーツ」が生成されました。コピーして、あなたのブログに貼りつけてみてください。

ヨメレバのブログパーツが生成されました!

 

※追記!17/09/26

STORKストークを利用されている方は「amzlet風-1」を選択してください!

 

 

「CSS」をいじってボタン化に挑戦!

いよいよCSSに手を出しますよ。

初心者のあなた
えっマジ!?初心者がCSSをいじってもだいじょうぶ??

いや、失敗するかも知れません…(汗)

なので、まじでバックアップは必ず取っておいてくださいネ!

 

▼WordPressブログのバックアップの取り方の解説はこちら

ワードプレスのバックアップの取り方をわかりやすく解説!プラグインBackWPupで初心者でも簡単にできちゃうよ

2017.09.07

 

はじめにSTORK公式サイトの「カエレバ・ヨメレバ・ポチレバ用のCSSサンプルをご紹介」のページへ行きます。

STORK公式ページの「ヨメレバ・カエレバ用のCSSサンプルの紹介ページ」の画像

 

下の方にスクロールすると「CSSのサンプル」があるので、コピペします。

ヨメレバ・カエレバ用CSSサンプルをコピペします

※途中までの画像です。実際はもっと長い文字列になります。

 

コピペした「CSSのサンプルを」子テーマの「style.css」に貼りつけます。

「外観」→「CSS編集」を選択。

「外観」から「CSSの編集」をクリック

 

先ほどコピペした「CSSのサンプル」を貼りつけます。

先程コピペしたCSSサンプルを貼りつけます
事前にバックアップを取ったことを確認してから「保存して公開」をクリックしてください!

 

バックアップをとったので「保存して公開」をクリックしました(^^;

あなた
なかのっちさんって初心者のくせに、けっこう思い切ってポチりますよね…

ボタン化に成功したかどうか気になりますよね、、、

ではボクが人生で初めて「CSS」をいじってみた結果を発表します!

じゃ~ん!大成功(^^

 

カエレバをWordPressストークに設置する方法

カエレバをストークに設置する手順は、次の4つです。

  1. カエレバの公式サイトで「ユーザデータ」を登録する
  2. 紹介したい商品の情報を入力して「カエレバのブログパーツ」を作成する
  3. 「CSS」をいじって「amazonなどへのリンク」をボタン化する
  4. 2で作成した「カエレバのブログパーツ」をブログ記事に貼り付ける

では、順番に解説していきます。

 

ユーザデータの登録

まず、カエレバの公式サイトへ行きます。

カエレバの公式サイト

 

はじめに利用上の注意を読みます

カエレバの利用上の注意

アダルトNGなどの禁止事項があるので、しっかりと目を通しておきましょう。

 

画面を下の方にスクロールしていくと「ユーザーデーター入力」のフォームがあります。

  • サイト名
  • amazonアソシエイト

を入力します。

サイト名とamazonアソシエイトを入力します

 

楽天の登録方法

つぎに「楽天」の入力方法を解説します。入力するところは2ヶ所あります。

  1. メインリンク用
  2. 並列リンク用
カエレバの楽天IDの入力箇所は2つあります

それぞれ図解しながら、わかりやすく説明していきますね。

 

「メインリンク用」の入力方法

まず最初に「楽天アフィリエイトの会員登録」を済ませます。まだ登録していない場合は、楽天アフィリエイトの公式ページへ行って登録を完了させてください。

楽天アフィリエイトのトップページ

 

「カエレバ」のページに戻って「楽天ウェブサービス用のIDを利用します 調べ方」と書いてあるところの「調べ方」をクリックします。

「調べ方」をクリックします

 

「調べ方」をクリックすると「楽天ウェブサービスのログインページ」へ行きますので、ログインしてください。

楽天ウェブサービスのログインページ

 

ログインすると、赤線の箇所に「あなたのアフィリエイトID」が表示されるので、コピーします。

楽天アフィリエイトID

 

コピーした「楽天アフィリエイトID」をカエレバの「メインリンク用」のところに貼りつけます。

メインリンク用に貼りつけます

 

「並列リンク用」の入力方法

楽天アフィリエイトのトップページへ行って「ページのURLを入力」と書いてあるところに、「http://search.rakuten.co.jp/search/mall/%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0/-/」をコピペします。

ページのURLを入力の箇所に文字列をコピペします

 

文字列をコピペしたら「リンク作成」をクリックします。

文字列をコピペしたら、リンク作成をクリックします

 

3.「ソースをコピーして掲載する」の「hgrc/」と「/?pc=」の間にある文字列をコピーして「並列用リンク」の欄に貼り付ければOKです。

赤線の部分の文字列をコピーします。

 

コピーした文字列を「並列用リンク」に貼りつけます。

コピーした文字列を「並列用リンク」に貼りつけます

貼りつけたら、下の方へスクロールして「保存」をクリックします。これで登録は完了です。

 

紹介したい商品のデータの入力方法

「サイト名」「amazonアソシエイツ」「楽天アフィリエイトのメインリンク用」「並列用リンク」の登録(保存)が完了すると、次のようなページに飛びますので、赤枠の「商品キーワード」に紹介したい商品名を入れます。

「商品キーワード」の欄に、紹介したい商品名を入れます

 

「検索」をクリックすると、検索結果が表示されます。該当商品の「ブログパーツを作る」をクリックしてください。

「ブログパーツを作る」をクリックします

 

「カエレバのブログパーツのコード」が生成されました。赤枠の中の「コード(文字列)」をコピーして、あなたのブログに貼りつければ完成です!

カエレバのコードが作成されました
「楽天市場」と「価格コム」のチェックボックスをクリックして、チェックをいれています。チェックを外すこともできます。

 

「CSS」をいじって「amazonなどへのリンク」をボタン化する方法

「CSS」をいじってボタン化を有効にする方法は、記事前半の「ヨメレバ」の解説のところで紹介していますのでご覧ください。

 

では実際に、ブログに貼りつけてみますね。

↓ ↓ ↓

カエレバのブログパーツの完成です!かっちょいいですね(^^

おつかれさまでした!