ここ数日わたしは「いつものきりんとうさぎ」のトップページのリニューアルに取り組んでいます。
もともとさしたるビジョンもスタンスもなく、ただの思いつきで立ち上げたこのサイト、 その場凌ぎの建て増しを繰り返しているうちに、 バックナンバーのリストがすごいことになってしまいました。 自分で見ても、どこに何があるのやら、さっぱり分からない。 新しく増えたものをどこにどう入れていいのやらも分からないから、適当に突っ込む。 するとますます雑然としてきて、ますますわけが分からなくなる‥の悪循環。 どこかできちんと整理整頓しなくちゃなるまいなあ、とずっと思っていて、 このたびようやく本腰を入れて取り組むことにしたのです。
本当はこの機会に日記ツールを利用しようかとも考えたのですけれどね。 blogとか、 はてなダイアリーなど、 自分色に染められる便利でオシャレで多機能なツールが最近はいろいろ出ているようなので。 でも、「いつものきりんとうさぎ」は日記サイトといいつつ、 実は何でもアリの思いつきサイトなので、 枠組みが全く何もないほうが結局ラクかなと思い直し、 とりあえず今回は普通にリニューアルを行うことにしました。
で、今回のリニューアルは、 先月行った旅行サイトのリニューアルとは、 全く逆の手法で行うことにしました。
旅行サイトのリニューアルは、
はじめにレイアウトありき
という発想で行ったものです。 「海外旅行は楽しい」とくどくど言葉で説明するより、 見た目が明るく楽しいページの方が楽しいイメージが伝わりやすい。 なので、レイアウトやデザインを大事に考え、 まず"見た目"を決めることにしたのです。 それをどう実現するかはひとまず置いておいて。
けれど、日記サイトには旅行サイトとはまた違った事情がありました。 日記サイトは別にビジュアルでなくても構わない。 言うなれば文章さえ読んでもらえればいいのです。 だから、かっちりとレイアウトするよりむしろ、 あとからどうにでも見た目を簡単に変えられる、 見た目のスタイルに対して柔軟な枠組みを作っておきたいと思いました。 そこで今回は、
まずは適切なマークアップ
を目標とすることにしました。
"マークアップ"というのは、簡単に言うと、 機械であるブラウザに分かるように、テキストに論理的な意味付けをすることです。 たとえば一番大きな見出しは
<h1>いつものきりんとうさぎ</h1>
という具合に<h1>というタグで囲んで、 「"いつものきりんとうさぎ"というのがこのページの一番大事な見出しですよ」 とブラウザに伝えるのです。
もともとHTMLというのは "Hypertext Markup Language"の略語ですから マークアップそのものともいえるのですが、 論理的な位置付けのみならず、見た目の指定もできます。 たとえば、
<font color="red">いつものきりんとうさぎ</font>
と書くことによって、 「いつものきりんとうさぎ」という文字（フォント）を赤く表示することもできます。
でも今回は、色とか配置のことはとりあえず一度忘れ、 まずは論理的なマークアップに徹することにしました。
さあ果して、うさぎは無事リニューアルを終えることができるでしょうか？ （今の時点では自分でも謎‥＾＾；）
試行錯誤のページにて、うさぎの奮闘振りを とくとご覧ください。