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

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

FC2 ブログは、PC からのみならず、フィーチャフォンやスマートフォンからも閲覧が出来ます。

ただ、フィーチャフォンでの閲覧は、かなりの苦痛が伴うと思われます。

ここでは、フィーチャフォンでも FC2 ブログを少しでも楽に見られるようにする方法を考えたいと思います。

  • この記事の内容は、HTML や CSS などの知識を要し、内容はかなり難しいかも知れません。

はじめに

多くのウェブログは、比較的短い記事が多いのですが、制作者の場合、どうしても長い記事になってしまいます。

そうなると、フィーチャフォンでは全体を追うのが容易でなくなってしまいます。


実際に執れる対策

フィーチャフォンでの閲覧を少しでも容易にするには、以下の方法が考えられます:


セクション分けを行う

文書を細かくセクションに分ける事で、参照すべき箇所の特定が容易になります。

各セクションには、<h3>要素で見出しを付けておきます。

その際に必要な工夫

但し、FC2 のフィーチャフォンでの仕様を考慮すると、以下の工夫が必要になります:


見出しの前に<hr>要素で区切り線を入れる

FC2 ブログでは、フィーチャフォンに対しては、<h○>要素の開始・終了タグを取り払ってしまう問題があります。

このため、セクションの区切りが判り難くなります。

そこで、セクションの初め───すなわち見出しの直前に<hr>要素で区切り線を入れます。

この区切り線は PC やスマートフォンでは無用なので、予め適切なクラス名を決めておいて、CSS で非表示にしておけばよいでしょう。


見出しテキストに、id 属性と name 属性を与えた<a>要素を入れる

<h○>要素の開始・終了タグを取り払ってしまうと言う事は、当該要素に与える id 属性が使えなくなる事を意味します。

更に言えば、ドコモの端末の中には、id 属性をフラグメントとして扱えない機種があります。

このため、同じ値の id 属性と name 属性を与えた<a>要素を用いる必要があります。


ケータイ用テンプレートを修正する

ケータイ用テンプレートには、<base>要素が含まれているため、アンカに依るページ間の移動が正しく出来ません。

そこで、テンプレートからこの<base>要素を取払ってしまいます。

  • 尚、要素がなくても、実際のナヴィゲーションは全て絶対 URL で与えられているので実は一切問題はありません。

実例

実際に例を挙げてみましょう。

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

と言う見出しは、以下のようにしないとフィーチャフォンでは役に立ちません。

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

面倒ではあるのですが、フィーチャフォンの事を考えると、こう言う工夫は欠かせないでしょう。


冒頭に各見出しへのアンカーを設ける

セクション分けを行い、各セクションに見出しを与えれば、それらに対するアンカーを設ける事が出来ます。

これに依り、閲覧者は最も見たい部分に迅速にアクセス出来るようになるでしょう。

但し、これが正しく機能するようにするには、前述の通り見出しとテンプレートに工夫が必要になります。


さいごに

フィーチャフォンへの配慮を完璧にしようとすると、どうしても複雑になり過ぎてしまいます。

なるべく記事が長くならないようにするのが、実は一番なのかも知れません。

スポンサーサイト