Loading…

AFFINGER4Pro WordPress カスタマイズ 備忘録

AMP化したページでカエレバ・ヨメレバ・アプリーチを表示する方法

AMP画像

所要時間目安:5

This session is using  IPv4  is established in

この記事は2018年7月20日のものです。現在は状況が異なる可能性がありますのでご注意ください。

AFFINGER4Pro WordPress カスタマイズ 備忘録

目次に行く・戻る

メルカリ招待コード:

もうAMP化が騒がれて2年くらいになるのでしょうか・・・。それぞれのテーマによっては標準で対応しているものもありますね。ですが、対応していてもカエレバヨメレバのアフィリエイトコードの変換にはうまくできていないものもあります。そこでAMP化したぺージにおいて表示させる方法です。

アドセンス336pxPC閲覧記事下表示1つ目コード


この記事を読む方へのオススメ


AMP化したページでカエレバヨメレバを表示させる具体的な方法です。

注意)

functions.phpをいじるので必ずバックアップしてからにしてください。

結論から記述します。

以下のコードをAMP用のfunctions.phpが別にある場合はその子テーマに追加で記述します。

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

//カエレバ・ヨメレバのAmazon商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(https:)?\/\/ecx.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);
//カエレバ・ヨメレバの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="(https:)?\/\/thumbnail.image.rakuten.co.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="//thumbnail.image.rakuten.co.jp', $amp_the_content);
// //カエレバ・ヨメレバのYahoo!ショッピング商品画像にwidthとhightを追加する
$amp_the_content = preg_replace('/ src="(https:)?\/\/item.shopping.c.yimg.jp/i', ' width="75" height="75" sizes="(max-width: 75px) 100vw, 75px" src="https://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化したページでカエレバヨメレバのアフィリエイトが表示されるようになります。

まとめです。

そのことにより、
せっかくAMP化したページがあってカエレバヨメレバのアフィリエイトができないということがなくなると思われます。

上記の変換(Convert)のみですと表示におそらく乱れが出ると思われますので、各々でCSSにおいて調整してください。

参考に私の一般的なAMP化したページにおいてカエレバヨメレバのCSSも記載しておきます。

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_the_content

の部分はご自分が使用しているテーマに合わせて変えてください。

一般的には、$the_contentで大丈夫だと思われます。

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめの記事一部広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

あなたにおすすめ

熊本県熊本地方震度7地震

伝えたいこと 備忘録 時事ネタ

安否情報確認方法、熊本県熊本地方で震度7地震について

本日、(日付が変わってしまったので昨日)21:26分頃に熊本県にて震度7という大きな地震がありました。まだ、時間も経っていなくさらに夜で暗いということもあって、 正確な被害情報は全ては収集できていない…

もっと読む

インフィード広告アドセンス

AFFINGER4投稿テキストエディタ

AFFINGER4Pro WordPress カスタマイズ 伝えたいこと 備忘録

AFFINGER4で初投稿とその機能豊富さを紹介しきれない…。

ふうε=(・ρ・*) フゥ、この度、やっとこさ~の思いでテーマをAFFINGER4に変更しました。 以前のSTINGER6で結構な割り合いでカスタマイズしまくっていたので、簡単にテーマの変更がなかなか…

もっと読む

インフィード広告アドセンス

伝えたいこと 備忘録 時事ネタ

米FTCアマゾンを独禁法違反疑いで提訴と日立家電品正規取扱店制度

具体的には、アマゾンが主力事業のネット通販で出店している小規模事業者に対して高額な手数料を請求したほか、事業者が他の競合サイトで安く販売した場合、アマゾンのサイトでは検索しづらくしたなどと指摘していま…

もっと読む

インフィード広告アドセンス

20周年サイトとBIGLOBE30周年記念サイト

PC インターネット 伝えたいこと 備忘録 時事ネタ

20周年記念サイトの続集編

先日、 20周年記念サイトや30周年記念のBIGLOBE(前進企業から数えて)の紹介をしました。 その続きとなります。 これらの他にも未知のサイトや企業など多くあるかもしれませんが、 現在、知りうる限…

もっと読む

インフィード広告アドセンス

Pixlr(ピクセラ)

PC ツール ブラウザChrome 伝えたいこと 備忘録

無料おすすめな画像編集オンラインソフトPixlr(ピクセラ)がすごいっ

画像編集ソフトと言えばフォトショップ(Photoshop)が超メジャーなアプリケーションかと思われます。他にもオススメとしてはGIMPや名前は今回紹介するタイトルと同じですが、ちょっと違うたしかピクセ…

もっと読む

インフィード広告アドセンス

googleカラーコード検索結果カラーピッカー

インターネット カスタマイズ カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ

カラーコード検索をGoogleで簡単に確認する方法

ホームページやブログなどサイトのデザインには画像はもちろんですが、 その他にCSSやHTML(HTML5も含む)で色の付け方?などでカラーコードと呼ばれるものを使用すると思います。 (他にもRGBなど…

もっと読む

Total235


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-AFFINGER4Pro, WordPress, カスタマイズ, 備忘録

目次に戻る

目次に戻る


コメントを閉じる
  1. […] (2018/11/21)結局、以下のブログ記事を参考にして、functions.phpに手を加えることにしました。 AFFINGER5の場合は親テーマのfunctions-amp.phpを子テーマにコピーした上で、そのコピーに追加記 […]

App StoreとGoogle PlayのダウンロードバナーをAMP化するのに苦労した話【備忘録】 - メンタルバランスカフェ-ゆーじあむ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください