アメブロの通常のモバイル向けページとAMPの表示の違い

アメブロのAMP向けページ

アメブロは、2016年にAMP対応ページが用意されるようになりましたが、アメブロのAMP対応ページは通常のモバイル向けページの表示とは異なる部分が多いので注意が必要です。

AMPは、ごく簡単に言うと、モバイルで検索したユーザーに対して(本来の記事ページではなく)高速表示される代替ページを提供する仕組みです。

今後、多くのアメブロユーザーの記事でAMPが用意されるようになると(既になっているとも)思いますので、その表示の違いについて、アメブロのビジュアル記事エディタ(最新版エディタ)でサポートされている機能に沿って、少しご紹介したいと思います。

なお、最新版エディタの機能で挿入されるHTMLタグも併記しますので、タグ編集エディタを利用される場合の参考にしてください。

(アメブロのAMPで囲み枠を表示したい人はこちら)

記事内見出し

アメブロがAMPを導入した当初、記事内見出しは、通常の段落の文字と全く見分けがつかない状態でしたが、2017年10月頃に、大見出し(h2)、中見出し(h3)、小見出し(h4)が、AMPでも通常の文字とは見分けがつくように修正されました。

太字ではないなどの違いはありますが、概ね通常のモバイルページと同様に表示されると考えても良いのではないでしょうか。

【記事内見出し】のHTMLタグ
<h2>H2タグ(大見出し)</h2>
<h3>H3タグ(中見出し)</h3>
<h4>H4タグ(小見出し)</h4>

文字サイズ指定

アメブロがAMPを導入した当初、文字サイズ指定も一切無視されて、通常の文字と同じ文字で表示される状態でした。

これが、2017年10月頃に、アメブロのビジュアル記事エディタ(最新版エディタ)で文字サイズを指定した範囲は、通常文字と同じサイズの太字で表示されるようになりました。

ただし、最大から最小まで、どの文字サイズを指定しても同じ大きさの太字で表示されるため、文字の大きさの違いで何かを表現しようと思ってもAMPでは表現できませんので注意が必要です。

また、通常文字と同じ「サイズM」を指定しても太字表示になってしまいますので、太字表示したくない箇所は、「文字装飾のリセット」で文字サイズ指定を解除する必要があります。

【文字サイズ指定】のHTMLタグ
<span style="font-size: 2.74em;">文字サイズXXL</span>
<span style="font-size:1.96em;">文字サイズXL</span>
<span style="font-size:1.4em;">文字サイズL</span>
<span style="font-size:1em;">文字サイズM</span>
<span style="font-size:0.83em;">文字サイズS</span>
<span style="font-size:0.7em;">文字サイズXS</span>

文字色・文字背景色

アメブロがAMPを導入した当初、文字の色指定も全く反映されませんでしたが、今は文字色をある程度表現できるようになりました。

ただし、必ずしも指定した色では表示されません

アメブロのシステムが、定義済みの色の中から比較的近い色を自動的に選んで表示するようになっているようで、時には思っていた色と全く違う色で文字が表示されることもあります。

ですので、普段使う(思った色で表示される)色をいくつか決めておいて、その範囲内で文字色を指定するようにしたほうが良いでしょう。

【文字色指定】のHTMLタグ(例)
<span style="color:#ff0000;">赤</span>
<span style="color:#ff7f00;">橙</span>
<span style="color:#009944;">緑</span>
<span style="color:#0000ff;">青</span>

また、文字背景色は、現時点(2017/10/28)でもAMPには一切反映されません。

【文字背景色指定】のHTMLタグ(例)
<span style="background-color:#ff0000;">赤</span>
<span style="background-color:#ff7f00;">橙</span>
<span style="background-color:#009944;">緑</span>
<span style="background-color:#0000ff;">青</span>

その他の文字装飾(新タグ編集エディタも同様)

その他の文字装飾については、2017年10月の修正で「太字」と「取り消し線」はAMPにも反映されるようになりましたが、「斜体」「下線」は今も反映されません。

ですので、「斜体」や「下線」を視覚的に強調することなどを目的として使用するのはやめておいたほうが良いでしょう。

【その他の文字装飾】のHTMLタグ
<span style="font-weight:bold;">Bボタン</span>
<span style="font-style:italic;">Iボタン</span>
<span style="text-decoration:underline;">Uボタン</span>
<s style="text-decoration:line-through;">Sボタン</s>

左寄せ・中央揃え・右寄せ

左寄せ・中央揃え・右寄せは、AMPには一切反映されません。

全て左寄せで表示されます

【左寄せ・中央揃え・右寄せ】のHTMLタグ
<div style="text-align: left;">左寄せ</div>
<div style="text-align: center;">中央揃え</div>
<div style="text-align: right;">右寄せ</div>

リスト・引用

リスト(番号なし・番号あり)と、引用は、AMPでも通常のモバイル向けページと概ね同様の表示となっています。

これらも、当初は通常の段落と全く見分けがつきませんでしたが、2017年10月に改善されたようです。

【番号なしリスト】のHTMLタグ
<ul>
<li>番号なしリスト</li>
<li>番号なしリスト</li>
<li>番号なしリスト</li>
</ul>
【番号ありリスト】のHTMLタグ
<ol>
<li>番号ありリスト</li>
<li>番号ありリスト</li>
<li>番号ありリスト</li>
</ol>
【引用】のHTMLタグ
<blockquote>
引用文引用文引用文引用文引用文引用文引用文
引用文引用文引用文引用文引用文引用文引用文
</blockquote>

画像

画像については、アメブロにアップロードした画像の表示は概ね問題ないようです。

ただし、外部から直リンクで貼り付けた画像は、小さくなったり、上下に異常に大きな隙間が空いたり、縦に細長くなったりと、一筋縄では行きません。

ですので、たとえ直リンクOKの画像であっても、できるだけアメブロにアップロードしてから貼り付けたほうが、AMPできれいに表示される可能性が高いと思います。

旧タグ編集エディタの機能

旧タグ編集エディタに関しては、既に新タグ編集エディタも登場して間もなく廃止になると予想していますが、一応現時点では使えますので、このエディタの機能を使うとAMPでどう表示されるのか?についても触れておきたいと思います。

まず、旧タグ編集エディタの機能(ボタン)を使って、文字サイズや文字色を指定しても、AMPには一切反映されません。

その他の文字修飾については、「太字」はAMPに反映されず、「斜体」は太字表示に、そして、「下線」と「取り消し線」はAMPでもそのまま表示されます。

ただし、旧タグ編集エディタは、現在のアメブロで採用されている「HTML5」では既に廃止となっているHTMLタグが出力されるなどの問題もあり、既にお勧めできないものとなっていますので、できれば、早めに新タグ編集エディタに乗り換えたほうがよいと思います。

アメブロのAMPで囲み枠を表示するには

さて、最後に、アメブロユーザーの間で人気の「囲み枠」について書いておこうと思います。

上の画像のように、残念ながら、現時点で囲み枠はAMPには表示されません。

ですが、絶対に不可能というわけではありません。

例えば、囲み枠を表示するためのdivタグのclass名に、

l-border l-p-t l-p-r l-p-b l-p-l

を指定すると、以下のような薄いグレーの囲み枠を表示することができます。

具体的には、

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="border:1px solid #666;padding:1em">AMPでの表示にも対応させた囲み枠囲み枠</div>

のように書きます。

ただし、これは、現時点(2017/11/1)でアメブロのAMP向けページに定義されているスタイルを利用していますので、もし、このスタイルが変更になると、ある日突然この囲み枠も表示されなくなる可能性もありますのでご注意ください。

まとめ

以上、アメブロの通常のモバイル向けページとAMP向けページの表示の違いについてご紹介しました。

今後、AMPは無視することはできないと思いますので、AMPでも読みやすい記事を書くために当記事を参考にしていただければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です