ブログテンプレートというかサイト作成で大事な事とは

なんて遊んでる暇があったら。

今まで休んでた経緯でも説明してくれって方もいるかもしれませんが（汗）
その辺についてはまた別の機会に書きたいと思います。

今回はテンプレを作る過程のお話を兼ねたテスト投稿。

htmlとcss

テンプレと言うよりサイト作成なんですが、最低限のhtmlとcssの知識はあった方が良いんじゃないかと思います。別にW3Cを意識する必要はないですけど。

w3cに準拠するとSEOに良いとか言われてますが、そんなの全然関係ねぇし。某SEO屋さんで、w3cに準拠した綺麗なソースの方が検索エンジンのサイトクローラーが負荷なく読めるからSEOに良いなんて言ってますが、クローラーがw3cに沿ってプログラムされてるかどうかも怪しいですしｗｗ

と言いつつ今ここに書いてる事にも確証なんてないですが。

そんな確証のない事に拘るくらいなら、この目で確認できるブラウザごとに異なる見た目の違いをなんとかした方が良いかな？って事で、大抵のブラウザで同じように見えるレイアウトを組んでみました。

実際に確認したのがIE6と7、Firefox2、Safari3、Sleipnir2。
その他はhttp://browsershots.org/で確認したいサイトのurlをぶち込んでやると、各ブラウザのスクリーンショットを撮ってくれるのでそれで確認。

スクリーンショットはこんな感じで確認できます。
http://browsershots.org/http://bokutoakushu.blog119.fc2.com/

もしサイトを運営してて確認したことが無いなら、１度やってみると良いかもしれません。案外崩れてますのでｗ
（結構時間かかりますが、一度submitすれば後でhttp://browsershots.org/入力したurl/にアクセスしてもスクリーンショットは確認できます）

色んなブラウザに対応させるには

よく目にするのはCSSハックってやつですが、やりだすとキリがない気がするし、素人なオイラが調べた限りでは、プロな人でもあんま好ましく思ってない。なので、ほんの少しハックしましたが、なるべくしない方向で作りました。

ちなみにCSSハックとは、ブラウザごとに違うスタイルを読み込ませる技術…？
技術とは違う気もしますが、まあそんなイメージです。興味のある方は検索して調べてみれば、プロな方々がしっかり教えてくれると思います。

CSSハックとは（Google検索）

じゃあ素人な自分たちがレイアウトの崩れを最小限に抑えるにはどうしたら良いか？って事なんですが、以下の事に気をつければ大体なんとかなるんじゃないかな？ってのをメモしときます。

誰も興味無いかもしれませんが…

• float指定した要素（div等）に直接marginやpaddingを指定しない
• width、heightを指定した要素に無暗にborderを使わない、paddingはもっての外ｗｗ
• 各ブラウザのスタイルをCSSでリセットする
• 他にも色々あるが、不安な場合tableでレイアウトする方が無難

画像はphotoshopがあれば、誰でも簡単に編集可能

htmlとcssがちょっと出来れば、あとはお好みで画像を入れたりして装飾するんですが、やり方さえ覚えれば、素人の主婦でも10分程度でこんな画像も作れます。

敢えて胡散臭い書き方な上に意味不明な画像ですが、これは本当です。大抵の画像は想像以上に簡単で手軽に作れちゃいます。
photoshopなんて高くて手が出ないなんて聞こえそうですが、オイラも持ってませんので安心してくださいｗ

１か月間の期限付きですが、体験版を無料で使えたので、それを使いました。

photoshop体験版

オイラの場合、photoshopの経験はほぼ無いに等しい状態だったんですが、使い方の勉強と、このサイトの画像も含めて４サイト分の画像を作るまでにかかった期間が２週間ほどでした。

そんな期限付きで焦って作るのは嫌だとか、そんな高い買い物はできないって人は、オイラもまだ使った事ないですが、オープンソースのGIMPなんかも有名なので試してみるのも良いかもしれません。

このサイトの致命的な欠陥

はてさて。
ここまでザックリどころか殆ど意味不明にテンプレ作りの過程を書いてきましたが、こんな感じでやっていけば誰でもテンプレ位は作れます。

実際オイラはMTやWordpressを初めて使った時も、まずはテンプレから作りましたから。

でも。
初めてこのサイトを訪れた人は、いったいこのサイトはどんなサイトなんだ？と思うことでしょう。
そんな事考える暇があったら、速やかにページを閉じるって考えた方が無難かもしれません。

実際こんなテクを使えばこんなレイアウトが組めるとか。
こんな方法を使えばこんな画像が作れるとか。

それだけを考えてこのデザインを作りましたから、例えこのブログに訪問者が期待したエントリがあったとしても、それを見付けられずに他のサイトに流れて行く人は多いんじゃないかと思います。

つまり、いくら綺麗に見せるテクやカッコよく見せる技術を駆使してサイトを作ってみたところで全く無意味だって事。

誰の為のサイトなのか？

例えば、あしたのジョーの白木葉子とデートに行こうと思ったら、スーツなんかをビシッと決め込んで、フランス料理のフルコースとかを思い浮かべるだろうし。

逆にのりちゃんだったら、そんな洒落たデートなんかより、公園で一緒にお弁当とか食べる方が楽しいだろうし。

盲目の方のためのサイトなら、音声ブラウザを意識してサイトを作れば良いだろうし、その家族にも見てもらいたいサイトだったら、それも考慮したサイト作りをすれば良いんじゃないかなと思います。

相手の立場になってやる必要は全くないですが、ちゃんと相手を見据えてデザイン、レイアウトを組めれば良いんじゃなんじゃないかな？と思います。

つまり、訪問者の事を考えながら技術を使って、初めて良いサイトが作れるって事ですね。

じゃあ、このエントリは一体誰の為のものかって？
はい。自分の為のテスト投稿です（苦笑）

では、長くなったので、そろそろ訪問者のために修正かけてきます。

最後まで読んでいただき、ありがとうございます。