2013年05月16日の日記です


デザイン変えた  2013-05-16 17:33:11  コンピュータ

ここ数日で、この WEB サイトのデザインを少しいじりました。

…本当に少しね。絵心あるわけでもないし。それほど変えられないから。


今までは左側に「ページナビゲーション」、右側に google の広告などを出していました。

これは、Netbook (すでに死語だ…) などが流行した時に作ったデザインで、「画面が狭くて右側が見えなくなっても致命的でない」デザインを目指したものでした。


でも、本文が少し狭かった。


Netbook 対応以前は画面横幅いっぱいに本文を表示する、「WEB黎明期」スタイルだったので(だって、黎明期の時代に作り始めたのだもの…)、一部の文章は横幅が狭くなりすぎたことで非常に読みづらくなっていました。

(あまりにひどいところは気づいたときに手直ししていましたが)



で、いまどきスマホでも Netbook より広い画面になっているのだから、Netbook 対応はいらないよね、ということで、本文の領域を広げました。


左側にあったナビゲーションを無くし、右の広告スペースの下に押し込めました。

以前から「長いページでナビゲーションに戻るのが面倒」と自分で思っていたので、スクロールしても画面内にナビゲーションだけついてくるようにしました。

(広告はスクロールで消え去ります)


…が、これ、使いにくくなった、と自分でも思った。

視線の移動を考えると、右下っていうのは一番最後。目次を探しにくいし、ページを表示してすぐに「別のページに移動したい」と思ったときに面倒極まりない。

(そういう読み方するのはおそらく作者である僕だけですが、僕が使いにくいのは問題がある)


そこで今度は画面上部に、いわゆる「パンくずリスト」を付けたのですが、微妙にいままでの「ナビゲーション」と機能がかぶる。


じゃぁ、いっそのことパンくずリストに統一してしまえ、というわけで、パンくずリストの「階層表示」に、階層の水平移動機能を付けました。

マウスオーバーで、同じ階層の別コンテンツが表示されます。


この、新しいナビゲーションは常にコンテンツ上部に表示されています。

あまり大きな表示は邪魔くさいので、縦 30px だけね。


パンくずリストは、よくありがちなのは「→」や「>」で階層を表示するのだけど、そこは技術者なので、URL っぽくしてみました。

一番上の階層が // で始まって、以降は / 区切りです。


UNIX の path や DOS の C:\ で始まる表示も考えたのだけど、一般的には URL がわかりやすいかな、ということで。




ついでに? こっそり、日記の整形方法も変わっています。


いままで、本文は p タグで行を区切っていたのに、日記は br でした。

自分としては p に統一したかったのだけど、「面倒くさくて」分断されたままだったの。


…もしかしたら、日記表示がおかしくなっている個所もあるかもだけど、気づいたら直します。



同じテーマの日記(最近の一覧)

コンピュータ

関連ページ

デザイン変えた【日記 16/11/03】

システムちょっと改変【日記 13/05/23】

別年同日の日記

14年 アイバン・サザーランドの誕生日(1938)

16年 フェスタと祭り

16年 ブレッドボードと IchigoJam


申し訳ありませんが、現在意見投稿をできない状態にしています


戻る
トップページへ

-- share --

0000

-- follow --




- Reverse Link -