<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cocoon | BachLoverのブログ</title>
	<atom:link href="https://mrbachlover.com/tag/cocoon/feed/" rel="self" type="application/rss+xml" />
	<link>https://mrbachlover.com</link>
	<description>For Your 100-Year Life.</description>
	<lastBuildDate>Thu, 13 Aug 2026 00:08:27 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.5</generator>

<image>
	<url>https://mrbachlover.com/wp-content/uploads/2020/08/cropped-IMG_1690-1-32x32.jpg</url>
	<title>Cocoon | BachLoverのブログ</title>
	<link>https://mrbachlover.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://websubhub.com/hub"/>
<atom:link rel="self" href="https://mrbachlover.com/tag/cocoon/feed/"/>
	<item>
		<title>ブログのモバイル（AMP)対応を完了。ほぼリーマンの仕事レベルだな。</title>
		<link>https://mrbachlover.com/2022/08/13/blog-amp-pages-correspondence/</link>
		
		<dc:creator><![CDATA[MrBachLover]]></dc:creator>
		<pubDate>Sat, 13 Aug 2022 13:00:27 +0000</pubDate>
				<category><![CDATA[ピアノ]]></category>
		<category><![CDATA[ブログ]]></category>
		<category><![CDATA[Cocoon]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[ブログAMP対応]]></category>
		<guid isPermaLink="false">https://mrbachlover.com/?p=5496</guid>

					<description><![CDATA[ども。MrBachLoverです。6月頃から毎日更新し始めて気合入れれ記事を書いていたら、ブログのアクセスが６月以降1万PV／月を越え始めており、7月は1万4千PV。ちゃんと毎日更新して質の高い記事を書くことはとても大事 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">ども。MrBachLoverです。6月頃から毎日更新し始めて気合入れれ記事を書いていたら、ブログのアクセスが６月以降1万PV／月を越え始めており、7月は1万4千PV。ちゃんと毎日更新して質の高い記事を書くことはとても大事だと実感しています。</p>



<p class="wp-block-paragraph">そこで問題となるのがモバイル対応（AMP（Accelarated Mobile Pages）対応）。『BachLoverのブログ』はモバイル対応していなかったのですが、どうやらモバイル対応したほうが良いらしいのです。</p>



<p class="wp-block-paragraph">という訳で数日前からモバイル対応（AMP対応）に仕掛って、本日午前中に暫定策含めモバイル対応（AMP対応）を完了しましたので記事にしておこうと思います。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-12 sbs-line sbp-l sbis-cn cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://mrbachlover.com/wp-content/uploads/2020/10/97B27885-4992-4DDC-8A74-A1393AA077D2.jpeg" alt="レモンちゃん" class="speech-icon-image"/></figure><div class="speech-name">レモンちゃん</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">Wordespress ＋ Cocoon のテーマならモバイル対応は数クリックで出来ちゃうはずだよ。何がそんなに大変だったの？？？</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-line sbp-r sbis-cn cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://mrbachlover.com/wp-content/uploads/2020/10/D33FD787-EFF1-4F01-99A1-77A64900399C.jpeg" alt="わたくし" class="speech-icon-image"/></figure><div class="speech-name">わたくし</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">レモンちゃん、世の中そんなに甘く無いんだよ。<br>一杯ドツボにハマりまくったんだから。モーーー。<br>BachLover、牛になった気分。</p>
</div></div>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">事の発端：AMP対応のプラグインでハマる</a></li><li><a href="#toc2" tabindex="0">ドつぼ：サチコのAMPエラー対応</a></li><li><a href="#toc3" tabindex="0">ドつぼ：Safari でCSS（スタイルシート）が読み込まれない</a></li><li><a href="#toc4" tabindex="0">ドツボ：『かんたんリンク』はAMP非対応</a></li><li><a href="#toc5" tabindex="0">一旦のAMPの対応の完了ではあるが…</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">事の発端：AMP対応のプラグインでハマる</span></h2>



<p class="wp-block-paragraph">WordPressのプラグインにAMP対応用の物があり、それをインストールしたところ、<br>サッパリ上手くAMPが表示されません</p>



<p class="wp-block-paragraph">どう上手く表示されないかと言うと、スタイルシートが全然効かない。<br>だから、</p>



<p class="wp-block-paragraph">画像がドデカくなったり、<br>文字が米粒のように小さくなったり、<br>さらに、吹き出しが変。<br>顔写真やレモンちゃんの写真がダブって見える。</p>



<p class="wp-block-paragraph">ほぼ、お化け屋敷級ですなー。</p>



<p class="wp-block-paragraph">ググって調べたら、Cocoonのテーマ（わたくしが使ってるテーマ）は<br>AMPにかんたんに対応出来るのだとか。</p>



<p class="wp-block-paragraph">という訳で、テーマの設定シート「AMP]のタブで<br>AMP（Acceralated Mobile Pages）を有効にしてみたところ、</p>



<p class="wp-block-paragraph">へー。問題なし。</p>



<p class="wp-block-paragraph">でもって、対応完了かと思いきや、</p>



<p class="wp-block-paragraph">サチコ（Google Serch Console）にエラーを指摘される<br>Safari でCSS（スタイルシート）が読み込まれない<br>もしもアフィリエイトのかんたんリンクがAMP対応していない</p>



<p class="wp-block-paragraph">の問題が発生。</p>



<h2 class="wp-block-heading"><span id="toc2">ドつぼ：サチコのAMPエラー対応</span></h2>



<p class="wp-block-paragraph">サチコのエラー指摘は5種類ぐらいあり、<br>それぞれ、地味にページをソースコードレベルで編集して<br>タグの属性追加やら、色々な手当をしました</p>



<p class="wp-block-paragraph">まあ、要するにCocoon のテーマは無料テーマという訳でAMPに<br>完全対応はしていないのですヨ。</p>



<p class="wp-block-paragraph">だから無料なのかも。</p>



<p class="wp-block-paragraph">こんなことならちゃんとサポートを受けられる<br>有料テーマにしておけばよかった。（汗）</p>



<p class="wp-block-paragraph">ですが、後の祭り。</p>



<p class="wp-block-paragraph">一通り修正して再度検証を依頼しており、現在、検証待ち。<br>ザーッと、この対応で6時間ぐらい使いましたね</p>



<h2 class="wp-block-heading"><span id="toc3">ドつぼ：Safari でCSS（スタイルシート）が読み込まれない</span></h2>



<p class="wp-block-paragraph">ChromeでAMP対応ページが綺麗に表示できたので<br>めでたしメデタシと思っていたところ、</p>



<p class="wp-block-paragraph">ん？？？ SafariでAMPのページを表示すると崩れる。</p>



<p class="wp-block-paragraph">なんでぇ？？？？</p>



<p class="wp-block-paragraph">色々調べてると、どうやらキャッシュ関連のプラグインで<br>CSSを圧縮したりJS(ジャバスクリプト)の流し込みの仕方を変えたり<br>してたのが問題だった模様。</p>



<p class="wp-block-paragraph">そうそう、吹き出し画像が2個表示されちゃった件も<br>キャッシュの設定変えたら解決しました<br>（画像の遅延読み込みをOffにした）</p>



<p class="wp-block-paragraph">この対応も1−2時間掛かりました</p>



<h2 class="wp-block-heading"><span id="toc4">ドツボ：『かんたんリンク』はAMP非対応</span></h2>



<p class="wp-block-paragraph">もしもアフィリエイトの『かんたんリンク』は<br>AMP対応非対応である事が判明。</p>



<p class="wp-block-paragraph">これ放置すると物販収入がゼロになる訳で、<br>かなりマズイかも。</p>



<p class="wp-block-paragraph">暫定対応として「かんたんリンク」があるページは<br>全てAMP対応対象外に設定。<br>（※ページ毎にAMPを作るか作らないかの設定ができる）</p>



<p class="wp-block-paragraph">後日、全部の『かんたんリンク』を<br>手作業でAMP対応しているリンクに<br>切り替えていく予定。</p>



<p class="wp-block-paragraph">だけど、コレは時間が掛かる。</p>



<p class="wp-block-paragraph">10個／週 とかで見直ししようと思っています</p>



<p class="wp-block-paragraph">この恒久対応は年内、下手すると正月一杯まで掛かりそうです</p>



<h2 class="wp-block-heading"><span id="toc5">一旦のAMPの対応の完了ではあるが…</span></h2>



<p class="wp-block-paragraph">という訳で、一連のAMPの対応活動により<br>『BachLoverのブログ』は一応,AMP対応できたと<br>いえなくもないのだが、</p>



<p class="wp-block-paragraph">【宿題】もしもアフィリエイトのかんたんリンクの総見直し</p>



<p class="wp-block-paragraph">というかなり思いお仕事が残っている。</p>



<p class="wp-block-paragraph">対応の筋道はググってほぼ調査済みではあるが、<br>いかんせん、<span class="bold-green">元気</span>が必要だ。</p>



<p class="wp-block-paragraph">このAMP対応、マジでリーマンにお仕事級ですな。WWWwww-</p>



<p class="wp-block-paragraph">ではでは〜</p>



<p class="wp-block-paragraph"><br></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
