2024年11月2日 (土曜日)本日の人気記事トップ10
今日は2024年11月2日です。
目次に行く・戻る
メルカリ招待コード: 招待コードをコピー
もうAMP化が騒がれて2年くらいになるのでしょうか・・・。それぞれのテーマによっては標準で対応しているものもありますね。ですが、対応していてもカエレバヨメレバのアフィリエイトコードの変換にはうまくできていないものもあります。そこでAMP化したぺージにおいて表示させる方法です。
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
150,764件の PV
106,751件の PV
75,752件の PV
67,241件の PV
44,954件の PV
40,747件の PV
38,216件の PV
37,259件の PV
36,638件の PV
33,476件の PV
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で大丈夫だと思われます。
表示例としましては以下のような感じになります。
画像が小さいのはご愛嬌でお願い申し上げます。
参考サイト)
あなたにおすすめな関連記事 伝えたいこと 備忘録
日々の朝のルーチンワークのひとつに男性と女性ではそれぞれ女性の場合にはメイクする(化粧する)。男性の場合には髭を剃る(または電気シェーバーで髭剃りをする)とあります。男性でも女性でも髭の濃さは人それぞ…
もっと読む
メンテナンス 不具合 備忘録
いきなり!! Googleさんからタイトルのようなことを言われてしまいました。 「続行するには、以下の数字を入力してください:」 なんだこれは? と…。 何やら検索した数?が多すぎたり?検索の仕方が人…
もっと読む
伝えたいこと 備忘録 時事ネタ
そろそろ、3月も終わってしまいます。 しかし、 日本人の楽しみの1つでもあ桜を見る花見があります。今年も桜が全国で開花し始めています。見頃は、 その土地・地方によって異なると思いますがウェザーニューズ…
もっと読む
伝えたいこと 備忘録 時事ネタ
この新型コロナウイルス感染症によるある意味混乱下になり始めもうすぐ1年が経とうとしています。2020年4月に緊急事態宣言が発出され(首都圏や北海道などの一部エリアから始まり全国に拡大。)そしてまた同じ…
もっと読む
インターネット スマホ 伝えたいこと 備忘録
(アイキャッチ画像はマクロミルサイトのスクリーンショットです。) 私が13年前にとあるメーカーを退社したのと同時くらいに多くの正社員の募集人員があったマクロミルという会社があります。 現在では、インタ…
もっと読む
メンテナンス 伝えたいこと 備忘録 旅行 時事ネタ 車
さてさてもうそろそろ、年末年始の帰省ラッシュ時期に近づいてきました。年に幾度となくこの帰省ラッシュという言葉が踊るのでしょうか。 まずは今回のように年末年始、そして夏のお盆時期の会社が夏休みの時期が大…
もっと読む
おすすめの記事一部広告 Total326
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-AFFINGER4Pro , WordPress , カスタマイズ , 備忘録
目次に戻る
目次に戻る
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
This opt out feature requires JavaScript.
The tracking opt-out feature requires cookies to be enabled.
[…] (2018/11/21)結局、以下のブログ記事を参考にして、functions.phpに手を加えることにしました。 AFFINGER5の場合は親テーマのfunctions-amp.phpを子テーマにコピーした上で、そのコピーに追加記 […]