スマートフォン向け可変レイアウトを作る

ワードプレスのスマートフォン表示を作りました。ウェブマスターツールに「リンクのクリック領域が近すぎる」と怒られたのでコードを追加。よく起られるんです。たしかに指先でクリックすると、狙いがはずれて隣接するリンクを押してしまいます。

CSSにこんな指定をしました。

@media screen and (max-width: 640px)

意味はウインドサイズの上限が640ピクセルに設定します。指定したのは以下の二点。

-ページの上部のリンクがスマートフォンなら文字サイズ2倍
-リンク文字の上下に20ピクセルずつ隙間をあけてミスタッチ回避

ウェブマスターツールへの対応はこのくらいにして、記事を書くことにします。何でも書いていいよと云われるとお題を決めねばならず、妙なプレッシャーを感じます。他人のサイトの微調整なら指針に合わせた作業で済むので気楽です。遊びで作るサイトのほうが、イザ作ってみると案外難しいのです。作業と創造は、よそから見ると似ていますが中身は全く違います。創造のほうが時間が掛かるのです。