こんにちは！みゆまむ@miyumam2525です。
突然ですが、ここ数日で私のブログに起きていた事件について、一応解決したのでご紹介したいと思います。
簡潔にいうと、こんな感じ↓
Google Adsenseの最適化提案
↓
AMPプラグイン適用
↓
Twitterを通した記事がデザイン崩れる！
↓
AMP無効化
↓
ページ見つかりませんエラー
↓
.htaccessファイルにリダイレクトのコード書き込む
↓
サーバーのファイル編集
↓
ブログ自体が500エラーで開けない！
↓
コード誤り
↓
修正、無事に解決— みゆまむ@時短ワーママブロガー (@miyumam2525) December 3, 2018
この記事では、どうやって解決したのかをなるべく初心者にもわかりやすく詳細にご紹介したいと思います！（私が調べる中で全くわからないだらけだったので・・）
Contents
Google Adsense 最適化のオススメに乗っかる
これが全ての始まりでした。。GoogleAdsenseの「最適化」ページに「広告の表示スピードを早くすることができます」的なことが書いてありました。
Adsenseヘルプより 「AMP（Accelerated Mobile Pages）について」
最適化というワードに深く考えもせずに飛びつき、AMPプラグインをダウンロード、有効化しました。また、グーグル先生がオススメしているということもあり、全く調べずに言われるがままに入れてしまいました。
ここで反省すべきなのは、一度でも「AMP 影響」等で調べていたら、何かしらの情報に触れられたのではないかということです。
自分できちんと調べずにサイトを変更してしまうのは、本当に怖いことなのだと今回思い知らされました。
Twitterからの表示でデザインが壊れる
まだまだドメインパワーの弱い私のブログは、pvのほとんど全てがTwitterからの流入です。そんな私にとってTwitterからの表示でデザインが壊れるなんて死活問題。気づいた時には青ざめました。
https://twitter.com/miyumam2525/status/1068298831668760576
焦ってます笑
吹き出しとかも、ただの画像になっていて、「なにこれ！？」と思いました。ほんと、気持ち悪かったw
正しいデザイン↓
壊れたデザイン↓
そして、時を同じくして私と同じ現象が起きているさきちちゃん@aoopena。一緒にあわあわしてくれました。
そんなさきちちゃんもなんとAMPを数日前に適用していて、どうやらそれが原因になっているらしいことが判明・・！
AMPプラグインを停止すると記事が見つからなくなった
待ったぁぁぁぁぁぁぁぁ・・・
良いですか。何度も言いますが（自戒）、実行する前にちゃんと調べましょうね。
なんと、AMPプラグインを停止すると今度はTwitterのリンクから記事が見つからなくなってしまったのです。
JINの場合、デザインを崩さずに自動的にエラーページを返してくれるので、その点は良かったなぁと思いました。また、そのエラーページから、トップに飛んでみると普通に見ることができました。
(エラーページのキャプチャ撮り忘れた…)
https://twitter.com/miyumam2525/status/1069387279632752640?s=21
これまた焦っています笑
次は、ページのリダイレクトだ！
サロンメンバーに助けてもらいながら、どうやら、「ページのリダイレクトをすればいいこと」と、そのために、「.htaccess」ファイルにコードを追加すると良いらしいということがわかりました。
参考にさせていただきました★
【初心者向け】AMP化をやめて，正規ページにリダイレクトする方法
https://toge510.com/2018/06/08/howtoquitamp/
.htaccessファイルにコードを追加する
これ、意味わかりますか？意味わからなくても、手順がすぐに思い浮かびますか？
私は、まっっったくわかりませんでした…なので、出来るだけ詳しく説明したいと思います！
目的:ページリダイレクトをする
手段:.htaccessファイルにコードを追加する
- 手順1
エックスサーバーにログインする※レンタルサーバーがエックスサーバーの場合 - 手順2
ファイルサーバーにアクセスする
- 手順3
.htaccessファイルを探す
ドメイン名→public_html→.htaccess
- 手順4
下記のコードをRewriteBase/のあとに追加する
RewriteRule ^(.*)/amp/?$ $1 [R=301,L]
すでにRewriteRuleのコードがある場合があります！その場合は、RewriteRuleの後を更新します。
私はこれがわからなくて、単純にコード追加しちゃいました。
すると500エラーでブログ自体が全く開かなくなってしまったのです…！！恐ろしや。。
またエラー画面とっとくの忘れた…
というわけで、注意点の通り、RewriteRuleの後を更新する形で修正すると直りましたー！！Twitterの方もデザイン、ページ遷移ともに直っていることが確認できました。
まとめ プラグインを入れる場合やデザインを変更する時は一旦調べる！
ほんとね、これに尽きますね。でも今回のことがあって自分でコードいじったり調べたりして、少しだけ賢くなったような気がします。
AMPプラグインを入れてデザインが崩れると、有料デザインのJINを入れた意味がなくなってしまうし、まだまだ私には扱えないものでした。
困っている人に届きますように。
こちらもどうぞ。
