スポンサーサイト

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2 ブログでのフィーチャフォンへの配慮

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有

私は、今までジャンルごとにアメブロと FC2 ブログを使い分けておりました。

しかし、アメブロが余りにも不満だらけだったので、とうとう堪忍袋の緒が切れてしまい、結局アメブロでやっていたジャンルもこの FC2 第二出張所に"脱北"してしまいました。

当出張所を開設する前から FC2 ブログさんにもお世話になっておりますが、使う事自体が苦痛だったアメブロと違い寧ろ快適な環境だと満足しております。



目次



モバイルでどう見えるか分からないアメブロ

さて、アメブロではフィーチャフォン向けはおろか、スマートフォン向けのページデザインのカスタマイズも出来ません。

それどころか、フィーチャフォンやスマートフォンではどのように変換されるのかをプレヴューなどで知る事すら許されません。

どのように変換されるのかが分からなければ、これらのモバイル閲覧者を知らず知らずに門前払いする結果にもなり兼ねません。

その意味で、モバイル端末を想定したプレヴューは絶対に必要だと思います。

  • ウェブブラウザのアドオンなどを用いてユーザエージェント文字列を偽装するなどの方法もありますが、アメブロの場合フィーチャフォン向けは本物の携帯電話でないと IP アドレスで弾かれてしまう問題があります。


FC2 ブログのフィーチャフォンでの注意点

さて、FC2 ブログの場合、フィーチャフォンだとどう見えるかもプレヴュー出来、フィーチャフォン向けのテンプレートも自由にカスタマイズする事が出来ます。

で、プレヴューしていて気付いた点とその対策を挙げておきます。



見出しのマークアップは消えてしまいます

フィーチャフォンに対しては、見出し(<h○>要素)について、その開始タグと終了タグが取り払われてしまうと言う実装になっております。

確かに、昔のフィーチャフォンのブラウザでは見出しについて特別なスタイルになっていない場合が多かったようです。

ですが、昨今の端末では一廻り大きな文字にしたり太字で表示されるようになっており、見出しと分かり易くはなっております。

とは言え、そこまで手を加える事は不可能なので、こちら側で工夫するとよいでしょう。

具体的には、

  • 見出しの直前に<hr>要素を入れて直前に横罫線が入るようにする
  • 見出しと分かり易くなるよう、見出しテキストの前に などの記号を付ける

などの工夫をするのです。

こうすれば、見出しの直前の横罫線でセクションが区切られている事を認識出来、テキスト前の記号に依りそれが見出しと分かるるようになるでしょう。

この<hr>要素や見出し前の記号は、PC やスマートフォンで見ると邪魔になるだけなので、CSS で非表示にすれば良いでしょう。

具体的には、以下のようにマークアップします:

<hr class="section"/><h3><span class="forMobi">■</span>(見出し)</h3>

尚、見出しテキスト前につける記号は、見出しの等級毎に異なる記号にしましょう。

本ウェブログの場合、記事の大見出しは<h2>要素となるので、

  1. 中見出し<h3>要素は
  2. 小見出し<h4>要素は
  3. 更に小さい見出し<h5>要素は を付け、
  4. 一番小さい見出し<h6>要素には記号無し

としております。



無理にテキストマークアップをしなくても良いでしょう

ドコモの旧型端末の場合、<em>要素<strong>要素は反映されません。

このため、何らかのスタイルを与えたいと思うかも知れませんが、個人的には無理してスタイルを与える必要はないと思います。

既に該当する端末は希少になっており、そんな端末のために労力を費やす必要はないのではと思います。

取敢えずテキストとして読めれば意味は伝わるので、その程度でいいと思います。

  • これらの端末では、インラインでスタイルを与えるには<font>要素を使うしかなく、今更そんなものを使おうと言う気にはならないでしょう。


フラグメントは<a>要素で実現しましょう

<a>要素の name 属性は使用こそ認められているものの、HTML5 では廃止扱いになっております。

とは言うものの、ドコモの旧型端末では id 属性をアンカーとして認識しません。

確かに、これらの端末は希少になってはいるとは言え、ページ内アンカーが使えないとユーザビリティに多大な悪影響を及ぼしますので、対処する必要があると思います。

このため、ページ内の主要なアンカーについては、id 属性ではなく name 属性を与えた<a>要素で与えるようにしましょう。

具体的には、

<h3 id="HORIKITA_MAKI">堀北真希ちゃんについて</h3>

とはせず、

<hr class="section" /><h3><span class="forMobi">■</span><a id="HORIKITA_MAKI" name="HORIKITA_MAKI">堀北真希ちゃんについて</a></h3>

としてやるのです。

僅かな工夫で、操作性が悪いフィーチャフォンでも少しでも楽にアクセス出来るようになるでしょう。



<hr>要素を活用しましょう

端末にも依りますが、フィーチャフォンの場合、ブロックについては<p>要素要素以外は空行を入れてくれません。

このため、フィーチャフォンで見ると、行が詰まって大変読み難くなる事が考えられます。

ドコモの旧型端末では CSS が使えないため、この問題は深刻になるでしょう。

このため、セクションのみならず、話題を変える場合などに<hr>要素などで区切りを入れると良いでしょう。

HTML5 でも、<hr>要素は段落の区切りとして定義されており、そのような使用法は合法となります。

ただ、PC やスマートフォンでは却って目障りになる場合もありますので、そのような場合には CSS で非表示にすればよいでしょう。



まとめ

数が少なくなってきたとは言え、フィーチャフォンの利用者数は今も決して無視出来る数字ではありません。

そう考えると、もうしばらくの間はフィーチャフォンへの配慮を続ける必要があると思います。

私がアメブロを脱北した最大の理由は、フィーチャフォンの方へのサーヴィスの縮小に血道を上げているのが、フィーチャフォン切捨てにしか見えなかったからです。

私の周りは勿論、いつもお越しになる方にもフィーチャフォンをお使いの方は沢山おります。

その事を考えると、サイバーエージェントのやり方はどうしても許せなかったのです。

関連記事
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。