ぽこチャレ

人生はチャレンジ 今日から俺はブロガーになる

はてなブログでAMPを使用したら、デザインが崩れてしまった。




f:id:ponpoko37:20190702220051p:image

 

みなさんどーもponpokoです。

ponpokoは、あるカスタマイズするにあたり、何も考えずにAMPを使い始めました。しかし、そこには初心者だからこその落とし穴があったのです。

ウェーブサイトで記事を確認したら、デザインが崩れてしまっている。全くCSSなども反映されていませんでした。

ちゃんと調べもせずに、気軽にやってしまった結果ですね。

ponpokoと同じように、AMPを知らずに使用して、失敗しないようシェアしたいと思います。

 

 

AMPとは?

 

モバイル環境でWebコンテンツの表示を高速化する仕組み

引用元:はてなブログヘルプより

つまり、Webでコンテンツを開いたとき、ユーザーがストレスなく閲覧できる仕組みなのです。ユーザーファーストであり、SEO的にもよいと言われているみたいですね。

ponpokoが使用した理由は、上記のように表示速度を早くしたいからではありませんでした。そもそも、それすら知らなかったんです。

記事のリライトをした時、更新した日付けを表示させたく、そのカスタマイズの際にAMPを使用し始めました。

そして、自分のブログをWebサイトで確認したところ、デザインが崩れていることに気づいたのです。

利用の注意点

はてなブログでAMPを使用する際の注意点がありました。

  1. デザインテーマが反映されない。
  2. サイトバーモジュールなど、HTMLで自由記述したものが反映されない
  3. 広告が配信されない
  4. 記事中のスタイル関連のHTMLは反映されない

つまり、自分で頑張って作ってきたデザインが全く反映されなくなってしまうんです。

これを知っていれば、きっとやらなかったでしょうね(笑)

では、どのようにデザインが崩れていたか見てみてください。

実際に使用したサイト

まず、AMPを使用した場合、Webサイト上では下記の画像のように雷マークみたいのがついています。

f:id:ponpoko37:20190702212353j:image

始めは、なんのマークか全くわかりませんでした。

そして自分のサイトを見てみると「えっ?」て一瞬フリーズしたんです。

使用前のデザイン

f:id:ponpoko37:20190702213334j:image

使用後のデザイン

f:id:ponpoko37:20190702213507j:image

そもそも、デザインテーマが反映されておらず、その他のデザインも崩れてしまっています

せっかくカスタマイズしたのにと思ったのですが、意外にも使用後のデザインも捨てがたい(笑)

他の記事も同じなのかと思い調べてみたのですが、記事によってはAMP化されてないのもあったのです。

おそらく、導入してからリライトとした記事は、インデックス登録を再度行なっていました。そして、クロールされAMP化された記事としてグーグルに登録されたのだと思います。

初心者なので、間違っていたらすみません。

では、どうやって解決したのか?

解決方法

ponpokoが調べた結果、解決方法としては

  1. AMP化を中止する
  2. AMP用のCSSを使う

になりました。

 

AMPのCSSにはいくつかの制限があります。本機能およびCSSの知識を持っている方を対象としており、デザインやカスタマイズに関しては、はてなブログのサポート対象としておりません。

引用元:はてなブログ開発ブログより

CSSに関しては、知識がないと無理ということです。なので、ponpokoは②の選択肢はありません。

では、①の中止する場合はどうすればいいか?

まず、ダッシュボード>設定>詳細設定で、AMPの配信のチェックを外します。

次に、googleサーチコンソールにてAMP化している記事をインデックスします。

数時間後、googleで検索するれば元に戻っているはずです。実際にponpokoは、この方法で解決しました。

まとめ

無知って怖いですね。

ponpokoも初心者だから、調べてコピペをすぐやってしまうんです。今回の件を通して、調べることが大事かを学びました。

ただ、表示速度が早くなるのは捨てがたいのですけどね。これからは、AMP化したサイトがどんどん増えていくのかな…

同じように悩んでいる人の参考になればと思います。

ponpokoぽんぽん