アメブロをAMPで簡単に見やすく表示させる方法

アメブロから始まるWeb集客の仕組み作り。

女性の集客専門アドバイザー・増田恵美です。

ブログ初心者、パソコン苦手な女性に向けてWeb集客のアドバイスを書いています。

数日前から、アメブロをAMPで見やすいように変えました。

気付いたかな？

アメブロをAMPで見やすくするために試行錯誤

AMPでは、囲み枠など従来のHTMLで記載されたものは表示されません。

モバイル版で見た募集中のセミナー・イベント情報はこうですが…

AMPだとこんな表示になります。

上下の文章との区切りがないので、強調もされないし、ダラダラした感じになります。

同じようにステップメールのバナーもモバイル版では囲み枠に入っていますが

AMPだとこのように、ダラダラした表示になる。

囲み枠が表示される前提で作ってあると、AMPでは見にくいのです。

そこで、タイトルの所に絵文字を入れてみました。

なんか違う(笑)

これじゃ軽いよね。

タイトルの所に菱形の記号とボーダーを入れてみました。

モバイル版では囲み枠の上にボーダーが入っています。

AMPでは◆で囲まれたタイトルの上にボーダーです。

なかなか見やすくなったと思いませんか？

因みに、ボーダーを２本入れてしまうと、モバイル版では２行になってしまいました。

色々試してみましたが、シンプルなボーダーを１本が良いようです。

パソコン表示（スマホの）でも特に問題はありません。

アメブロをAMPで綺麗に表示させるには

①囲み枠のタイトルになる部分は記号を入れてタイトルだとわかるようにする

②囲み枠の上下にはシンプルなボーダーを１本入れる

これでAMPでもかなり見やすくなります。

 
やってみてくださいね＾＾

７日間で集客ブログが完成する無料メール講座読者登録はこちらからから画像クリックで登録フォームに飛びます。