サイトのデザイン・リニューアルの覚書

　今回のデザイン変更についての覚書をまとめてみます。

　最大の変更点は、もちろんテンプレートとスタイルシートの全面的修正ですが、それ以外に考えたことなどを含めて。

■デザインについて

• 今まではななせさんの「すちゃらかＣＳＳ素材集」をいじりまくって作っていましたが、今回はストリクトな森田さんのテンプレートを改造しました。ただ、イメージ的にはななせさんのところの「stationery」という文房具セット風のデザインに着想したものです。
• 今回は背景に和紙と編集レイアウト用紙、そこにポストイットと蛍光ペンというイメージです。

2004年5月 3日15:00|記事内容分類：サイト更新, MovableType, ウェブデザイン|by 松永英明
この記事のリンク用URL|コメント＆トラックバック(7)
新： はてなブックマークに追加 del.icio.us に追加 MM/Memo に追加

■テンプレート改造

• 各ページのトップにサイト名を入れるのをやめて、右上に移動。検索などで飛んできたときは、サイト名ではなく、本文の内容が重要なので。
• デフォルトのテンプレートでは、<h1>＝ブログ名、<h2>＝日付、<h3>＝記事タイトルとなっていた。しかし、ブログ名や日付が記事タイトル以上に重視されるのは気に入らない。というか、ブログ名は<title>の最後に入っていれば充分だし、日付はこのサイトではほとんど意味がない。そこで<h1>＝記事タイトルに変更。日付は投稿者名などと同列に扱うことにした。
• 前後の記事へのリンクが、個別の記事の上にあるのも、よく考えてみればあまり適切ではない。そこで上につくリンクを右のサイドバーに押し込んだ。
• その結果、ページは記事タイトルと本文が真っ先に表示されるようになったので、満足。

■トラックバック・フォーム

• ウェブログを持ってない人もトラックバックできるように特別なフォームを設置していたが、除去。
• その理由は、

1. ほとんど有効に使われていない。
2. たまに使われたと思ったら、単に投稿欄と間違えたらしい無意味な連続投稿しかない。
3. コメント欄に関連URLを書いてもらえば充分。
4. 右サイドバーにトラックバックURLともども入れていたが、それを見つけられない人がいた。
5. ウェブログ使いの人も増えてきた。

• というわけで、トラックバック送信フォームは要らないと判断した。

■MovableType用TextFormatプラグイン mt-sukeroku-plus.pl導入。

• 「ささやかなる実験場の開発室」より。MovableType上で３種類のWikiスタイルの書法が使える。

1. YukiWiki風テキストフォーマット
2. PukiWiki風テキストフォーマット
3. はてなダイアリー風テキストフォーマット

• 最近はてなダイアリーに慣れてきたこと、タグを書くのが面倒なときがあること、ちょっと忙しいときにマークアップを省略するとガタガタいう人がいることから、手間をかけずに記事を書けるように採用した。この記事自体はPukiWiki風で書いている（PukiWikiも設置経験があるので楽）。
• というかこれ、すごく便利です。

■スタイルシート

• 付箋紙風に見せるのはすごく簡単だった。これは便利。
• 付箋紙と蛍光ペンをメインにイメージしたので、結果としてパステルカラーに。気分が明るくなっていい感じ。色の統一感を作るには、同系色でまとめる方法もあるが（前のデザインは茶色＋緑の暗色でまとめた）、今回のように明度を揃える方法もある。
• <hr />タグに背景画像を入れてみたが、ブラウザの方で勝手に影をつけてくる。これはスタイルシートだけでは解決できなかったので、<hr />は表示させず、前後を<div>で挟むという裏技を使わざるを得なかった。まあ「ここは区切り線」という意味でやってることだから大目に見てもらおう。
• リンクは文字の色を変えるのが一般的だが、文字の色を変えず下線部で表現するようにしてみた。下線の色は本文＝赤、前後記事へのリンク＝青、コメント＝水色、右サイドバー＝ピンクで、ボールペンで引いた下線のようなイメージにしてみた。こちらの方がリンクの場所とかわかりやすいような気もする。
• ちなみに、リンク下線はunderlineではなくborder-bottomで引いてある。underlineだと文字に重なって読みづらいこともある。また、underlineは文字と同じ色になってしまう。
• スタイルシートの作業としてはそれほど凝ったことをやっているわけではない。

■トップ画像とか

• 背景は北京の紫竹公園。屋根は公園の休憩所であって特に由緒ある建物というわけではない。
• ことのは→葉っぱ→木々というイメージはどこかに入れたかった。
• 最初はこのへんの色合い（つまり森田さんのサンプルテンプレート風）をメインに据えて、鈍色から墨色あたりの感じでまとめようかとも思ったが、どうもそういうシックな気分じゃなかったようだ（笑）。
• 絵文録→文禄→江戸風味というのも考えたのだが、和風は背景の和紙だけに残った。

2004年5月 3日15:00|記事内容分類：サイト更新, MovableType, ウェブデザイン|by 松永英明
この記事のリンク用URL|コメント＆トラックバック(7)
はてなブックマークに追加 del.icio.us に追加 MM/Memo に追加