続・まままらぬスマートフォン向けブログデザイン

Before and After  修正前（左）と修正後のiPhone画面キャプチャー

昨年暮れグーグルのブログサービスBloggerのモバイル向けテンプレートについて「まままらぬ…」という主旨の記事を投稿したが、その続きである。写真は最近書いた催事案内のiPhone画面キャプチャーだが、左を見ると日時などの項目見出しが折り返されて２行表示になっている。またスマートフォンは横幅が狭いため、文字が大きいと内容記述が複数行になって垂直方向の高さが膨らみ、見出しとの位置関係が不自然になってしまった。

<table><tbody>
<tr><th>日時：</th><td>2014年2月16日（日）13:00～16:00</td></tr>
<tr><th>会場：</th><td>池坊短期大学こころホール（洗心館地下１階）</td></tr>
<tr><th></th><td>京都市下京区四条室町鶏鉾町（アクセス）
<tr><th>料金：</th><td>無料（往復はがきによる応募方法）1月31日当日消印有効</td></tr>
<tr><th>定員：</th><td>193名（先着順）</td></tr>
<tr><th>演目：</th><td>『えびすかきによる「えびす舞」』（西宮・人形芝居えびす座）</td></tr>
<tr><th></th><td>『生写朝顔日記　宿屋の段』（京都・和知人形浄瑠璃会）</td></tr>
（途中略）
</tbody></table>

ソースは以上の通りで表（テーブル）タグを使っている。そこで対処法として新たにCSS（スタイルシート）を追加援用することにした。日時などの項目見出しセル<th>内のテキストを自動的に折り返さないようにし、しかもその位置を上揃えにするために<th style="white-space: nowrap; vertical-align: top; ">日時:</th>という記述をしてみた。しかしセルごとに属性を埋め込むのは面倒、以下の赤字の文字列を貼りつければ一括指定できると思い付いた。この方法だとフォント指定や罫線の表示なども可能である。恥ずかしながら気付くまで時間がかかったが、一応不具合は是正されたようだ。

<style type="text/css">
 table {border-spacing: 5px 0px; }
 th {white-space: nowrap; text-align: left; vertical-align: top; }
</style>
<table><tbody>
<tr><th>日時：</th><td>2014年2月16日（日）13:00～16:00</td></tr>
（途中略）
</tbody></table>

もっとうまい方法があるかもしれないが、今のところこれしかアイデアが私には浮かばない。スマートフォンの表示までこだわるとキリがない。しかしながら繰り返しになるが、スマートフォンの普及は物凄く、デスクトップではなくモバイル環境でネットにアクセスする人が多い。従って無視できないご時世、対処せざるを得ないのである。余談ながら何かと困りもののマイクロソフトIEへの対処法について機会があればいつか書きたい。