アメブロのAMP対応ページ(gamp)で見出しや囲み枠を表現するには

アメブロのAMP対応ページは、スタイル(CSS)を使った装飾などがことごとく無視され、さらに、見出し(h2タグなど)も文字サイズや文字のウェイト(太さ)が通常文字と同じとなってしまいます。

アメブロのAMP対応ページの表示についてはこちら↓

なので、せっかく記事内に見出しや囲み枠を置いて、メリハリのあるわかりやすい記事を書いても、その努力は全く生かされません。

かと言って、今後はAMP対応ページがGoogle検索結果に表示されることが多くなってくると思いますので、放置というわけにもいかないですよね。

なので、ちょっと考えてみました。

AMP用に『文字でラインや枠を表現する』というのはどうでしょう?

↓こんな感じです。

いわゆるAA(アスキーアート)の一種ですね。

最近は使う人も減りましたが、以前はメールとかでよく目にしました。

幸か不幸か、記事内で「display:none」のスタイルを設定した通常ページでは表示されない非表示要素も、AMPでは表示されますので、AMPでだけ表示したい『文字で作ったライン』を非表示要素として見出しや囲み枠の部分に入れておけば実現できます。

例えば、h3見出しを↓このように書いたり、

<h3 style="border-bottom:1px solid #333;border-left:4px solid #333;padding-left:8px"><span style="display:none">----------------<br></span>★ここに見出しの文字を書きます★<span style="display:none"><br>----------------</span></h3>

囲み枠を↓このように書いたりすると、

<div style="border:2px solid #f00;padding:10px"><div style="display:none">◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆</div>★ここに囲み枠の中の文字を書きます★<div style="display:none">◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆</div></div>

通常のページでは、「大きめで太い文字の見出し」や「赤い線の囲み枠」が表示されますが、AMP対応ページでは、見出しや囲み枠となる部分の上下に、文字で作ったラインが表示されます。

実際に以下に見本を書いてみますので、もしよかったら確認してみて下さい。

ちなみに、AMP対応ページはこちらです^^

・・・でも、ここまでの表示はAMPを考慮して書いてないので、AMPではメチャクチャ崩れてると思いますが・・・(^_^;)

====== 以下、表示見本 ======

----------------
記事内見出し記事内見出し記事内見出し
----------------

リンク文字リンク文字リンク文字

通常文字通常文字通常文字通常文字通常文字通常文字通常文字通常文字

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

囲み枠の中囲み枠の中囲み枠の中

囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中

囲み枠の中囲み枠の中囲み枠の中

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆