アメブロのAMPページでテーブルを表示するCSS

アメブロのAMPページでテーブルを表示するCSSを記事にしました。

tableタグ、thタグ、tdタグを使ってテーブル表示をさせた場合、アメブロのAMPページでは枠線が一切表示されません。テーブル内の項目だけが表示され非常に分かりにくくなります。このためアメブロで敢えてテーブル表示を利用している人は少ないようにみえます。

今回はアメブロ側が用意してくれたAMP用のCSSを利用することでテーブルの枠線を表示させ、テーブル内の項目も中央寄せになるようにしてみました。

これでアメブロでも安心してtableタグが使えます。というか、はるなぴはマークダウン記法で記事を書いていますので、もともとテーブル表示が非常にかんたんにできます。

アメブロAMPページのCSSを利用する

アメブロが用意している次のAMPページ用CSSを使います。

.blog_info__main {width:100%}

このCSS設定をtableタグに効かせててテーブルの幅をカラムいっぱいに拡大します。

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

次にこのCSSをthタグ、tdタグに適用してテーブルの枠線を表示させます。

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

そしてこのCSS設定を利用してテーブルに表記したいアイテムを中央揃えにします。

テーブル表示のHTMLを変換する

はるなぴはマークダウン記法でテーブルを書いています。これはとてもラクチンです。マークダウン記法では次のように書くだけです。

|サービス|特徴|評価|
|---|---|---|
|はてなブログ|おたく|〇|
|FC2|H|△|
|2ch|論外|-|
|ライブドア|炎上|△|
|アメブロ|最高|◎|

これを秀丸マクロを用いていったんHTMLに変換します。さらにこのHTMLを先ほどのアメブロのAMP用CSSを組み込んだ形に変換します。これら変換用の秀丸マクロについてはまた別途詳しく説明します。

この変換によって次のテーブル表示用のHTMLが簡単に得られます。

<table class="blog_info__main">
    <thead>
        <tr class="header">
            <th class="l-border l-text-center">サービス</th>
            <th class="l-border l-text-center">特徴</th>
            <th class="l-border l-text-center">評価</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="l-border l-text-center">はてなブログ</td>
            <td class="l-border l-text-center">おたく</td>
            <td class="l-border l-text-center">〇</td>
        </tr>
        <tr class="even">
            <td class="l-border l-text-center">FC2</td>
            <td class="l-border l-text-center">H</td>
            <td class="l-border l-text-center">△</td>
        </tr>
        <tr class="odd">
            <td class="l-border l-text-center">2ch</td>
            <td class="l-border l-text-center">論外</td>
            <td class="l-border l-text-center">-</td>
        </tr>
        <tr class="even">
            <td class="l-border l-text-center">ライブドア</td>
            <td class="l-border l-text-center">炎上</td>
            <td class="l-border l-text-center">△</td>
        </tr>
        <tr class="odd">
            <td class="l-border l-text-center">アメブロ</td>
            <td class="l-border l-text-center">最高</td>
            <td class="l-border l-text-center">◎</td>
        </tr>
    </tbody>
</table>

あとはこれをアメブロエディタのHTML窓にコピペすればOK。AMP配信でもきれいにテーブル表示が可能になります！

サービス	特徴	評価
はてなブログ	おたく	〇
FC2	H	△
2ch	論外	-
ライブドア	炎上	△
アメブロ	最高	◎