• 07 May
    • AMPでも読みやすいアメブロ記事の書きかたを考えてみました

      アメブロがAMPに対応して、スマホでGoogleモバイル検索した検索結果に表示される記事が、どんどんAMP化してきました。なので、「私のブログには、Googleからスマホで検索して来る人はいません!」という人を除き、今後は、AMPでの表示を考慮した記事の作成が必要になってきそうですね。AMPって何?AMPは、簡単に言うと、モバイル向けの高速表示ページで、スマホなどで検索したユーザーに対して、実際のブログ記事ページとは違う、素早く表示できる代わりのページを提供する仕組みです。AMPに対応すると、Googleモバイル検索のカルーセルに表示される可能性があるなど、対応しない場合と比較して、検索からのより多くの流入を期待できます。ただし、高速表示に特化した仕様のため、使えるタグやタグの属性に制限が多く、思ったような記事ページを作るのが難しいといった面もあります。アメブロは既にAMPに対応済みなので、これからスマホで検索してブログ記事を見つけてくれる人は、実際のブログ記事ページではなく、AMP対応ページを見るようになっていくと思って良いと思います。アメブロのAMP対応ページタグやタグの属性に制限の多いAMPですが、更にアメブロのAMP対応ページでは、ユーザーはCSSファイルやstyleタグを使ったスタイル指定(CSSを使った見た目の装飾)をすることもできません。なので、記事作成時に、文字を太字や目立つ色にしても反映されませんし、囲み枠も囲み枠として表示されません。また、標準設定されているスタイルが、見出し、リスト、引用などが、全て通常文字と全く見分けがつかないという、個人的にちょっと酷いと感じる状態です。ですので、これらの視覚効果よる読みやすさに頼った記事の書き方をすると、非常に読みにくくなります。つまり、AMPでも記事を読みやすくし、内容をうまく読者に伝えるためには、これまでとは少し違う工夫が必要になってくると思います。アメブロのAMP対応ページの表示についてはこちらの記事を参照下さい。アメブロのAMP対応ページで使えそうなタグは?というわけで、読者に記事の内容をうまく伝えるために、どんなタグが使えそうか?を考えてみました。強調まず、「ここが重要!」「ここを強調したい!」といった場合、通常なら「strong」や「em」などのタグを使ったり、あるいは、「style」で文字サイズを大きくしたりするところだと思いますが、アメブロのAMP対応ページでは、これらは通常文字と同じ見た目になり、全く見分けがつきません。また、見出し(h2、h3、h4・・・)も、全く強調表示されませんので、やはり通常の文字と見分けがつきません。そこで、何かないか探してみたところ、「uタグ」と「markタグ」が使えそうです。uタグは、昔からあるHTMLタグで、文字に下線(アンダーライン)が引かれます。markタグの方は、黄色のマーカーペンで線を引いたような効果です。どちらも多用すると見苦しくなりそうですが、「ここだけはAMPで見たときも是非とも強調表示したい!」という箇所には、これらを使ってみてはいかがでしょうか。囲み枠また、囲み枠は、一般的に「div」や「blockquote」というタグに「style属性」という情報で装飾して作成しますが、AMPでは仕様上「style属性」が使えません。何とかならないものかと色々と試行錯誤してみましたが、残念ながら、アメブロのAMP対応ページで「囲み枠」としての表示をするのは、諦めざるを得ないと思われます。ただ、画像を表示することはできますので、どうしても囲み枠的に目立たせたい箇所には、その部分の上下に、(以前流行った?)画像の飾り罫線を置いてみてはいかがでしょうか。↓例えばこんな感じです。■見出しに当たる部分はuタグで告知したい内容を書きます。告知したい内容を書きます。告知したい内容を書きます。告知したい内容を書きます。告知したい内容を書きます。告知したい内容を書きます。大事な内容はmarkタグで強調。大事な内容はmarkタグで強調。大事な内容はmarkタグで強調。罫線の画像はこちらでお借りしました。スマートではないかもしれませんが、何も装飾されない状態で表示されるのと比べると、悪くはないように感じます。なお、画像タグ(imgタグ)には、必ず「width属性」と「height属性」を記述しておく必要がありますので、ご自身でimgタグを書く、あるいは外部のエディタなどを利用されている方はご注意下さい。まとめというわけで、以上、AMPでも見栄えのするアメブロ記事の書きかたを考えてみました。ちなみに、この記事も、上でご紹介したタグを使って書いてありますので、もしよろしければ、スマホでAMP対応ページを確認して、どのように表示されるのか見てみて下さいね。この記事のAMP対応ページはこちらです。以上、参考にしていただけたら嬉しいです。

      56
      2
      1
      テーマ:
  • 10 Apr
    • AMP用(gamp)ページだけに正式な記事へ飛ぶリンクを表示したい

      アメブロのAMP用ページには、正式な記事ページを表示するためのわかりやすいリンクがありません。記事タイトルもリンクになっていないので、タップしても無反応です。そこで、AMP用ページだけに正式な記事へのリンクを表示する方法を考えてみました。まず、例をお見せします。↓AMPで見ると、ここに当記事の正式ページへ飛ぶリンクが表示されます。[ 簡易ページで表示されています。正式なページを見るにはここをタップして下さい。 ]↓実は、こんなタグを書いてあります。<a href="記事のURL" rel="nofollow" style="display:none">簡易ページで表示されています。正式なページを見るにはタップして下さい。</a>特徴は、style="display:none"の部分で、「この部分は表示しません」という意味のスタイル指定ですが、アメブロのAMP用ページではこのようなスタイル指定は全て削除されますので、結果、AMPだけでこのリンクが表示されます。あと、細かいことですが、普段は隠れているので「隠しリンク」として検索エンジンから不当な評価を受けないように、念のため「rel="nofollow"」も入れてあります。リンクをタップして正式ページを見てくれるかどうかは読者次第ではありますが、現時点で、アメブロのAMP用ページは、・画像が小さくてとても見にくい・見出しすら通常文字と見分けがつかないというとても残念な表示になっているだけでなく、冒頭に書いたように、正式な記事ページを表示するためのわかりやすいリンクもありません。アメブロのAMP用ページの残念な表示についてはこちら↓『アメブロのAMP対応ページが酷すぎて泣ける件』アメブロでAMPが用意されるようになってどのくらいになるのか忘れましたが、当ブログでも、スマホでGoogle検索するとAMPが表示されるページがあったので見て… [ブログカード風リンクタグ作成]実際に検索結果からGoogleにキャッシュされたページが表示される時には、画面の上の方に正式ページへ行く手段があるにはあるんですが、スマホで検索した時にはAMP表示となるのが当たり前になるまでは、ほとんどの人はこれに気付かないでしょう。なので、こういったリンクを表示しておくことは、書く側の正式ページを見て欲しいという希望だけでなく、記事をしっかり読みたいと思ってくれる読者への配慮にもなるのではないでしょうか。つまり、Win-Winということで^^将来的にAMPが当たり前になり、また、アメブロのAMP用ページがもう少し改善されれば、こんなことを考える必要もなくなるかもしれませんが、今はまだ、いろいろと工夫する必要がありそうですね。注意事項(2015年末頃~)の新型のPC版デザインで、タイムライン型(リスト型)を使っている場合、「display:none」としても、リンクの文字が一覧ページには表示されてしまいますので、ご自身のブログのカスタマイズ状況に合わせて、記事のどの位置にリンクを表示するかも検討してみて下さい。ちなみに、画像ではわかりやすいよう色付けしてありますが、実際は通常の文字と同じ表示になります。こんなに派手に目立って表示されるということではありませんので^^;

      40
      1
      テーマ:
  • 08 Apr
    • アメブロのAMP対応ページ(gamp)で見出しや囲み枠を表現するには

      アメブロのAMP対応ページは、スタイル(CSS)を使った装飾などがことごとく無視され、さらに、見出し(h2タグなど)も文字サイズや文字のウェイト(太さ)が通常文字と同じとなってしまいます。アメブロのAMP対応ページの表示についてはこちら↓『アメブロのAMP対応ページが酷すぎて泣ける件』アメブロでAMPが用意されるようになってどのくらいになるのか忘れましたが、当ブログでも、スマホでGoogle検索すると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ではメチャクチャ崩れてると思いますが・・・(^_^;)====== 以下、表示見本 ======----------------記事内見出し記事内見出し記事内見出し----------------リンク文字リンク文字リンク文字通常文字通常文字通常文字通常文字通常文字通常文字通常文字通常文字◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中囲み枠の中◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

      36
      テーマ:
  • 29 Mar
    • アメブロのAMP対応ページが酷すぎて泣ける件(追記有り)

      アメブロでAMPが用意されるようになってどのくらいになるのか忘れましたが、当ブログでも、スマホでGoogle検索するとAMPが表示されるページがあったので見てみたところ、あまりの酷さにちょっと泣けてきました・・・。ちなみに、AMPというのはこんなヤツです。ごく簡単に言うと、モバイル検索したユーザーに対して(本来の記事ページではなく)高速で表示される代替ページを提供する仕組みです。恐らく今後は、いろんなブログのいろんな記事でAMPが表示されるようになるのだと(既になっているとも)思いますので、どんなふうに違うのかちょっとご紹介したいと思います。ただし、飽くまでも、ある一つの記事で比較しただけですので、検証と呼べるようなものではありません。また、まだ仕様が流動的かもしれませんので、落ち着くまで時々確認して内容を修正していく予定です。それと、僕はスマホ向けページも少しカスタマイズしていますので、AMPでない方(各画像の左半分)が通常とは異なる部分がありますことご了承下さい。有料ユーザーなのに広告が表示される僕は、月1,000円ちょっとをアメブロさんに納めている「広告を外す」有料ユーザーですが、AMPでは記事上にバン!と広告が表示されました。更に、画面の下にくっつくあの広告もあります・・・。ガッカリです。【2017/05/05追記】「広告を外す」契約中の有料ユーザーには、これらの広告は表示されなくなったようです。【追記 ここまで】大見出しや画像や囲み枠が目立たない最新版エディタで「大見出し」とされているh2タグは、普通は太字の大きな文字で表示されるんですが、AMPでは、見た瞬間に見出しだとはとても気づきそうもないような、太字でもない普通サイズの文字で表示されました。そして、画像は、元の記事ではオリジナルサイズで貼り付けてあっても、小さなサムネイル画像になっています。【2017/05/05追記】画像は、imgタグにwidth属性とheight属性の両方が入っていない場合に幅220ピクセル固定になるようで、例えば、「width="400"」のようにちゃんと指定してあれば、そのサイズ(はみ出す場合は画面幅いっぱいまでに縮小)で表示されるようです。つまり、現在の記事エディタの画像貼り付け機能を利用していれば、width属性もheight属性も設定されるため、画像に関しては小さな表示にならないと思います。【追記 ここまで】更に、囲み枠で囲った箇所も囲み枠が外されてしまい、全く目立たなくなりました。中見出しもやはり目立たない大見出しが目立たなかったくらいですので当然かもしれませんが、中見出し(h3タグ)も、やはり太字でもない普通サイズの文字で表示されています。記事下も広告や関係のないサイトへのリンクだらけ記事上にも広告が表示されましたが、記事下にもたくさんの広告と、当ブログとは全く関係のない芸能人ブログなどへのリンクのオンパレードです。要は、「広告を外す」契約をしているブログにも、無料ユースの場合と同じ広告や宣伝が表示されているということでしょう。【2017/05/05追記】いわゆる「広告」は記事下に表示されなくなっていますが、関係のない芸能人ブログへのリンクなどは残ったままです。【追記 ここまで】改善してほしいですねというわけで、個人的に、本当に酷いと感じたんですがいかがでしょう?僕はあまり他人に対して「こうして欲しい」ということは言わないほうだと思いますが、さすがにこれは・・・AMPの性格上、表示が重くなるようなカスタマイズや、AMPで許可されていないタグなどが外されてしまうのは仕方がないとは思うのですが、・大見出し(h2)、中見出し(h3)くらいは、ひと目で見出しとわかるようにして欲しい・「広告を外す」ユーザーのページに広告や芸能人ブログへの大量のリンクを表示するのは辞めて欲しいと感じます。ちなみに、今回見たのはこの新デザイン用のアメブロカスタマイズ目次記事です。そして、それのAMP対応ページがこれです。

      104
      2
      1
      テーマ:

このブログの読者

読者数: 9,425

読者になる

プロフィール

松本

性別:
男性
お住まいの地域:
兵庫県
自己紹介:
.

続きを見る >

読者になる