last update: 2013/09/03

2005/06/02

3流ウェブデザイナー見参

もう6月ですが今年も残すところ…とかいうのはまだ早いですね。

GWあけたらヒマになるからいっぱい遊ぶんだーって思ってたんだけどなんか国際論文のための図をとりたいからビジュアル面を強化してくれ的な難題が降ってきてそれの相手してたらもう5月が終わってました。まぁ仕方ないので徹夜1日いれたら軽くそれで片付いたから別にいいんだけど。いちおう2nd authorの座をゲットしたけど別にそんなにうれしくないしなぁっていうか論文実績あげるために研究してるんじゃねぇんだよオレは。

まぁそんなわけで6月になっちゃいましたが、その論文関係の仕事は終わったのでさぁ6月こそいっぱい遊ぶんだーって思ってたんだけどなんか研究室のWebページがPukiWikiベースで書き直すとかいうことになってたまま放置されてたのがついに整備されることになったようで、なんか一応それなりにデザインしてるみたいなんだけどさすがに仮にも研究機関のWebサイトなんだからオレンジベースのデザインはだめだよなー的なことを思ってこっそり自分でも書いてたりするんですが、PukiWikiのul要素とかになんかmargin-leftが効かないんですよ。

で、CSSとSkinを色々調べてみたらさっぱり思い当たる節が無くて、じゃあ念のためソースも見てみるかということで見てみたらなんかstyle要素でそこに直接margin-left:16px;とか書いてあるんです。おいおいバカ言ってるんじゃないよと。

ってことでさぁどうしたものかって思ったんですが、PukiWikiのソースをいじって直すという手もまぁあるにはあるのですが、それをやると他のPukiWikiにSkinを回したときにそのPukiWikiのソースもいじらなきゃならないってことになるので、なるべくSkinだけで修正できる解決方法をさがしてるんですが、結局いいのが思いつかないなぁ。

結局、ulとかdlとかがmargin-left:16pxなのはどうしようもないので、であればdiv#bodyのpaddingをいじるしかないなってことでその方向で考えてますが(heading要素はマイナスマージンを入れてボックスの端に詰める)、これ、実はなかなかいいアイディアかも。いまのこのサイトだとpとかulとかは左マージンに3emぐらいとってるんだけど、pはネストされないからいいとしてulとかをネストしたときにさらに3emもマージンが入るとインデントが深く現れすぎて読みづらいっていうかかっこわるい。

ので、ul ulとかol ulとかul olとかol olのネスト関係のCSSを追加してそこではmargin-leftを1.5emぐらいとかに詰めてるんですよ。bodyブロックにpaddingつけてheading要素を負マージンでえぐるようにすれば、そこらへんulのネストとか考えなくてもよくなりそうでなかなか面白そう。っていうか思わぬ所からアイディアが生まれて来るものですね。

あぁちなみになんで研究機関のサイトでオレンジはダメかというと、赤系は良くも悪くも刺激の強い色なので、じっくり読まないとよく分かんないような研究に関するコンテンツをそろえるサイトにさすがにオレンジは奇をてらいすぎじゃねーか的な感想があります。(しかも背景色薄オレンジに文字色こげ茶とかの同系色は目が疲れるからあんまり好きじゃない)。じゃあ水色とかならいいのかというとそうでもなく…っていうとBeside Baysideは水色ベースのデザインですが、長時間読むような本文の部分はちゃんと白ベースに黒字(まぁ濃い紺色なんだけど)っていうことになってるので目が疲れないようになってるのです。

いや、白地に黒はまぶしくて目が疲れるよ! って人はモニタの輝度とかが明るすぎるんじゃないでしょうかなんてことを思ってたりするんですがどうでしょうか。よく「黒地に白だと目が疲れなくていい」とかいう話があるけど、個人的には逆に黒地に白文字とかだと白がまぶしすぎるんじゃないかみたいなことを思ったりするんですが、その辺はまぁ本人の好みなんでしょうね、きっと。すくなくとも私のサイトはダークにやるつもりはないのでいつまでも明るめの配色で行きたいと思います。

あとなんか最近やっとコンテンツ拡充する気が微妙に湧いてきたんですが、コンテンツ拡充するとなるとメニュー左に持って来たほうがいいかもなー的なことを考えてます。というか今右にメニューあるのはここが「サイトのトップだけ読んでおけばOKなサイト」だったのでメニューを右に追いやったという理由があったので、逆に左にもってこないとサイトの中身へのアクセスっていうのはしづらいんだろうなというのを最近ちょっとアクセス解析を調べてて思った次第。

comments powered by Disqus