<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない

Twitterから自分のブログ記事をひらくと、デザインが大幅に崩れていることを発見。
無事解決したわたしが「3分で解決する方法」を「初心者でも間違えないように詳しく」説明します。

目次

TwitterからWordPressのブログを開くとデザインが崩れる?

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない
ごん

いままではそんなことなかったのに、ある日突然Twitterでつぶやいたブログ記事をクリックするとデザインがくずれていた…

原因は「AMP」というプラグインにあります。

AMPについては詳しくないので割愛しますが、どうやらGoogleのおすすめのシステムのようです。
(モバイルで開くと高速化されるとかなんとか…。そのため記事のデザインが崩れたりします)

TwitterからWordPressの記事が崩れてしまう場合は、プラグインのAMPが有効化になっていないか確認してみましょう。

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない

AMPプラグインを無効化しただけでは記事が見つからなくなります

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない
ごん

な〜んだ、プラグインが原因なら無効化すればいいだけじゃんか!ポチッとな

404エラーのイラスト「404 ページが見つかりません」
<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない
ごん

え…記事が見つからなくなったんだけど

焦りますよね。
でも大丈夫!ここから解決する方法をご紹介します。

わたしが躓いたポイントもしっかりわかりやすくお伝えしますので、初心者の方も安心してください!

いまから触る場所は、ちょっとでも間違えるとブログがすべて表示されない!!!
という大事件につながる可能性があります。

バックアップはしっかりとって行いましょう

Twitterからブログ記事が崩れる→AMPを停止したら記事が見つからないを解決する方法

その1:プラグインAMPを停止します

まずはAMPのプラグインを停止しましょう。

WordPressのメニューからプラグインを選択し、AMPを停止します。

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない

ここで注意したいのが、

次の項目をやる前に必ずAMPを停止すること

です。

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない
ごん

わたしは後からAMPをとめてしまったので、次にやる.htaccessの書き換えが意味なくなりました。必ず先にAMPを無効化しましょう

その2:.htaccessの書き換えてページをリダイレクトさせる

.htaccessの書き換えはレンタルサーバーによって異なります。
今回はエックスサーバーでの書き換え手順をご紹介します。

まず、エックスサーバーのサーバーパネルへログインします。

ホームページの中の.htaccess編集を選択します。

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない

今回問題が起きたドメインを選択します。

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない
<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない

.htaccessの編集で

RewriteBase/ のあとに
RewriteRule ^(.*)/amp/?$ $1 [R=301,L] を追加します

※注意することがあるので、やる前に最後までお読み下さい※

まず完成形がこちらです↓

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない

RewriteBase/ のあとに
RewriteRule ^なんたらかんたら呪文 が
最初から存在している場合があります。

その場合は、
RewriteRule ^ のあとの「なんたらかんたら呪文」に
(.*)/amp/?$ $1 [R=301,L] を上書きするようにペーストします。

RewriteRule ^なんたらかんたら呪文

RewriteRule ^(.*)/amp/?$ $1 [R=301,L]

書き換えたら、 確認画面へ進む→実行する でOKです。

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない
ごん

.htaccessを書き換えてからAMPのプラグインをオフにすると、RewriteRule ^の後ろが書き換わってしまいます。

.htaccess編集してからAMPプラグインを無効化した場合は、もう一度.htaccessを書き換えれば問題ありあせん。

まとめ:AMPは対応しているテーマを使うときだけにしましょう

結論、AMPを使うときは対応しているWordPressテーマを使うときだけにしましょう。

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない
ごん

いつからプラグインが有効になっていたのか。
いつからTwitterからのブログ記事が崩れていたのか。
落ち込んでいても仕方がありません!

jinやSWELLはAMPに非対応のWordPressテーマです。
お使いの方はAMPプラグインを間違えても入れないように注意しましょう!

<3分で解決>Twitterからブログを開くとデザインが崩れるのでAMPを無効化したら記事が見つからない
ごん

入れてしまったら今回の手順を踏んでリダイレクトさせましょう

この記事が気に入ったら
フォローしてね!

お手数でなければシェアしてください
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ごんのアバター ごん でざいなー

デザイン・パソコン・副業がお好き

Excelやillustratorの使い方
日々の生活で効率をあげる方法など
あらゆることを書いています

目次