AFFINGER5でカエレバのAMP対応をする方法(サンプルコード有)

amazonや楽天市場などの商品紹介サイトを運営する中で、カエレバの存在は大きいと思います。
しかし、カエレバのコードはそのままではAMPに対応していないため、手直しが必要となってきます。

ぼくはAFFINGER5を使っているのですが、AFFINGER5でカエレバのAMP対応をした記事が見つからなかったので、ぼくが実際に実践したコードを紹介したいと思います。
参考にしてください。

カエレバとは

カエレバはAmazon、楽天市場、Yahoo!ショッピングなどの複数のアフィリエイトリンクを、簡単に設置できる無料ツールです。

カエレバで商品を検索し、自動でコードを生成してくれるため、そのコードをそのままブログに貼り付ければいいため、非常に使い勝手がいいです。

しかし、そのままではビジュアルがすぐれないため、僕は以下のCSSを組み込んでいます。

/* ************************************* */
/* カエレバ、ヨメレバ、トマレバ */
/* ************************************* */
/* 基本style */
.kaerebalink-box,
.booklink-box,
.tomarebalink-box{
border: 3px double #ccc;
padding: 3%;
margin: 1em 0 2.5em;
overflow: hidden;
font-size: small;
}
.kaerebalink-box a,
.booklink-box a,
.tomarebalink-box a{
text-decoration: none;
color: initial;
}
.kaerebalink-box a[target="_blank"]::after,
.booklink-box a[target="_blank"]::after,
.tomarebalink-box a[target="_blank"]::after{
content: none;
}
.kaerebalink-image,
.booklink-image,
.tomarebalink-image{
max-width: 150px;
text-align: center;
margin: 10px auto!important;
float: none!important;
}
.kaerebalink-name,
.booklink-name,
.tomarebalink-name{
font-weight: bold;
font-size: 120%;
line-height: 1.8!important;
margin-bottom: 10px!important;
}
.kaerebalink-name p:empty,
.booklink-name p:empty,
.tomarebalink-name p:empty{
display: none;
}
.kaerebalink-powered-date,
.booklink-powered-date,
.tomarebalink-powered-date,
.kaerebalink-detail,
.booklink-detail,
.tomarebalink-address{
font-size: 10px!important;
font-weight: normal;
}
.kaerebalink-link1,
.booklink-link2,
.tomarebalink-link1{
overflow: hidden;
}
.kaerebalink-link1 div,
.booklink-link2 div,
.tomarebalink-link1 div{
background-image: none!important;
margin: 0!important;
padding: 3px!important;
display: inline-block!important;
width: 48.5%;
}
.kaerebalink-link1 div a,
.booklink-link2 div a,
.tomarebalink-link1 div a{
border-width: 2px;
border-style: solid;
font-size: 90%;
font-weight: bold;
border-radius: 5px;
padding: 0.7em 0em;
width: 100%;
text-align: center;
display: block;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.kaerebalink-link1 div a:hover,
.booklink-link2 div a:hover,
.tomarebalink-link1 div a:hover{
color: #fff;
box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.15);
transform:translate(-1px, -2px);
}
.kaerebalink-link1 div a:active,
.booklink-link2 div a:active,
.tomarebalink-link1 div a:active{
transform:translate(0, 1px);
}
.kaerebalink-link1 div img,
.booklink-link2 div img,
.tomarebalink-link1 div img{
display: none;
}

/* 画面幅768px以上の場合のstyle */
@media only screen and (min-width: 768px) {
.kaerebalink-image,
.booklink-image,
.tomarebalink-image{
float: left!important;
margin: 0 1.5em 0.5em 0!important;
}
.kaerebalink-link1 div,
.booklink-link2 div,
.tomarebalink-link1 div{
width: 11em;
}
}

CSSは追加CSSの項目に入力しています。

「外観」→「カスタマイズ」→「追加CSS」

先程のCSSをコピペすれば、以下の様な商品紹介が表示されます。

《新品》SONY (ソニー) α7III ボディ ILCE-7M3[ ミラーレス一眼カメラ | デジタル一眼カメラ | デジタルカメラ ] 【KK9N0D18P】

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

AMPとは

AMPとはAccelerated Mobile Pagesの略で、その名の通りモバイル端末向けの高速表示可能なHTMLページのことです。

関連付けされた動画は非表示になり、表示も簡易的になります。
徹底的に表示速度を高速化したものがAMPになります。

カエレバはそのままではAMP対応していない

冒頭でも述べた通り、カエレバはそのままではAMP表示できません。
Google Search Console上でエラーとして出力されてしまいます。

また、デザインの崩れが出てきてしまいます。

この後、Google Search Consoleのエラーを回避する方法と、デザインを正す方法を記載いたします。

AFFINGER5でカエレバをAMP対応する方法

「AFFINGER5で」と記載しましたが、AFFINGER5での手順を書くだけですので、どのWordpressのテーマでも行けると思います。
AFFINGER5以外の方も参考にしてください。

カエレバで生成されたコードの一部を手修正する

Google Search Consoleでエラー表示されるのは「amp-img」タグに画像サイズ(widthとheight)が指定されていないからです。

そのため、カエレバで出力されたコードの一部にwidthとheightを追加すればOKです。
実際に追加する前のコードの一部と追加後のコードの一部を記載します。
先程の商品のコードから対象の部分を抜き出します。

まずは修正前。

<img src="https://thumbnail.image.rakuten.co.jp/@0_mall/mapcamera/cabinet/new_070/4548736079625_1.jpg?_ex=128x128" style="border: none;" />

対象のコードは「ex=サイズxサイズ」という記載があります。
ぼくはカエレバの「画像小」を選んでいるため、ex=128x128と表示されています。

このコードを以下の様に書き換えてください。

<img src="https://thumbnail.image.rakuten.co.jp/@0_mall/mapcamera/cabinet/new_070/4548736079625_1.jpg?_ex=128x128" width="128" height="128" style="border: none;" />

width="128" height="128"を追加しただけです。
ここの数字が実際の画像表示に影響するため、商品ごとに数字を決めてプレビューしながら調整してください。

カエレバでAMP用のデザインを整える

上記の対応でAMPのエラーが消えたぞ！と思っても油断は禁物です。

実際のAMP表示を確認してみてください。
※AFFINGER5の場合はURLの最後に「/amp/」と入れるとAMP表示を確認できます

おそらく、画像が画面幅いっぱいに広がり、とても読めたものではないと思います。
こんなことならAMP対応するんじゃなかった…と思えるレベルですよね。

でも大丈夫。以下のコードを適切な箇所に入れ、カエレバのコードもちょっと修正すればきれいな表示になりますよ！

テーマエディターを修正する

AFFINGER5を使用している方は、「外観」→「テーマエディター」→「編集するテーマを選択」から「WING-AFFINGER5」(親テーマ)を選択。
その後、「functions-amp.php」を選択してください。
※必ずampの入ったファイルを選択してください

AFFINGER5以外の方はAMP用のfunctions.phpを探して開いてください。

注意

functions.phpは表示に影響を与えるファイルです。
バックアップを取るなどして、何かあった時にもとに戻せるようにしてください。

開いたphpの最下部に以下のコードをコピペしてください。

function convert_content_for_amp($amp_the_content){
if ( is_single() ) {//投稿ページ

//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/ecx.images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://ecx.images-amazon.com', $amp_the_content);
//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する（SSL用）
$amp_the_content = preg_replace('/ src="(https:)?\/\/images-fe.ssl-images-amazon.com/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://images-fe.ssl-images-amazon.com', $amp_the_content);
// //カエレバ・ヨメレバの楽天商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://thumbnail.image.rakuten.co.jp', $amp_the_content);
// //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(http:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="http://item.shopping.c.yimg.jp', $amp_the_content);

//アプリーチの画像対応
$amp_the_content = preg_replace('/<img([^>]+?src="[^"]+?(mzstatic\.com|phobos\.apple\.com|googleusercontent\.com|ggpht\.com)[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img>', $amp_the_content);
$amp_the_content = preg_replace('/<img([^>]+?src="[^"]+?nabettu\.github\.io[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="120" height="36" sizes="(max-width: 120px) 100vw, 120px"></amp-img>', $amp_the_content);

}
return $amp_the_content;
}
add_filter('amp_the_content','convert_content_for_amp', 999999999);

AMP用CSSにコードを追加する

続いてAMP用のCSSにコードを追加します。

AFFINGER5の場合は、「AFFINGER5管理」→「AFFINGER5管理」から管理画面へ遷移し、「Google・広告/AMP」タブを選択して、最下部の「AMP対応」の「AMPに追加するCSS」に以下のコードをコピペしてください。

AFFINGER5以外の方はAMP用のCSSファイルを開き、以下のコードをコピペしてください。

/************************************
** カエレバ・ヨメレバ
************************************/
.booklink-box,
.kaerebalink-box,
.pochireba {
  border: medium double #ccc;
  border-radius: 5px;
  font-size: small;
  margin: 20px auto;
  overflow: hidden;
  padding: 25px 25px 18px;
}

.kaerebalink-image,
.booklink-image{
  width: 85px;
  float: left;
  margin-top: 4px;
}

.kaerebalink-link1 amp-img{
  display: none;
}

.booklink-name,
.kaerebalink-name {
  font-size: 16px;
  line-height: 1.3em;
}

.kaerebalink-powered-date,
.booklink-powered-date{
  font-size: small;
}

.kaerebalink-link1 div,
.booklink-link2 div {
  background: #ffffff linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%) repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  float: left;
  font-size: 12px;
  font-weight: 800;
  margin: 7px auto;
  padding: 10px 1px;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 1px #dcdcdc;
  width: 100%;
}

.kaerebalink-link1 div:hover,
.booklink-link2 div:hover {
    background: #f6f6f6 linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%) repeat scroll 0 0;
}

.kaerebalink-link1 div a,
.booklink-link2 div a{
  text-decoration: none;
}

.booklink-footer {
    clear: left;
}
.shoplinkamazon a {
    color: #ff9901;
}
.shoplinkrakuten a {
    color: #c20004;
}
.shoplinkkindle a {
    color: #007dcd;
}
.shoplinkkakakucom a {
    color: #314995;
}
.shoplinkyahoo a {
    color: #7b0099;
}
.shoplinkseven a {
    color: #000;
}
.shoplinkehon a {
    color: #0086cd;
}
.shoplinkkino a {
    color: #004097;
}
.shoplinkjun a {
    color: #1c2c5e;
}
.shoplinktoshokan a {
    color: #27b5e9;
}
.shoplinkpsstore a {
    color: #003791;
}

/************************************
** BabyLink
************************************/
.babylink-box{
  overflow: hidden;
  font-size: small;
  zoom: 1;
  margin: 1em 0;
  text-align: left;
  border: medium double #ccc;
  border-radius: 4px;
  padding: 10px;
}
.babylink-image{
  float: left;
  margin: 0px 15px 10px 0px;
  width: 75px;
  height: 75px;
  text-align: center;
}
.babylink-image img{
  border-top: medium none;
  border-right: medium none;
  border-bottom: medium none;
  border-left: medium none;
}
.babylink-info{
  overflow: hidden;
  zoom: 1;
  line-height: 120%;
}
.babylink-title{
  margin-bottom: 2px;
  line-height: 120%;
}
.babylink-manufacturer{
  margin-bottom: 5px;
}
.babylink-description{
  margin-top: 7px;
}

カエレバのコードの一部を削除する

最後にちょっとひと手間。

上記まで対応するとAMP表示できれいなデザインが表示されます！
と言いたいところですが、カエレバの出力コードに一部ゴミが混ざっており、これがAMP表示時のビジュアルに影響します。

そのゴミというのが、楽天のロゴマーク。
カエレバの表示に登場しないロゴマークが幅高1で存在している様なのです。
これを削除しましょう。

削除する箇所は2か所。
「height="1" width="1"」で検索すると何か所か見つかると思いますが、
①最初にwidthとheightの属性を追加した直後のimgタグ(検索1番目)
②商品名の後に登場するimgタグ(検索2番目)
③「楽天市場」や「Amazon」の後ろにあるimgタグ
を削除してください。

ぶっちゃけ、「height="1" width="1"」で検索してヒットしたすべてのimgタグを削除しても問題ないと思います。

試しに当ページのAMP表示画面をご確認ください。

AMP化のメリットを生かせるサイト作りを心掛ける

当サイトもAMP化していることで閲覧数が増えてきています。
AMP化の恩恵を授かっているのは間違いありません。

ですが、AMP化することによる弊害もあるのは確か。
ビジュアルが崩れてしまい、せっかく努力して作り上げた内容を読んでもらえないのでは本末転倒。

せっかくAMPで高速表示する仕組みがあるので、有効活用できるように努力しましょう！

: AFFINGER5でカエレバのAMP対応をする方法(サンプルコード有)

amazonや楽天市場などの商品紹介サイトを運営する中で、カエレバの存在は大きいと思います。しかし、カエレバのコードはそ ...

: AFFINGER5 EX版とスタンダード版の違いを実際に使って解説

2019年11月某日。ぼくはこのサイトを立ち上げました。当時はWordpressのことも良くわかってなかったし、なんと ...

: 【EWWW Image Optimizer】WordPressで最初に入れたい無料プラグイン

WordPressを使って多くのコンテンツを投稿すると、自然と扱う画像の枚数も増えていきます。画像ファイルはサイトの表 ...

: 【Autoptimize】WordPressで最初に入れたい無料プラグイン

当サイトではブログ作成にAFFINGER5(アフィンガー)を推奨していますが、実際にAFFINGER5(アフィンガー)を ...

: AFFINGER5とTHE THORを徹底比較！圧倒的な差が出た！？

アフィリエイトに特化したAFFINGER5(アフィンガー)とSEOに特化したTHE THOR(ザ・トール)。ブログ作成 ...

: 【初心者向け】WordPressでブログ(アフィリエイト)を始める方法

はじめに某有名YouTuberが「走り始めはアフィリエイトだった」と公言し、アフィリエイトのブームが到来しましたね。 ...