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

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

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

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

 

 

 

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

気付いたかな?

 

 

 

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

 

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

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

 

 

 

 

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

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

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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

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

 

 

 

 

なんか違う(笑)

これじゃ軽いよね。

 

 

 

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

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

 

 

 

 

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

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

 

 

 

 

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

 

 

 

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

 

 

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

 

 

 

 

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

 

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

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

 

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

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

 

 

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

 

ABOUTこの記事をかいた人

増田 恵美

【学芸会で終わらないビジネスを作る】をモットーに、セミナー講師、コンサルタントとして活動中。Webを使った集客、検索に強いサイト作りを得意としている。女性心理のツボを突く集客で好評をいただいております。