アメーバブログがAMP配信（amp-htmlページの自動作成）に対応していることを最近になってようやく気付きました。
そこでCSSカスタマイズの見直しを行います。
その前にamp-htmlって何という人に…
AMP-HTMLとは何か？
Google先生が始めたモバイル用のWEBページの記法です。スマホだと回線のスピードが落ちますのでどうしてもWEBサイトの表示が遅くなってしまいます。これを何とか高速化しようというのが元々の動機です。
AMP-HTMLに従ってHTMLを記述するとGoogleがページをキャッシュしてくれます。これでGoogleの検索結果からページを表示するときのスピードが爆速になります。
Google先生はサイトの表示スピードを検索結果で上位表示させるかどうかの判断材料に使っています。ですからAMP-HTML対応をするしないに関わらずページが読み込まれる速度には気を使う必要があります。
AMP-HTMLの制約による高速化
AMP配信だと何故高速化できるのか？
それはAMP-HTMLの規約でさまざまな制限をHTMLに課しているからです。このルールに則った書き方をしているページだけが正当なAMP対応ページとみなされキャッシュされます。もともと高速に表示できないような書き方をしているページはキャッシュされません。
たとえばJavascriptを使っているページ。これはダメ。CSSもインラインでは書けませんし外部ファイルもダメです。CSSはheadセクションに書きます。
使えないHTMLタグもたくさんあります。
アメーバブログがAMP配信用に用意しているCSSを確認する
それではアメーバブログがAMP配信用に用意しているCSSをひとつづつ確認していきましょう。
まずは文字の色から確認していきます。
文字の色のCSS指定
アメブロのAMP配信用CSSでは文字色（テキストの色）の指定に次の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がどのように表示されるか確認しておきましょう。
darkgray（濃い灰色）はこのように表示されます。
dimgray（薄い灰色）はこのように表示されます。
gray（灰色）はこのように表示されます。
green（緑）はこのように表示されます。
lightgreen（薄い緑）はこのように表示されます。
lightblue（薄い青）はこのように表示されます。
pink（ピンク）はこのように表示されます。
red（赤）はこのように表示されます。
orange（オレンジ）はこのように表示されます。
yellow（黄色）はこのように表示されます。
bronze（ブロンズ）はこのように表示されます。
テキストの色指定をしないとどうなるか。
.entry{background:#fff;color:#333;-webkit-tap-highlight-color:rgba(0,0,0,.05)}によって背景は白、テキスト色は#333に指定されます。上の濃い灰色と同じです。つまり普通のテキストの色ということになります。
見出し(ヘッダ）のCSS指定
AMP配信用CSSで見出しがどのように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は僅かにこれだけです。H5とH6はありません。まぁアメブロでH5やH6まで卒論のように書くようなことは無いという判断でしょう。確かにH4まであれば普通は十分でしょうね。でも一応は気をつけておく必要があります。H5とH6を使うと地の文と見分けがつかなくなります。
さて、上のCSSを見て気付くこと。まずH2が大き過ぎではないでしょうか。これだけ1.96remもあります。1.5remもあればいいのではないかなぁ。それとH4は1remですね。これも大きさだけでは地の文と区別がつかなくなってしまいます。H4はもう少し大きくてもいいのではないかなぁ…
見出しレベル2（ヘッダ2）
見出しレベル3（ヘッダ3）
見出しレベル4（ヘッダ4）
そこでこれが動くかどうか…
.pagination-large__icon{font-size:1.5rem;vertical-align:-8px}見出しレベル2（ヘッダ2）
これはもう公開して見るしかないかな？
AMP表示させてみると大きさはうまく動いています。良かった！
さて、AMPでの表示が一番CSSの制約がきついです。だってアメブロが用意したCSS以外に手も足も出ない訳ですから。インラインのCSSすら効きません。
そこで少し工夫することにしました。はるなぴのサイトでは見出しはテキスト色を緑で統一します。逆に緑は他の場所では絶対に使わないようにします。
そうすると見出しは次のように書くことになります。
<h2><span class="pagination-large__icon entry-text-green">見出しレベル2（ヘッダ2）</span></h2>
<h3><span class="entry-text-green">見出しレベル3（ヘッダ3）</span></h3>
<h4><span class="entry-text-green">見出しレベル4（ヘッダ4）</span></h4>見出しレベル2（ヘッダ2）
見出しレベル3（ヘッダ3）
見出しレベル4（ヘッダ4）
これはAMP表示ではうまくいきました。PCでもうまく表示させることができました。問題はスマホです。スマホではH2が1.96remと大きく表示されています。何とかなるでしょうか。逆にスマホではH4が小さすぎますね。解決方法がすぐ思いつかないので後回しにします。
強調表示(em, strong）のCSS指定
AMP配信における強調表示(em, strong）のCSS指定を確認してみましょう。
.entry-text b,.entry-text em{font-weight:700}これだけです。strongはありません！ bタグは使わないです。そして今までemタグを赤字指定するCSSを書き、strongタグに太字を当てていましたが、これをひっくり返す必要があります。
つまりAMP配信ではemタグが太字指定ですので、PC版のCSSでは逆にしてstrongタグに赤字のCSSに書き換えます。
<p>AMP配信では<em>emタグが太字</em>になります。</p>
AMP配信ではemタグが太字になります。
AMP配信で赤太字にするにはテキストの色指定と組み合わせるようにします。
<p>AMP配信では<strong>strongタグだけでは何も起こりません</strong></p>AMP配信ではstrongタグだけでは何も起こりません
strongタグをAMP配信で赤太字表示させるために次のように書くことにします。
<p>AMP配信で<strong class="entry-text-red"><em>strongタグを赤太字で表示させる</em></strong>ために書き方に工夫をします。</p>AMP配信でstrongタグを赤太字で表示させるために書き方に工夫をします。
うまくいくかな？
うまくいったようです。ところでまだ問題があります。AMPでは見出しが太字になっていません。そこで更に見出しの中にemタグを入れ子にして太字で表示させます。
<h2><span class="pagination-large__icon entry-text-green"><em>見出しレベル2（ヘッダ2）</em></span></h2>
<h3><span class="entry-text-green"><em>見出しレベル3（ヘッダ3）</em></span></h3>
<h4><span class="entry-text-green"><em>見出しレベル4（ヘッダ4）</em></span></h4>見出しレベル2（ヘッダ2）
見出しレベル3（ヘッダ3）
見出しレベル4（ヘッダ4）
これで見出しも少しは見出しらしくなるでしょう。
さて見出しはこれでようやく解決したと思います。（スマホ表示を除けば）でも、まだまだ見苦しいですね。次はpタグに取り掛かります。
pタグのCSS指定
実を言いますとアメブロのAMP配信CSSにpタグのCSSはありません。なのでそのままpタグを連ねて書くと見かけ上は段落が全く形成されません。せっかくパラグラフライティングしてもちゃんと見てくれているのはGoogle先生だけということになります。まぁ最悪それでもいいんですけどね…
さて、何とかしましょう。次のCSSを見つけましたよ。
.l-m-t{margin-top:1rem}
.l-m-b{margin-bottom:1rem}マージンの相殺があるので本当はトップとボトム両方にマージン指定するのはイヤですが、ここは安全策を取ります。
<p class="l-m-t l-m-b">これでパラグラフライティングが分かりやすくなると思いますよ。これが第1の段落です。</p>
<p class="l-m-t l-m-b">ここからは次の段落です。意味のまとまりを考えて検索キーワードを入れるんです。これが第の段落です。</p>これでパラグラフライティングが分かりやすくなると思いますよ。これが第1の段落です。
ここからは次の段落です。意味のまとまりを考えて検索キーワードを入れるんです。これが第2の段落です。
うまくいくかな？
うまくいきました！これで一息つけますね。
preタグ、codeタグのCSS指定
さて最後の難関です。インラインコードとブロックコードのCSSです。
予想はつくと思いますが、そんなのAMP配信用のCSS設定にはありません。どうしましょうか？
background-colorの黒設定があればテキスト色と組み合わせて何とかなるんですが…黒の背景色なんて普通指定しないよね。お手上げかなぁ…
と思ったら、こんなの見つけましたよ。
.rankitem__ranklabel__2{background:#999;border:1px solid #999;color:#fff}濃いグレーの背景に明るい白の文字ならいいかも！やってみましょう、そうしましょう！
<pre class="rankitem__ranklabel__2"><code><p class="l-m-t l-m-b">これでパラグラフライティングが分かりやすくなると思いますよ。これが第1の段落です。</p>
<p class="l-m-t l-m-b">ここからは次の段落です。意味のまとまりを考えて検索キーワードを入れるんです。これが第の段落です。</p></code></pre><p class="l-m-t l-m-b">これでパラグラフライティングが分かりやすくなると思いますよ。これが第1の段落です。</p>
<p class="l-m-t l-m-b">ここからは次の段落です。意味のまとまりを考えて検索キーワードを入れるんです。これが第の段落です。</p>うまくいくかな？
追記：記事ランキングで1位になりましたので結果もちゃんと報告しなくちゃ！
うまくいきました！