アメブロ ＡＭＰ対応ブログ記事の書き方、ＣＳＳの使い方

スポンサーリンク

ＡＭＰについて

ＡＭＰとは Accelerated Mobile Pages の略で、モバイル環境でＷｅｂページを高速に表示するための手法です。
googleとTwitterが共同で行っているプロジェクトです。スマホなどでgoogle検索をしたときにだけ検索結果に表示される専用ｗｅｂサイトになります。アメブロではすべてのブログがＡＭＰ対応になっていますのでgoogle検索ではＡＭＰ用ページが検索結果に表示されることが多いはずです。検索結果に⚡マークが入っていればＡＭＰ用ページです。ＰＣを使った検索やgoogle以外の検索では表示されません。
こちらの記事（アメブロのgamp.ameblo.jpはAMP対応ページ）で説明しています。

ＡＭＰの注意点

プレビュー機能無し

ＡＭＰ用記事は普通にＰＣやＡｍｅｂａアプリから記事を更新すると同時にＡＭＰ用ページが自動で発行されます。プレビュー機能は今のことろありません。記事を発行してから確かめるしかありません。
確認方法はこちらの記事（アメブロはPC・アプリ・スマホ・AMPの表示を意識して書く）

禁止タグ

ＡＭＰでは禁止されているタグがあります。普通のブログページは発行できますがＡＭＰ用ページはエラーになります。

  1. base
  2. frame■
  3. frameset■
  4. object■
  5. param■
  6. applet
  7. embed■

■はアメブロで禁止されているタグです。（アメブロで使えない禁止タグ）

他にＡＭＰ用ｈｔｍｌに置き換えが必要なタグもありますが、アメブロでは置き換えは自動で行われています。

スタイル、デザイン

ＡＭＰはモバイル端末だけで表示されますのでタイトル画像やサイドバーは表示されません。注意するのは記事を凝ったデザインにしていると意図した表示にならないことが多いことです。
装飾なしの文字とサイズ指定無しの写真だけであれば問題はほぼおきません。

記事の書き方

装飾無し文字

装飾無しで文字を入力しているだけなら対策は不要です。問題はおきません。

写真

写真もサイズにこだわりが無ければ対策は不要です。ただし写真の推奨サイズ等があります。これを満たしていないと警告となり検索結果に表示されないこともあります。

  • フォーマット：jpg、png、gif
  • 画像の幅：1,200 ピクセル以上
  • アスペクト比：16×9、4×3、1×1
  • 高解像度画像：800,000 ピクセル以上

写真が小さいと「推奨サイズより大きい画像を指定してください」という警告になることが多いです。ただ1200ピクセル以下でも警告にならない場合もあるのでやってみて確かめるという形になります。

警告やエラーはGoogle Search Consoleを使って調べます。使い方は別途解説。

ＣＳＳを使ったスタイル設定

文字の装飾（色やサイズなど）や表を使いたい場合はＣＳＳを使います。

ＡＭＰのＣＳＳは外部ファイルを読み込むことができません。ですのでｈｔｍｌの中にＣＳＳを記載します。しかしアメブロではスタイル属性としてタグの中にそれぞれ書き込んだものはＡＭＰ用ページの自動発行時にほぼ消えます。よって書き方はスタイル要素として<style amp-custom></style>で書いていくしかありません。

スタイル要素は記事ｈｔｍｌの一番下に<style amp-custom></style>というＡＭＰ用のＣＳＳを書けばいいかと思いますが、これも読み込まれることなく消えます。

ＡＭＰ用ＣＳＳは<style amp-custom></style>１つだけで５０ＫＢ以下という制限があります。実はアメブロでは標準でＡＭＰ用ＣＳＳが用意されており他のＣＳＳはすべて無視する仕様になっています。ですので自由にＡＭＰ用ＣＳＳは使えなくなっています。ですが標準で準備されたＣＳＳを使えばスタイル設定は可能になります。

アメブロ標準ＣＳＳ

アメブロ標準の<style amp-custom></style>は４４ＫＢくらいでかなりたくさんの設定が書かれています。これらの設定は５０ＫＢまでは追加されることはあると思います。逆に変更や削除をすると今までのページが表示されなくなるのでそれは無いかと思っています。
使い方はアメブロ標準ＣＳＳの中でクラス設定されていますのでそのクラスを記事内のｈｔｍｌタグに指定していきます。

ＣＳＳの探し方は難しいのでここでは書きません。設定例をいくつか記載します。

設定例

タグにクラス指定を追加していきます。例えば文字を赤色にしたければ以下のクラスを使います。ただし文字の色は標準ＣＳＳにある色ならアメブロのＡＭＰ変換時に自動で以下のクラスを使って変換してくれます。ただ１００％変換される保証はないので必ず記事発行後の確認が必要です。

htmlタグ

class=”entry-text-red “

色指定ＣＳＳ

CSS

.entry-text-darkgray {color: #333}

.entry-text-dimgray {color: #666}

.entry-text-gray {color: #999}

.entry-text-green {color: #2d8c3c}

.entry-text-lightgreen {color: #49c755}

.entry-text-lightblue {color: #58b8ef}

.entry-text-pink {color: #ff547c}

.entry-text-red {color: #f24c3b}

.entry-text-orange {color: #fe9019}

.entry-text-yellow {color: #f8cd21}

.entry-text-bronze {color: #b98353}

文字センター寄せＣＳＳ

CSS

.l-text-center {text-align: center}

文字サイズＣＳＳ（見出し用ですが使えます）

CSS

.entry-text h2 {
font-size: 1.96rem;
margin: .83rem 0
}

.entry-text h3 {
font-size: 1.4rem;
margin: 1rem 0
}

.entry-text h4 {
font-size: 1rem;
margin: 1.33rem 0
}

表などの線の表示

CSS

.l-border {
border: 1px solid #e2e2e2
}

.l-border-b {
border-bottom: 1px solid #e2e2e2
}

.l-border-t {
border-top: 1px solid #e2e2e2
}

記事発行後は必ずＡＭＰ用ページの表示を確認する必要があります。意図したとおりに表示できない場合は凝ったスタイルは諦めるしかありません。

とにかくスマホの検索流入はＡＭＰ用記事を読む可能性が高い事は意識しておくことが重要です。

スポンサーリンク