閲覧環境は４パターン
アメブロを読む読者の環境は４つあります。
- パソコン
- Amebaアプリ
- スマートフォン
この３つ以外にスマホでの検索流入の場合は
- AMP
という環境がでてきます。
AMPの説明はこちらからアメブロのgamp.ameblo.jpはAMP対応ページ
アメブロのAMP用ページ表示確認の方法も記載しています。
この４つの環境でブログの表示が違ってきます。ただ文字を打って写真を入れるだけなら特に問題ありませんが、文字やデザインを変えたり表やリンクなどを使っているとうまく表示されない事やリンクが機能していないことがあります。
アメブロを書いたら４つのパターンの表示を確認することが必要です。
パソコン
まずパソコンですが、ここが一番なんでもきれいに表示されます。
PC用ブラウザの種類がいくつかあります。
- Chrome
- Firefox
- Edge
- Internet Explorer11(IE11)
これらのブラウザであれば表示が大きく変わることはありません。ただしIE11は表示がとても遅く少し問題もありますし、もうMicrosoftが使用しないように推奨していますので標準ブラウザからは外してもいいかもしれません。筆者はまだまだIE11を使っていますがIE11でアメブロをみることはありません。
もしパソコンでの表示で問題がでるとしたらCSSを使った時に上記の４つ以外のブラウザで閲覧した時くらいでしょうか。（アメブロでのCSSの使い方は別で解説します）
でもアメブロで使えるタグやCSSを使ったデザインはほぼ思ったように問題なく表示されるはずです。
Amebaアプリ
アプリは少々問題です。専用アプリとなっているため直接アメブロのサーバーとやり取りしていると思われます。そのためGoogle Analyticsなどの外部アクセス解析ではアクセス数をカウントできませんし、一部のhtmlタグもPC ブラウザのように表示されないことがあります。ヘッダータイトルやサイドバーも表示されませんので記事に書いたことしか読者は読みません。プロフィールは右上のメニューから見る形になります。
ただアメブロを読むにはAmebaアプリはとても便利なため使っている読者は多いと思います。ですからAmebaアプリで正しく表示されないことは致命的な欠陥となります。
アメブロではAmebaアプリできれいに表示されるブログを作る必要があります。
スマートフォン
スマホは基本的にはPCブラウザと近いのですがモバイル用に最適化されたページになります。PC用と同じではなくアメブロで勝手に最適化してくれています。Amebaアプリでの表示に近い形でヘッダータイトルやサイドバーは無く記事だけになります。htmlタグやCSSの表示もPCとほぼ近い形で見ることができます。
ここまでのパソコン、Amebaアプリ、スマホは記事を書いている途中でプレビューが可能です。パソコンで書いていればPCとスマートフォンの２種類のプレビューが準備されていて確認することができます。Amebaアプリで書いていればアプリのプレビューが確認できます。ＰＣで下書きしてアプリでプレビューやその逆も可能です。
一番の問題はAMP用ページです。
AMP
AMPについての説明は別記事を参照してください。現在スマホでgoogle検索するとAMP用ページがかなり上位に表示されるようになっています。ページが軽くて表示が早いのですがパソコン用ページに比べると大幅に簡素化されています。表示スピードだけを重視したページです。
アメブロのAMP用ページは自動で作られています。自分の意志で作らないようにしたりとか編集したりは出来ません。記事を公開したと同時にAMP用に変換された記事が発行されます。プレビュー機能は今のところありません。もしかしたら将来的にはプレビュー機能が付くかもしれません。
現在の確認方法としては記事を公開してからAMP用ページのURLを直接入力して確認するしかありません。AMP用URLは記事ページ(https://ameblo/アカウント名/entry-数字.html)を表示してamebloの前にgamp.を追加してgamp.amebloにするだけです。モバイル用ページですがパソコンでも表示を確認することができます。
PCもスマホも同じ
４パターンの確認が必要
アメブロでは記事を公開したら４パターンの表示確認を行う必要があります。もし文字と写真だけの記事ならならその必要はありません。それでも写真サイズを変更している場合や強調文字やフォントサイズを変えている場合はAMP用ページではその変更が消えている可能性が高いですのでAMP用ページの確認が必要です。
AMP用ページに対応したアメブロ記事の書き方はまた別で解説します。
