楽天APIで簡単アフィリエイト

楽天API【キーワード編】

楽天APIを使い「キーワード」に沿ったアフィリエイト商品をサイトやブログに表示します。自由にデザイン可能で、ソースをわざわざ取りにいくこともありません。WordPressにも簡単に挿入できます。

下準備

楽天APIを利用するにあたりアフィリエイトIDとデベロッパーIDが必要になります。

IDの取得、確認は↓

http://webservice.rakuten.co.jp/

次にRakuten Web Service SDK for PHPを↓からダウンロードします。

http://webservice.rakuten.co.jp/sdk/php.html

ダウンロードしたzipファイルを解凍し、ファイル名をとりあえず何でもいいですが「sdk」とします。

設置方法

sdkファイルをアップロードします。

例）キーワードを指定して3つの商品を自動表示するようにします。これを2列作ります。

デベロッパーID、アフィリエイトID、キーワードを記述し、適当なファイル名「rakuten-keyword.php」をsdkファイルと同じ階層に設置します。

WordPressの場合、直接記事やテーマファイルに記述するのでファイルを作る必要はありません。記事内に挿入したい場合は、Exec-PHPをインストールする必要があります。記事の好きな場所にphpを挿入することができるようになり、またウィジェットにも挿入可能になります。

<div class="rserch">

<?php 
require_once 'sdk/autoload.php'; 
$client = new RakutenRws_Client();

//IDを入力

$client->setApplicationId('デベロッパーID');
$client->setAffiliateId('アフィリエイトID');


//1列目 タイトル　

{echo '<div class="shop">おすすめショップ</div>';}


//キーワードを入力

$response = $client->execute('IchibaItemSearch', array('keyword' => 'キーワード'));


//取得する商品数を3としました。

if ($response->isOk()) {$i = 0; $goods = 3; foreach($response as $item){


//サムネイルを取得しアフィリエイトリンクを挿入

if($i >= $goods){break;}echo '<div class="goods1">';
if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];
echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}


//金額関連

echo '<div class="price">'.$item[itemPrice].'円';
if($item[postageFlag] ==0){
echo "（送料込）</div>";}else{echo "（送料別）</div>";}


//ショップ名

echo '<div class="shop_name">'.$item[shopName].'</div>';
echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}


//2列目 上記の繰り返しです。タイトルとキーワードを入力します。

{echo '<div class="shop">関連商品（タイトル）</div>';}

$response = $client->execute('IchibaItemSearch', array('keyword' => '関連商品キーワード1'));

if ($response->isOk()) {$i = 0; $goods = 3; foreach($response as $item){	
if($i >= $goods){break;}echo '<div class="goods1">';
if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];
echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}
echo '<div class="price">'.$item[itemPrice].'円';
if($item[postageFlag] ==0){
echo "（送料込）</div>";}else{echo "（送料別）</div>";}
echo '<div class="shop_name">'.$item[shopName].'</div>';
echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}


?>

</div>

<?php

require_once 'sdk/autoload.php';

$client = new RakutenRws_Client();

//IDを入力

$client->setApplicationId('デベロッパーID');

$client->setAffiliateId('アフィリエイトID');

//1列目タイトル　

{echo '<div class="shop">おすすめショップ</div>';}

//キーワードを入力

$response = $client->execute('IchibaItemSearch', array('keyword' => 'キーワード'));

//取得する商品数を3としました。

if ($response->isOk()) {$i = 0; $goods = 3; foreach($response as $item){

//サムネイルを取得しアフィリエイトリンクを挿入

if($i >= $goods){break;}echo '<div class="goods1">';

if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];

echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}

//金額関連

echo '<div class="price">'.$item[itemPrice].'円';

if($item[postageFlag] ==0){

echo "（送料込）</div>";}else{echo "（送料別）</div>";}

//ショップ名

echo '<div class="shop_name">'.$item[shopName].'</div>';

echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}

//2列目上記の繰り返しです。タイトルとキーワードを入力します。

{echo '<div class="shop">関連商品（タイトル）</div>';}

$response = $client->execute('IchibaItemSearch', array('keyword' => '関連商品キーワード1'));

if ($response->isOk()) {$i = 0; $goods = 3; foreach($response as $item){

if($i >= $goods){break;}echo '<div class="goods1">';

if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];

echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}

echo '<div class="price">'.$item[itemPrice].'円';

if($item[postageFlag] ==0){

echo "（送料込）</div>";}else{echo "（送料別）</div>";}

echo '<div class="shop_name">'.$item[shopName].'</div>';

echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}

</div>

$item[xxxxxxx]を変更すればいろんな情報を取得できます。

商品名	itemName
キャッチコピー	catchcopy
商品コード	itemCode
商品価格	itemPrice
商品説明文	itemCaption
商品URL	itemUrl
アフィリエイトURL	affiliateUrl
店舗名	shopName
商品画像64x64URL	smallImageUrls
商品画像128x128URL	mediumImageUrls
レビュー件数	reviewCount
レビュー平均	reviewAverage

この他にもたくさんあります、興味のある方は↓の楽天商品検索APIをご覧ください。

https://webservice.rakuten.co.jp/api/ichibaitemsearch/

具体的な使い方【キーワード編】

記事を書いて、その下に挿入するというやりかたです。

画像

記事内容

おすすめショップ

関連商品（訳ありホワイトチョコレート）

2800円（送料別）

割れチョコ工房　チョコル

2800円（送料別）

割れチョコ工房　チョコル

1500円（送料別）

割れチョコ工房　チョコル

↑のデモは、商品画像128×128、商品価格、店舗名だけの取得です。

これで楽天API【キーワード編】は完了です。

次は【ランキング編】です。

楽天API【ランキング編】　

ジャンルの人気順（ランキング形式）で取得します。

設置方法

キーワード編と同様にRakuten Web Service SDK for PHPを使います。

例）ジャンルに基づいて人気順に9つの商品を表示させます。こちらはいろんな情報を取得してみようと思います。

デベロッパーID、アフィリエイトID、ジャンルのID（番号）、商品数を記述し、適当なファイル名「rakuten-ranking.php」をsdkファイルと同じ階層に設置します。

こちらもWordPressの場合、直接記事やテーマファイルに記述するのでファイルを作る必要はありません。

<div class="rserch">

<?php 
require_once 'sdk/autoload.php'; 
$client = new RakutenRws_Client();

//IDを入力

$client->setApplicationId('デベロッパーID');
$client->setAffiliateId('アフィリエイトID');


//タイトル

{echo '<div class="shop_rank">スイーツ・お菓子・人気急上昇ランキング</div>';}


//「551167」はスイーツ・お菓子のジャンルです。楽天市場のカテゴリを調べるとジャンルごとに必ず番号があります。

$response = $client->execute('IchibaItemRanking', array('genreId' => '551167'));


//取得する商品数を9としました。

if ($response->isOk()) {$i = 0; $goods = 9; foreach($response as $item){
if($i >= $goods){break;}echo '<div class="ranking1">';


//ランキングの順位を表示

echo '<div class="rank">'.$item[rank].'位</div>';


//商品のサムネイルを取得しアフィリエイトリンクを挿入

if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];
echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}


//金額関連

echo '<div class="price">'.$item[itemPrice].'円';
if($item[postageFlag] ==0){
echo "（送料込）</div>";}else{echo "（送料別）</div>";}


//商品のキャッチコピー

echo '<div class="catch">'.$item[catchcopy].'</div>';


//レビュー平均とレビュー件数

echo '<div class="average">レビュー平均：<b>'.$item[reviewAverage].'</b></div>';
echo '<div class="count">レビュー件数：<b>'.$item[reviewCount].'</b></div>';


//店がショップオブイヤーを受賞しているのであれば「ショップオブザイヤー受賞」を表示

if($item[shopOfTheYearFlag] ==0){
echo "";}else{echo '<div class="shop_year">ショップオブザイヤー受賞</div>';}

//ショップ名

echo '<div class="shop_name">'.$item[shopName].'</div>';

echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}

?>

</div>

<?php

require_once 'sdk/autoload.php';

$client = new RakutenRws_Client();

//IDを入力

$client->setApplicationId('デベロッパーID');

$client->setAffiliateId('アフィリエイトID');

//タイトル

{echo '<div class="shop_rank">スイーツ・お菓子・人気急上昇ランキング</div>';}

//「551167」はスイーツ・お菓子のジャンルです。楽天市場のカテゴリを調べるとジャンルごとに必ず番号があります。

$response = $client->execute('IchibaItemRanking', array('genreId' => '551167'));

//取得する商品数を9としました。

if ($response->isOk()) {$i = 0; $goods = 9; foreach($response as $item){

if($i >= $goods){break;}echo '<div class="ranking1">';

//ランキングの順位を表示

echo '<div class="rank">'.$item[rank].'位</div>';

//商品のサムネイルを取得しアフィリエイトリンクを挿入

if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];

echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}

//金額関連

echo '<div class="price">'.$item[itemPrice].'円';

if($item[postageFlag] ==0){

echo "（送料込）</div>";}else{echo "（送料別）</div>";}

//商品のキャッチコピー

echo '<div class="catch">'.$item[catchcopy].'</div>';

//レビュー平均とレビュー件数

echo '<div class="average">レビュー平均：<b>'.$item[reviewAverage].'</b></div>';

echo '<div class="count">レビュー件数：<b>'.$item[reviewCount].'</b></div>';

//店がショップオブイヤーを受賞しているのであれば「ショップオブザイヤー受賞」を表示

if($item[shopOfTheYearFlag] ==0){

echo "";}else{echo '<div class="shop_year">ショップオブザイヤー受賞</div>';}

//ショップ名

echo '<div class="shop_name">'.$item[shopName].'</div>';

echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}

</div>

キーワードでの検索とランキングでの検索の違いは下の部分です。

キーワードでの商品検索　IchibaItemSearch　’keyword‘ => ‘キーワード‘

$response = $client->execute('IchibaItemSearch', array('keyword' => 'キーワード'));

1	$response = $client->execute('IchibaItemSearch', array('keyword' => 'キーワード'));

ランキングでの商品検索　IchibaItemRanking　’genreId‘ => ‘ジャンル番号‘

$response = $client->execute('IchibaItemRanking', array('genreId' => '400616'));

1	$response = $client->execute('IchibaItemRanking', array('genreId' => '400616'));

具体的な使い方【ランキング編】

記事に合うジャンルを表示すると効果的です。もしくはランキング専用の単独ページ、WordPressの場合（固定ページ）にするのもいいかもしれません。

画像

記事内容

スイーツ・お菓子・人気急上昇ランキング

1位

1300円（送料別）

楽天スーパーセール二代目干し芋半生タイプおいもやの干し芋★国産さつまいもをおいもや独自の製法で干しいもに【RCP】干し芋ほしいも静岡冬限定

レビュー平均：4.45

レビュー件数：488

ショップオブザイヤー受賞

おいもや

2位

1080円（送料込）

2015楽天年間ランキング受賞！注目される美容・健康食材クルミスーパーナッツ祭SALE開催中！

レビュー平均：4.48

レビュー件数：2097

ショップオブザイヤー受賞

自然の都【タマチャンショップ】

3位

4536円（送料別）

【クリスマス限定商品】フレーバーティラミス6個セット！6種類の味が楽しめる贅沢な大人のティラミスのセットです【クリスマス・贈り物・ギフト・プレゼント】

レビュー平均：0.0

レビュー件数：0

ティラミスヒーロー

4位

570円（送料別）

楽天スーパーセールおいもやの二代目干し芋半生タイプ大行列！国産さつまいもの干しいも紅キセキのほしいも【RCP】静岡冬限定

レビュー平均：4.6

レビュー件数：583

ショップオブザイヤー受賞

おいもや

5位

2138円（送料込）

2015楽天年間ランキング受賞！注目される美容・健康食材クルミスーパーナッツ祭SALE開催中！

レビュー平均：4.47

レビュー件数：2522

ショップオブザイヤー受賞

自然の都【タマチャンショップ】

6位

3240円（送料込）

送料無料脅威のリピート率豪華5層構造xm1501

レビュー平均：3.8

レビュー件数：15

オーガニックサイバーストア

7位

2571円（送料込）

【ルミナリエ開催記念！おまけ付き＆ポイント10倍】通算43万セット完売の送料無料ワッフルセットクリスマスケーキ/クリスマス/Xmas/お歳暮/ギフト/10P05Dec15

レビュー平均：4.4

レビュー件数：30660

ワッフル・ケーキの店R．L

8位

4298円（送料込）

送料無料(※1)日本ギフト大賞受賞！204週1位★グルメ大賞3年連続受賞豪華7種詰め合わせギフトにぴったり※1北海道・沖縄除く【おためし神戸_送料無料】

レビュー平均：4.51

レビュー件数：8358

神戸フランツ

9位

777円（送料別）

なめらかな口どけ元祖生チョコ！

レビュー平均：4.89

レビュー件数：692

ショップオブザイヤー受賞

北海道お土産探検隊（ギフト通販）

これで楽天API【ランキング編】は完了です。

次は【ショップ別編】です。

楽天API【ショップ別編】　

特定のショップの全商品の中からキーワードで検索し表示します。

設置方法

同様にRakuten Web Service SDK for PHPを使います。

例）ショップを指定して、そのショップの全商品の中からキーワードに沿った商品を3つ(並び順は標準で)表示させます。

デベロッパーID、アフィリエイトID、ショップ名(shopCode)、キーワード、並び順（ソート）、商品数を記述し、適当なファイル名「rakuten-shop.php」をsdkファイルと同じ階層に設置します。

ショップ名は、http://www.rakuten.ne.jp/gold/ショップ名/です。そのショップのURLをご確認ください。

こちらもWordPressの場合、直接記事やテーマファイルに記述するのでファイルを作る必要はありません。

<div class="rserch">
<?php 

require_once 'sdk/autoload.php'; 
$client = new RakutenRws_Client();

//IDを入力

$client->setApplicationId('デベロッパーID');
$client->setAffiliateId('アフィリエイトID');


//ショップ名、キーワード、並び順：標準（standard）

$response = $client->execute('IchibaItemSearch', array('shopCode' => 'ショップ名','keyword' => "キーワード",'sort' => "standard",));


//取得する商品数を3としました。

if ($response->isOk()) {$i = 0; $goods = 3; foreach($response as $item){
if($i >= $goods){break;}echo '<div class="goods1">';


//サムネイルを取得しアフィリエイトリンクを挿入。

if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];
echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}


//店がショップオブイヤーを受賞しているのであれば「ショップオブザイヤー受賞」を表示

if($item[shopOfTheYearFlag] ==0){
echo "";}else{echo '<div class="shop_year">ショップオブザイヤー受賞</div>';}


//ショップ名

echo '<div class="shop_name">'.$item[shopName].'</div>';


echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}

?>
</div>

<?php

require_once 'sdk/autoload.php';

$client = new RakutenRws_Client();

//IDを入力

$client->setApplicationId('デベロッパーID');

$client->setAffiliateId('アフィリエイトID');

//ショップ名、キーワード、並び順：標準（standard）

$response = $client->execute('IchibaItemSearch', array('shopCode' => 'ショップ名','keyword' => "キーワード",'sort' => "standard",));

//取得する商品数を3としました。

if ($response->isOk()) {$i = 0; $goods = 3; foreach($response as $item){

if($i >= $goods){break;}echo '<div class="goods1">';

//サムネイルを取得しアフィリエイトリンクを挿入。

if($item[imageFlag]==1){$ImageUrls = $item[mediumImageUrls][0];$Image = $ImageUrls[imageUrl];

echo '<a href="'.$item[affiliateUrl].'" target="_blank"><img src="'.$Image.'"></a>';}

//店がショップオブイヤーを受賞しているのであれば「ショップオブザイヤー受賞」を表示

if($item[shopOfTheYearFlag] ==0){

echo "";}else{echo '<div class="shop_year">ショップオブザイヤー受賞</div>';}

//ショップ名

echo '<div class="shop_name">'.$item[shopName].'</div>';

echo "</div>";$i++;}} else {echo 'Error:'.$response->getMessage();}

</div>

並び順（sort）

どういう順で商品を表示させたいのかを指定できます。

$response = $client->execute('IchibaItemSearch', array('shopCode' => 'ショップ名','keyword' => "キーワード",'sort' => "standard",));

1	$response = $client->execute('IchibaItemSearch', array('shopCode' => 'ショップ名','keyword' => "キーワード",'sort' => "standard",));

standard
楽天標準ソート順
+affiliateRate
アフィリエイト料率順（昇順）
-affiliateRate
アフィリエイト料率順（降順）
+reviewCount
レビュー件数順（昇順）
-reviewCount
レビュー件数順（降順）
+reviewAverage
レビュー平均順（昇順）
-reviewAverage
レビュー平均順（降順）
+itemPrice
価格順（昇順）
-itemPrice
価格順（降順）
+updateTimestamp
商品更新日時順（昇順）
-updateTimestamp
商品更新日時順（降順）

ショップ別の商品表示(デモ)

ショップは上海問屋、shopCodeは「donya」、キーワードは「microsd 32GB」としました。

上海問屋

これで楽天API【ショップ別編】は完了です。

楽天APIまとめ

商品画像、キャッチコピー、値段、ショップ名、ソートなどなど、とにかく組み合わせ次第でいろんな表示が可能ですが、一つのテンプレートが出来上がれば、入力するのはキーワード、ジャンルID、ショップ名くらいなので、デザインも含めて最初は少し時間がかかるかもしれませんが、そのあとは楽に設置できるかと思います。

CSS（スタイルシート）

今回使用したスタイルシートです。参考程度にどうぞ。

.rserch {
	display: block;
	float: left;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #ECECEC;
	text-shadow:none;
}

.goods1 {
	width: 31%;
	padding: 1%;
	text-shadow:none;
	float: left;
	margin-bottom: 10px;
}

.goods1 a, .ranking1 a{
	font-size: small;
}

.goods1 a img {
	padding: 2px;
	background-color: #666;
}

.shop, .shop2 {
	clear: both;
	display: block;
	margin-right: 1%;
	padding-top: 20px;
	padding-bottom: 20px;
	background-image: url(../../../../images/icons-32x32/open.png);
	background-repeat: no-repeat;
	background-position: left 10px;
	text-indent: 3em;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #ECECEC;
	font-weight: bold;
	font-size: 17px;
}

.shop_rank {
	clear: both;
	display: block;
	padding-top: 20px;
	padding-bottom: 20px;
	background-image: url(../../../../images/ranking02.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 3em;
	font-weight: bold;
	font-size: 24px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	margin-bottom: 20px;
}

.ranking1 a img {
	padding: 20%;
	border: 1px solid #E1E1E1;
	width: 59%;
	background-color: #F7F7F7;
	background-image: url(../../../../images/back/frenchstucco.jpg);
}

@media screen and (max-width: 600px) {
 

.ranking1 a img {
	padding: 5%;
	border: 1px solid #CCC;
	width: 88%;
}

.shop_rank {
	text-indent: 4em;
	font-size: 18px;	
}

}

@media screen and (max-width: 480px) {
	
.textwidget {	
	width: 80%;
    margin: 0 auto;
}

}
.ranking1 {
	font-size: x-small;
	line-height: normal;
	width: 31%;
	padding: 1%;
	text-shadow:none;
	float: left;
	height: 450px;
}

.rank {
	color: #FFF;
	font-size: 14px;
	margin-bottom: 5px;
	font-weight: bold;
	letter-spacing: 2px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	background-color: #666;
	}
    
.shop_name {
	font-size: x-small;
	line-height: normal;
	clear: both;
	display: block;
	color: #333;
	padding: 3px;
	margin-top: 10px;
	margin-bottom: 5px;
	background-image: url(../../../../images/home.png);
	background-repeat: no-repeat;
	background-position: left 3px;
	text-indent: 1.2em;
	}
    
.shop_year {
	color: #FFF;
	background-color: #F90;
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 2px;
	padding-left: 3px;
}

.catch {
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #999;
	margin-bottom: 5px;
	padding: 3px;
}

.average {
	padding-right: 3px;
	padding-left: 3px;
}

.average b {
	color: #C00;
	font-weight: bold;
}

.count {
	padding-right: 3px;
	padding-left: 3px;
	margin-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #999;
	padding-bottom: 5px;
}

.count b{
	color: #039;
	font-weight: bold;
}

.price {
	color: #900;
	font-weight: bold;
	font-size: small;
	padding-left: 3px;
	margin-top: 10px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

.rserch {

display: block;

float: left;

width: 100%;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #ECECEC;

text-shadow:none;

}

.goods1 {

width: 31%;

padding: 1%;

text-shadow:none;

float: left;

margin-bottom: 10px;

}

.goods1 a, .ranking1 a{

font-size: small;

}

.goods1 a img {

padding: 2px;

background-color: #666;

}

.shop, .shop2 {

clear: both;

display: block;

margin-right: 1%;

padding-top: 20px;

padding-bottom: 20px;

background-repeat: no-repeat;

background-position: left 10px;

text-indent: 3em;

border-top-width: 1px;

border-top-style: dashed;

border-top-color: #ECECEC;

font-weight: bold;

font-size: 17px;

}

.shop_rank {

clear: both;

display: block;

padding-top: 20px;

padding-bottom: 20px;

background-repeat: no-repeat;

background-position: left top;

text-indent: 3em;

font-weight: bold;

font-size: 24px;

border-bottom-width: 2px;

border-bottom-style: solid;

border-bottom-color: #999;

margin-bottom: 20px;

}

.ranking1 a img {

padding: 20%;

border: 1px solid #E1E1E1;

width: 59%;

background-color: #F7F7F7;

}

@media screen and (max-width: 600px) {

.ranking1 a img {

padding: 5%;

border: 1px solid #CCC;

width: 88%;

}

.shop_rank {

text-indent: 4em;

font-size: 18px;

}

@media screen and (max-width: 480px) {

.textwidget {

width: 80%;

margin: 0 auto;

}

.ranking1 {

font-size: x-small;

line-height: normal;

width: 31%;

padding: 1%;

text-shadow:none;

float: left;

height: 450px;

}

.rank {

color: #FFF;

font-size: 14px;

margin-bottom: 5px;

font-weight: bold;

letter-spacing: 2px;

padding-top: 5px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 10px;

background-color: #666;

}

.shop_name {

font-size: x-small;

line-height: normal;

clear: both;

display: block;

color: #333;

padding: 3px;

margin-top: 10px;

margin-bottom: 5px;

background-repeat: no-repeat;

background-position: left 3px;

text-indent: 1.2em;

}

.shop_year {

color: #FFF;

background-color: #F90;

padding-top: 2px;

padding-right: 3px;

padding-bottom: 2px;

padding-left: 3px;

}

.catch {

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #999;

margin-bottom: 5px;

padding: 3px;

}

.average {

padding-right: 3px;

padding-left: 3px;

}

.average b {

color: #C00;

font-weight: bold;

}

.count {

padding-right: 3px;

padding-left: 3px;

margin-bottom: 5px;

border-bottom-width: 1px;

border-bottom-style: dashed;

border-bottom-color: #999;

padding-bottom: 5px;

}

.count b{

color: #039;

font-weight: bold;

}

.price {

color: #900;

font-weight: bold;

font-size: small;

padding-left: 3px;

margin-top: 10px;

}

WordPress（投稿記事内）での注意事項

ビジュアルエディタで編集するとソースが消去されるので、記事の画像や文章はある程度ビジュアルエディタで完成させてから、最後にテキストエディタに切り替えて、APIのソースを挿入するという形がベストです。

タグ: アフィリエイト, 楽天API
カテゴリー: WordPress, まとめ

コメントを残すコメントをキャンセル

テーマファイル内でショートコードを使えるようにする

画像やファイルに直リンクさせない

記事に画像を挿入する際のデフォルトのリンク先を変更

ファビコンを表示させる

htaccessのキャッシュ設定でページを高速化表示

スタイルシート、JavaScriptを軽量化

楽天APIで簡単アフィリエイト

楽天API【キーワード編】

下準備

設置方法

具体的な使い方【キーワード編】

楽天API【ランキング編】

設置方法

具体的な使い方【ランキング編】

楽天API【ショップ別編】

設置方法

並び順（sort）

ショップ別の商品表示(デモ)

楽天APIまとめ

CSS（スタイルシート）

WordPress（投稿記事内）での注意事項

コメントを残す コメントをキャンセル

楽天API【ランキング編】　

楽天API【ショップ別編】　

コメントを残すコメントをキャンセル