少しCSSカスタマイズの実験をしていきます。
このページがおかしな表示になっていたらそのCSSカスタマイズ実験のせいですのでご了承くださいね。
まず始めはAMP用のCSS設定、というかHTMLの書き方からいきます。この前AMP配信の記事で大分CSS設定を検討しましたが、実はまだ少し変えたいと思っています。
AMP配信用のCSS設定ですからAMPページで表示は確認します。いつものURLにgampをつければアメブロのAMP用のページを見ることができます。gampはプロトコルの直後に挿入します。
例えば、はるなぴ日記の場合なら通常のURLが
https://ameblo.jp/hal7pi/entry-12373860228.html
となっていたらAMPページのURLは
https://gamp.ameblo.jp/hal7pi/entry-12373860228.html
となります。https://の後にgampを入れるようにするということです。
AMP用の見出しCSS
見出しのCSS設定を実験します。この前はこんな風にしました。
<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>でもemタグをhタグの内側に書くのはどうかなと思います。代わりにこれを使うことにします。
.entry-header__theme__anchor{font-weight:700}更に秀丸マクロでタグを変換するときのことを考えてhタグ自体にclass指定することにします。こうなりますね。
<h2 class="pagination-large__icon entry-text-green entry-header__theme__anchor">見出しレベル2（ヘッダ2）</h2>
<h3 class="entry-text-green entry-header__theme__anchor">見出しレベル3（ヘッダ3）</h3>
<h4 class="entry-text-green entry-header__theme__anchor">見出しレベル4（ヘッダ4）</h4>んじゃちょっとやってみますか。
見出しレベル2
見出しレベル3
見出しレベル4
見出しレベル5
見出しレベル6
ついでにh5とh6もやってみました。何も変わらないかもしれないけど。
AMPの段落（pタグ）CSS設定
段落（pタグ）のCSSはこれでいいかな？
<p class="l-m-t l-m-b">これでパラグラフライティングが分かりやすくなると思いますよ。これが第1の段落です。</p>
<p class="l-m-t l-m-b">ここからは次の段落です。意味のまとまりを考えて検索キーワードを入れるんです。これが第2の段落です。</p>これでパラグラフライティングが分かりやすくなると思いますよ。これが第1の段落です。
ここからは次の段落です。意味のまとまりを考えて検索キーワードを入れるんです。これが第2の段落です。
これでAMPページでも段落が形成でき、パラグラフライティングが分かりやすく表示可能です。
AMPの強調表示（emタグ、strongタグ、markタグ）設定
emタグはAMP用のCSSで太字表示されます。ブラウザによっては斜体（イタリック体で表示されてしまいます）
strongタグはAMP配信用のCSSでは何も規定されていません。赤太字に表示させることにします。
前はこんな風に書きました。
<p class="l-m-t l-m-b">AMP配信で<strong class="entry-text-red"><em>strongタグを赤太字で表示させる</em></strong>ために書き方に工夫をします。</p>でもemタグをstrongタグの内側に書くのは止めにします。emタグとstrongタグではそもそも役割が違う訳ですからね。
代わりにこうしたらどうかな。h2タグの時に使ったCSS設定です。
AMP配信で<strong class="entry-text-red entry-header__theme__anchor">strongタグを赤太字で表示させる</strong>ために書き方に工夫をします。</p>AMP配信でstrongタグを赤太字で表示させるために書き方に工夫をします。
最後にmarkタグの効果を確認しておきます。アメブロのAMP配信用CSSではmarkタグに特段の指定がありません。つまりユーザーエージェント（ブラウザ）の素の効果が表示されます。
普通は黄色の背景色になりますが、この黄色が蛍光色のようにやけに濃いんですよね。はるなぴは普通この黄色を少し薄めにして読みやすくしています。でもAMP配信用のページではこうした独自CSSを当てられません。念のためどのように表示されるかだけでも確認したいと思います。markタグで囲むとこのように表示されます。
AMPのリスト表示
リストがAMP配信用のページでどのように表示されるのかも確認しておきます。
アメブロが用意しているAMPのCSSは次のように書かれています。
.entry-text ul{list-style-type:disc}
.entry-text ol,.entry-text ul{margin:1em 0;padding-left:40px}
.entry-text ol{list-style-type:decimal}
.entry-text li[style*="text-align: center"],.entry-text li[style*="text-align: right"]{list-style-position:inside}
箇条書きリスト
- 秀丸エディタ
- 秀丸マクロ
- Markdown記法
番号付きリスト（olタグ）
- 秀丸スーパーライセンスパック
- 秀丸エディタ
- 秀丸メール
- 秀丸ファイラ クラシック
- 秀丸アマゾンサーチ
- マークダウン記法
- Github Flavored Markdown
- Original Markdown
AMPのblockquote（引用）表示
アメーバブログが提供しているAMP配信用のCSSではblockquoteのCSSを次のように指定しています。
.entry-text blockquote {
border-left:1px;
solid #999;
margin:1em 0 1em 20px;
padding:0 0 0 1em
}この文章はblockquote（引用）で書いています。AMP配信ページでどのように表示されるのか実験してみます！もう少し書きましょうか。引用文は引用元をきちんと明示して書くことが必要です。気をつけましょうね。
AMPのブロックコード用CSS
アメーバブログが提供しているAMP配信用のCSSを利用してブロックコードらしい表示ができるよう工夫します。。
.rankitem__ranklabel__2{background:#999;border:1px solid #999;color:#fff}このCSS設定を利用してブロックコードのHTMLを次のように書きます。正確には秀丸マクロでpreのHTMLタグを置換します。
<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>これでパラグラフライティングが分かりやすくなると思いますよ。これが第1の段落です。
ここからは次の段落です。意味のまとまりを考えて検索キーワードを入れるんです。これが第の段落です。
AMPのテーブル(table, td, th）表示
| サービス | 特徴 | 評価 |
|---|---|---|
| はてなブログ | おたく | 〇 |
| FC2 | H | △ |
| 2ch | 論外 | - |
| ライブドア | 炎上 | △ |
| アメブロ | 最高 | ◎ |
てへペロ
AMPの目次（TableOfContents）表示
AMPページでは独自設定したCSSが効きません。はるなぴは目次にTOCのCSSを書いています。これが効かないので代替を考えます。要は囲み枠が表示されればいいわけです。（本当は背景色も変えたいですが…）
そこで
.l-border{border:1px solid #e2e2e2}を利用します。更にマージンも付けます。
.l-m-t{margin-top:1rem}
.l-m-r{margin-right:1rem}
.l-m-b{margin-bottom:1rem}
.l-m-l{margin-left:1rem}これらをすべて利用します。
<div class="toc l-border l-p-t l-p-r l-p-b l-p-l">
<ol>
<li>目次1</li>
<li>目次2</li>
<li>目次3</li>
</ol>
</div>これで出来上がり！というか秀丸マクロを使ってHTMLタグを一気に変換します。こんなのすべて手打ちではとてもやってられません。その話（秀丸マクロ）はまた別途！
- 目次1となる見出し
- 目次2となる見出し
- 目次3となる見出し
AMP用CSS設定で気になる点
今アメブロから用意されているAMP用CSS設定を利用してデザインを考えています。
でもこのCSS設定がある日突然変更になったら全てが水の泡になります。AMP用の設定をするにあたっては直接タグに書き込んで実現しています。だからもしCSS変更を反映させるならすべてのページの記事を書き替えないといけなくなります！
アメーバブログには後からAMPのCSSを追加するのは構いませんが、前あったCSS設定を削除するのだけは止めにして欲しい、とお願いしたいところです。
こういうリスクを背負っていますのでAMP用のデザインをどこまで追求するのかはよく考えないといけません。商用利用（は本当は禁止されていますが）に近いことをしているサイトでは控えめにすることも考えた方が良いと思います。
はるなぴは…もうここまで考えて実験したんだから思い切りやってしまいましょうかね（笑）
記事の内容
AMPとかGoogle検索で本当に上位表示を狙うならやっぱりそれなりに記事もちゃんとしなくちゃいけません。
アメブロでは検索上位表示が弱い…それは当たっているところもありますが、そもそも記事の書き方が本気になってないというのもあります。はるなぴの記事も本気で狙ったものはそんなに多くはないです。
でもAMP対応とか言い出すなら少しは考えなくてはいけないかもしれません。画像もきっちり載せてそれらしい雰囲気を出さないと。今のところ文字ばっかりという記事が多いですよね。みなさん良く読んでくださると思います。でも素人向けの記事ばかり書いても仕方ないですからね。
みんなで濃い技術記事を書けばアメブロでも勝てるようにならないかなぁ。今例えば技術系で検索すると上位はQiitaや「はてなブログ」ばっかりです。それか公式サイトか。
ちなみに検索キーワードが「アメブロ AMP配信」ならね…はるなぴの記事が1位表示です！それだけアメブロで技術記事を書く人が少ないってことですね。
でもね、すべての記事を本気で書くのは疲れますからねぇ。気楽に日記で書けるブログを別に作ろうかな。アメブロでは複数サイト持つのに別ID取らなくてはいけないのが困りますね。5つぐらいは同じIDで作らせてほしいなぁと思います。（はてなが3つだからね）
さて、今後はモバイルでのCSSカスタマイズ大実験、PC版でのCSSカスタマイズ大実験もやっていきます。
アメブロが初心者向けという説明を見かけることがありますが、とんでもないです。いろいろと制約がある分、それを乗り越えるには技術が必要です。はるなぴにとっては非常に難しい（しかし調査、実験のしがいのある）ブログシステムだと感じています。