ワードプレステーマcocoonでスキンを使うときにはAMPに注意

WordPress

このドジをしたのは、確か1月下旬か2月の初旬頃だったのだと思う。

ワードプレスCocoonを更新するときに、間違えて親テーマを有効化してしまった!子テーマを使って設定したのに親テーマを有効化すると、どうなるかご存知かとは思いますが…

テーマの更新で親テーマを更新して有効化すると、子テーマのCocoonで細か〜く設定した内容が、真っ白に上書きされてしまうんです。

ままん
ままん

Cocoonの更新で消えた子テーマの件は「なかったこと」にしてしまおう!そうだ!手っ取り早くスキンを利用してデザイン変更をしてしまおう。という成り行きがありました。

スポンサーリンク

スキンを使うときにはAMPバイトサイズに注意

テーマの更新をするときには、親テーマを更新すると子テーマが親テーマバージョンアップを引き継いでくれます。

子テーマに追加のCSSを書き込んでいなければ、そのまま親テーマを更新しても大丈夫なはず。子テーマのファイルにCSSの追加がしてある場合は、ファイルをバックアップしておきます。

ままん
ままん

私のように、うっかり親テーマを有効化してしまうようなドジもあるっていうわけで、何かするときにはバックアップしておくのが、本来の手順なんです…

Cocoon アップデートで消えた子テーマ設定のやり直し

はい、設定の全てをやり直しました。

コクーン設定には「デフォルト」という、職業レベルのスキルのないアマチュアにとっては、とても都合のいい設定があります。

個人的な小さな自己管理のサイトなら、デザイン要素の大概のことはデフォルトでOKなんだと思います。

いちばんショックだったのは、広告の設定が消えたこと。

「広告」と「API」これだけは大事!「広告」と「API」の設定タブだけは、コピーでメモ帳でも、スクショでも何でもいいから今すぐキッチリ「自分の宝物フォルダ」に置いておくことを、ドジった教訓としてお伝えします。

サーチコンソールからの警告は突然に!

消えたCocoon設定は、取り急ぎ「広告」と「API」を復活させて、あとはザックリで「まっいいか…」と、デザインはスキンにお任せしました。

そのまま何事もない日々を送っていたのです。

すると2月の終わりごろ、AMPにクロールエラーの警告が!

製作者のスタイルシート? わいひらさんのこと?

おかしいぞっ?!ってわけで原因究明です。

スタイルシートが長すぎる原因が分かったところで、自分では対処できないCSS…

たぶん、コクーンの設定をスキンに変更した日に、この記事を投稿したんだと考えられる。いや、それしか思い当たらない…

いちばん最初にcocoonコクーンを設定したときに、重たいスキンのときには「どーのこーの」って、確かどこかに書いてあったはずなんだけど…

ままん
ままん

AMPタブにたどり着くまでに、けっこう悩んだんです。「私の何がいけないの?」

はい!コクーン設定のAMPのタブに、書いてありました。

凝ったスタイルのスキンを利用していると、AMPのCSSサイズ上限(50KB)を超えてしまう可能性があります。スキンを適用したことにより、AMPエラーが続出した場合は、AMPページでスキンを適用しないことにより、CSSのサイズを減らします。

はい!サーチコンソールの警告は困ります。
というか不安、ご迷惑をおかけしてしまいましたって気分のドキドキ…

【 □スキンスタイルを有効にする 】チェックを外しました。

WEBサイトをスマホで見る機会が多くなった今、サイトデザインを簡素化する必要があるということですね。

サーチコンソールに、修正を検証してもらうためには

【 □スキンスタイルを有効にする 】チェックを外したので、サーチコンソールで検証をしていただくことに…

すると、こんな画面が!

検証プロセスを続行できません
該当ページが見つかりました。問題を修正し、もう一度検証してください

とは?

コクーン設定の【 □スキンスタイルを有効にする 】チェックを外したのに、なぜなの?私の何がいけないっていうの?

  • 該当ページにAMPの警告が出たのは、2月下旬だった…
  • 該当ページを投稿したのは、1月下旬だった…
  • さちこさんは、該当ページは見つかったよって言ってる
  • でも、問題を修正してねって言ってる…

はぁ?コクーン設定を更新したよ。放置しておけば、そのうち許してくれるの?「もう一度検証してください」ってどういうことなんだ…

私の知識の中で残された道は、2月初旬に書いた記事を「更新」するしか思いつかない。記事の内容には手をつけず、1月下旬に投稿した記事を更新してみた。

「修正したようですね、それでは検証を始めてみましょう」って、サーチコンソールさんの許可が出たみたいなこの画面。

しばらくすると、この画面は消えます。と同時くらいに、「検証していますから待っててね」という感じのいつものメールが届きます。

Google Search Consoleからのメールは、「検証するから待っててね。終わったらちゃんとお知らせするからね」と書いてあるんです。

「サーチコンソールさん、気長に待ってますからまた教えてね。」という心持ちでいましょう。

まとめ

今回は、WordPress 無料テーマ Cocoon スキンを使うときには、サーチコンソールのAMPに気をつけようということで書いてみました。

スキンを利用してサーチコンソールにAMP警告が出た場合は、修正しないとスマホで見るときに見てくれた人が困るんだよってことですね。

タグ「style amp-custom」で指定された作者のスタイルシートが長すぎます上限は50000バイトです。

<style amp-custom>ここが長すぎて50000バイトを超えているよ</style>

Cocoon設定は、AMPタブのチェックを外すだけで修正できる

スキンに記述してある<style amp-custom>ここが長すぎて50000バイトを超えているよ</style>の部分を取り除くことができるという、なんと素晴らしいWordPressテーマCocoon!

Cocoon設定でチェックを外したら、外したことを読み込んでもらうために記事を更新してみました。

これであとは気長に待つだけ。以前にも別の件でしたが2週間くらいは待ちました。

WordPressで作ったサイトを自分で管理するためには、 最低限でも「HTML」「CSS」「PHP」とはどういうものなのかを理解している必要があるのですよね。

20年以上前のHTML時代、HTML構文の禁止タグというのが出てきた頃を思い出します。

まだ初代HTMLで、画面上で文字が流れたり光ったり、蝶々やUFOが飛んでいたり…
今では禁止タグって?という感じでしょうが、HTMLの記述が長すぎて通信が重くなってパソコンの画面の表示待ちがよくあったんです。

本当に昔は、負担のかかる命令タグでサーバーがダウンなんてこともあったんですよね!

そして「デザインはCSSでしましょうね」ってなりました。今、その頃の状況と同じように、スマホの端末なんだから装飾は軽くしてねっていうイメージなんだなぁと思います。

50代って「WWW30年」の歴史の中を、大人になってから生きてきた世代なんですよね。

歴史を思い返すと、現在にふさわしいユーザビリティーでサイトを作っていこうねって意味が、はっきり分かってくるようです。

今回、AMPスタイルシートが重くて警告の件を経験して、サーチコンソールの検証結果を見ながら、Cocoon設定の外感を見直していこうと思いました。

どんな原因で何がいけないのかが分かると、自力で修正できなくても気持ちにゆとりが生まれることは確かだと思います。

CSSの知識を少しでも得るために、手元に本を置いておくこともオススメします。

入門書なので読んでいるだけで、手探りの理解に安心感が得られます。

 

 

 

 

コメント

タイトルとURLをコピーしました