このドジをしたのは、確か初めての『Cocoonの更新』だったのだという記憶。
ワードプレスCocoonを更新するときに、間違えて親テーマを有効化してしまったのです！
子テーマを使って設定したのに親テーマを有効化すると、どうなるかご存知かとは思いますが…
テーマの更新で親テーマを更新して有効化すると、子テーマのCocoonで細か〜く設定した内容が、真っ白に上書きされてしまうんですね。
Cocoonの更新で消えた子テーマの件は「なかったこと」にしてしまおう！そうだ！手っ取り早くスキンを利用してデザイン変更をしてしまおう。という成り行きがありました。
スキンを使うときにはAMPバイトサイズに注意
テーマの更新をするときには、親テーマを更新すると子テーマが親テーマのバージョンアップを引き継いでくれます。
私のように、うっかり親テーマを有効化してしまうようなドジもあるっていうわけで、何かするときにはバックアップしておくのが、本来の手順なんですね…
Cocoon アップデートで消えた子テーマ設定のやり直し
というわけでCocoon設定の全てをやり直しました。
コクーン設定には「デフォルト」や「スキンの設定」という、職業レベルのスキルのないアマチュアにとっては、とても都合のいい設定があります。
個人的な小さな自己管理のサイトなら、デザイン要素の大概のことはデフォルトでOK だと思います。
いちばんショックだったのは、広告の設定が消えたこと。
「広告」と「API」これだけは大事！
「広告」と「API」の設定タブだけは、コピーでメモ帳でも、スクショでも何でもいいから今すぐキッチリ「自分の宝物フォルダ」に置いておくことを、教訓としてお伝えします。
サーチコンソールからの警告は突然に！
消えたCocoon設定は、取り急ぎ「広告」と「API」を復活させて、あとはザックリで「まっいいか…」と、デザインはスキンにお任せしました。
そのまま何事もない日々を送っていたのです。
すると２月の終わりごろ、AMPにクロールエラーの警告が！
製作者のスタイルシート？？
おかしいぞっ？！ってわけで原因究明です。
スタイルシートが長すぎる原因が分かったところで、自分では対処できないCSS…
たぶん、コクーンの設定をスキンに変更した日に、この記事を投稿したのだと考えられる。いや、それしか思い当たらない…
いちばん最初にcocoonコクーンを設定したときに、重たいスキンのときには「どーのこーの」って、確かどこかに書いてあったはずなんだけど…
AMPタブにたどり着くまでに、けっこう悩んだんです。「私の何がいけないの？」
はい！コクーン設定のAMPのタブに、書いてありました。
凝ったスタイルのスキンを利用していると、AMPのCSSサイズ上限（50KB）を超えてしまう可能性があります。スキンを適用したことにより、AMPエラーが続出した場合は、AMPページでスキンを適用しないことにより、CSSのサイズを減らします。
サーチコンソールの警告は困ります。
というか不安、「ご迷惑をおかけしてしまいました」って気分のドキドキに襲われます…
なので、取り急ぎ【 □スキンスタイルを有効にする 】チェックを外しました。
WEBサイトをスマホで見る機会が多くなった今、サイトデザインを簡素化する必要があるということですね。
サーチコンソールに、修正を検証してもらうためには
【 □スキンスタイルを有効にする 】チェックを外したので、サーチコンソールで検証をしていただくことに…
すると、こんな画面が！
検証プロセスを続行できません
該当ページが見つかりました。問題を修正し、もう一度検証してください
とは？
コクーン設定の【 □スキンスタイルを有効にする 】チェックを外したのに、なぜなの？「私の何がいけないっていうの？」
- 該当ページにAMPの警告が出たのは、スキンスタイルを有効にした頃…
- 該当ページを投稿したのは、スキンスタイルの変更後だったかも…
- さちこ(search console)さんは、該当ページは見つかったよって言ってる
- でも、問題を修正してねって言ってる…
はぁ？コクーン設定の『スキンスタイル』のチェックを外し更新したよ。
放置しておけば、そのうち許してくれるの？「もう一度検証してください」ってどういうことなんだ？…
私の知識の中で残された道は、テーマのアップデート後に書いた記事を「更新」するしか思いつかなったので記事の内容には手をつけず、Cocoonの更新後に投稿している記事を更新してみました。
「修正したようですね、それでは検証を始めてみましょう」って、サーチコンソールさんの許可が出たみたいなこの画面。
しばらくすると、この画面は消えます。と同時くらいに、「検証していますから待っててね」という感じのいつものメールが届きます。
Google Search Consoleからのメールは、「検証するから待っててね。終わったらお知らせするからね」と書いてあるんです。
「サーチコンソールさん、気長に待ってますからまた教えてね。」という心持ちでいましょう。
まとめ
今回は、WordPress 無料テーマ Cocoon スキンを使うときには、サーチコンソールのAMPに気をつけようということで書いてみました。
スキンを利用してサーチコンソールにAMP警告が出た場合は、修正しないとスマホで見るときに見てくれた人が困るんだよってことですね。
タグ「style amp-custom」で指定された作者のスタイルシートが長すぎます上限は50000バイトです。
<style amp-custom>ここが長すぎて50000バイトを超えているよ</style>
Cocoon設定は、AMPタブのチェックを外すだけで修正できる
スキンに記述してある<style amp-custom>ここが長すぎて50000バイトを超えているよ</style>の部分を取り除くことができるのかもしれません。
Cocoon設定でチェックを外したら、外したことを読み込んでもらうために記事を更新してみました。
これであとは気長に待つだけで。
以前にも別の件でしたが２週間くらいは待ちました。
WordPressで作ったサイトを自分で管理するためには、 最低限でも「HTML」「CSS」「PHP」とはどういうものなのかを理解している必要があるのですよね。
20年以上前のHTML時代、HTML構文の禁止タグというのが出てきた頃を思い出します。
まだ初代HTMLで、画面上で文字が流れたり光ったり、蝶々やUFOが飛んでいたり…
今では禁止タグって？という感じでしょうが、HTMLの記述が長すぎて通信が重くなってパソコンの画面の表示待ちがよくあったんです。
本当に昔は、負担のかかる命令タグでサーバーがダウンなんてこともあったんです！
そして「デザインはCSSでしましょうね」ってなりました。今、その頃の状況と同じように、スマホの端末なんだから装飾は軽くしてねっていうイメージなんだなぁというイメージに思います。
50代というのは「WWW30年」の歴史の中を、大人になってから生きてきた世代なんですよね。
歴史を思い返すと、現在にふさわしいユーザビリティーでサイトを作っていこうねって意味が、はっきり分かってくるようです。
今回、AMPスタイルシートが重くて警告の件を経験して、サーチコンソールの検証結果を見ながら、Cocoon設定の外感を見直していこうと思いました。
どんな原因で何がいけないのかが分かると、自力で修正できなくても気持ちにゆとりが生まれることは確かだと思います。
CSSの知識を少しでも得るために、手元に本を置いておくこともオススメします。
入門書なので読んでいるだけで、手探りの理解に安心感が得られます。
![WordPressの達人が教える 本気でカッコよくする WordPressで人気ブログ 思い通りのブログにカスタマイズするプロの技43 [ 尾形義暁 ]](https://i0.wp.com/thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0641/9784800720641.jpg?resize=128%2C128&ssl=1)
コメント