装飾不可!?AMP設定に意外なデメリットが!

目安時間:約 6分

こんにちは。バチ(@bachi0625)です。

 

昨日からちょっと悩んでいたことがありまして、

「ツイッターに埋め込んだURLからスマホで記事を見ると、レイアウトが崩れる」

ということ。

 

ツイッターの埋め込みURLからちゃんと飛べるかな・・・と自分で見てみると、

スマホで見た場合だけ表示がおかしいんです。(今は解消済…のはず)

 

具体的にはこんなかんじ。

・・・黄色っ!?

ブルーライトカット状態でスクリーンショット撮るとこうなるんですね(;'∀')

 

それはさておき、左側がサイトのトップページから記事を見た場合。

右側がツイッターのリンクから飛んだ場合。

 

文字の色が反映されていなかったり、文字の大きさや行間が異なっていたり。

囲い枠の中もちょっと変です。

 

結論から言うと、

「AMP設定をするとレイアウトが崩れる場合がある」ためでした。

な、なんだってー!?

AMP設定をすると文字の装飾やレイアウトが崩れることが!

今回の件で、今使っているテーマ「Diver」の開発者さんに問い合わせをしていたんです。

すると以下の回答が。

 

twitterでは、AMPページが有効化されている場合に、AMPを表示させるようになっております。
AMPでは、文字のスタイルや行間等のカスタマイズはAMP制約上反映させることはできません。AMPを無効にしてからしばらくはツイッター側でキャッシュを飲み込む可能性もあります。

 

ぐはっ・・・!文字のスタイルが反映不可・・・!?

 

調べてみたところ、具体的には

  • 文字に色がつかない
  • 文字の大きさ変更ができない
  • 見出しが簡略化されたものになる
  • 一部フォームが表示されない

などなど・・・。

 

文字の装飾は、太字のみが反映されるようです。

これはさすがに予想しませんでした。

AMPにこんなデメリットがあったなんて…。

「AMPって表示が速くなるのかぁ じゃあそうしとこ」
ぐらいに思っていたら、思わぬ落とし穴です。

 

CSSの使い方によっては文字を装飾できるようなんですが、
正直さっぱりわかりません(笑)

 

そういえば・・・以前の記事でも書いたのですが、、
「AMPページではtableタグにheight属性を使うのやめてね」
ってメールがgoogle様から来たことがありました。

 

今思うと、この装飾の制限に引っかかったのかもしれないですね。

AMP設定は、googleの上位表示に一定の効果があるようです。

しかしそのかわり、装飾やレイアウトに少なからず影響がある様子。

さらばAMP!また会う日まで!

・・・というわけで・・・

この実践記、今後はAMP設定を外して投稿します!(ババーン!)

なぜかというと、googleで上位表示されることが目的ではないので!

好き勝手やりたいんです!(笑)

 

いろいろ装飾してると、書いてて楽しいんです( ̄¬ ̄*)

あ、外注化してるごちゃまぜブログはAMP設定のままにしておきます。

事務的に記事を増やします。(笑)

なんだか力を入れる側を間違っているような・・・というか本末転倒・・・?
でも実践記書いてるほうが楽しいからいいや(*´▽`*)

そもそもAMPって?

AMPとは「Accelerated Mobile Pages」の略で、設定するとスマホでのページ表示がめちゃんこ速くなるしくみです。

しくみです!と言いつつ、読み方すらわかりません。

なんでそうなるのかもさっぱりわかりません(*´▽`*)

 

今回、ワードプレスのテーマでAMPをサクっと設定できたので、
「見るのが速くなるなら悪いことなさそう AMPサイコー!」

って感じで、とりあえずAMP対応ページにしておいたんですね。

 

ところが今回の思わぬ事態に。

深夜のテンションも吹き飛んだ!

じつは今日、ぜんぜん違う記事を書くつもりだったんです。
会社からの帰り道、

 

『運動会
  ぼくのジャージは
   「うん、どうかい?」』

 

なんてどうしようもない川柳をおもいついて、
ついでに

バチ「「うん、どうかな」で検索したらサジェストで
『さかさ言葉 単語』 ってキーワードが拾えました☆るんるん♪」

なんてことを、凝りもせず深夜のテンションで書こうと思っていたのですが・・・

バスの中でメールを見るなり、意外すぎて深夜のテンションが吹き飛びました。

「マジで!?」と小声に出てしまったり。

 

でもせっかくなので、本日のキーワードはコレ!

・さかさ言葉 単語

・わや 方言 どこ

・いただきたい である調

・島 スキャン 個体 値

・wmf フライパン 焦げ付き

 

…まとめどころがわからなくなってしまった( ;∀;)

AMP設定には気を付けましょー!

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
プロフィール

31歳、頭皮カッパ男子のバチと申します。

アドセンス外注化を2018年4月から実践中。

アドセンス実践しつつ、2018年7月からメルマガ塾に参加予定!

マイブームはすみっこぐらし。

 

イノシシのようにがんばります!

自己紹介はこちら

 

 

カテゴリー