サイト制作 記録 Archive

デザインをリニューアル（仮）しました。

つってもまぁ、色つけて、ヘッダーつけて、メニューの枠取って・・・ぐらいか。基本的な部分はこれで終わりなんですが、ヘッダーとイメージの部分をどうしようか悩み中です。ヘッダーとイメージエリアを含めてFlashにしようか、それともイメージエリアだけFlashにしようか、HTMLで組むか。とりあえず、まだ考えがまとまらないので画像ベタ張りになってます（笑）

そんなわけで、ヘッダーから「ShoppingList」などのコンテンツに飛べません。

今回の、テンプレートはTableデザインに戻しています。
CSSで組むつもりだったんですが、デザイン的な理由でTableで組まざるをえなくなりました。枠組み以外はCSSで制御しています。

Windows（IE6.0、Opera7.0、NS7.0、Firefox0.8）、Mac（IE5.0、NS7.0）のブラウザで確認を取ってます。「PageTop」などどうでも良い部分を除き、上記の環境ではキチンと表示されてる・・・と思います。（たぶん）

〜今後の予定〜
・ヘッダー＆イメージエリアをちゃんと作る。
・フッターもちゃんと作る。
・「PageTop」ボタンのスクロールがIEだけ効かないので直す。
・カテゴリーページなど、下に長いコンテンツを分割する。
・その他、細かいトコを直す。

日記書いてばっかりで、実際に大きな作業はあんまりしてないけど、細かい部分をちょこちょこ更新してます。

日付の表記を変えたり、カテゴリ増やしたり、コメント記入のページのPOPUPを止めたり・・・。
ただ、コメント記入のとこで何故か予想に反して１回OKを押しても書き込みされないという状態になってます・・・。

う〜ん、何が悪いのやら。

とりあえず、現在の変更予定は以下の通り
・コメント、トラックバックのPOPUPを止める。
・コメント部分のバグ取り。
・ヘッダーをFlashに。
・エントリー記入欄をMozilla（Firefox）対応に。
・CSS、Javascriptのスリムアップ＆バグ取り。
・カテゴリー＆マンスリーページの細分化。
・画像UP時のHTMLソースの変更。
・エントリー記入時にBRタグを挿入できるように。
・各ページのタイトルを日本語対応に。

・・・うわぁ・・・たくさんあるなぁ。
まぁ、ゆっくりまったりやっていきます。

とりあえず、トップページ、エントリーごとのページ、カテゴリーごとのページ、月ごとのページ、検索ページのテンプレートが完成しました。

あ〜、疲れた。

といっても、トップページとレイアウトはほとんど同じなので、コピペの部分も多いのですが。

そんなわけで、後はコメントとトラックバックのテンプレを作れば終わりです。（たぶん）

もう少しじゃ〜。

やっとできた〜！

レンダリング後のHTMLが作り終わったら早かったな。うんうん。
ちなみに、まだTOPページしか作ってないので、他のページは見ないでください・・・というか見逃してください（笑）

とりあえず、Blogっぽく見えないようにデザインしたつもりです。

世の中にあるBlogってごちゃごちゃしてて、個人的には見難くいんですね。
なので、そうならないように〜と思って、全体的にスペースを多めにとってゆったり見えるようにしました。
本家 も時間がゆっくり流れるように作ってますし。

まだまだ、バグがたくさんあるので頑張って修正していこうと思います。

前回に続き、レンダリング後のXHTMLファイルをせこせこ製作中です。

いきなりですが、今かなり困ってます。

原因不明のバグ（？）が出てるんですよ。
そのバグとは、「CSSで設定したFONTSIZEが1段階おかしい！」というものです。

どういうことかと言うと、CSSでfont-size:small;と入力している部分がmediumのサイズで表示されるのです。x-smallはsmallに。
そんな具合で、どいつもこいつも1段階上のサイズでレンダリングされるんですねぇ。

もちろん、ブラウザのフォントサイズはいつもの「中」なので、問題ありません。

NN7、Opera7では問題無いんですよ。
IE6.0だけ、このバグが発生中！

そんなこんなで、NN7が、一番思い通りに表示してくれるという、いつもと逆の状態に困惑してます・・・（汗

その他に、JavaScriptもIE6.0だけエラー出てます。（NN＆Operaは問題無し）

マイク○ソフトめ・・・

このバグさえ解消できれば、トップページのテンプレート作りに入れるんですが・・・
くそ、原因判らねーヨ！

Continue reading

そんなわけで、二日目です。

とりあえず、前日作ったデザイン案を修正します。

「ここはもうちょっとスペース空けて〜」ってな具合で。

完成！

さて、とりあえずいきなしテンプレを作るのは俺には無理なので、
まずは、実際に表示された場合のHTMLを作ります。

DWとPhotoShopを立ち上げて、作りマス！
まずは、現在表示されているページのソースを持っていきます。
テンプレの方じゃなく、レンダリング後のソースね。

それをコピーし、DWでペースト。
スタイルシートもね。

「うわぁ・・・やっぱ崩れてら・・・」

予想してたよりも軽度だったので、それを手本にしながらデザインビューでゴリゴリ作っていきます。

しかし、徐々に作業ペースがダウン・・・
原因はすべてCSSでレイアウトされているため、こちらもそれに合わせないといけない・・・。

うぐぐ。

「俺はテーブルレイアウト派（ぶっちゃけ技術不足）なんだよ・・・」

そんなわけで、CSS関連のサイトを見ながら構築。

くそ、めんどくせぇ。
「テーブルレイアウトなら、すぐ作れるのにぃぃぃぃぃ！」

今まで、CSSは少なめで作ってきたのが裏目に。

そんなこんなで、ほとんど作業が進んでいない第二回でした。

Webデザイナーとして、デフォルトのテンプレートじゃイカン！

まぁ、Webデザイナーって言っても駆け出しのヘタレだけど、それでもデフォルトじゃあねぇ・・・。
というわけで、テンプレート作りです。

何はともあれ、情報収集ですね。
すちゃらかCSS素材集
などで、Movable Typeのテンプレートがどういう構造なのか、どうやって作るのかを調べる。

ふむふむ、なるほど。

大雑把に理解した（つもり）ところで、デザイン案を作ります。
Webデザイナー7つ道具の1つ、PhotoShop起動！

頭の中で、コンセプト（サイトの雰囲気）を考える。

うぅ〜ん・・・

よっしゃ、昔作ったサイトのデザインをパクって作ろう！（笑）
ボツになったデザインなので、お蔵入りしてたのよね。アレ流用しよっと。

というわけで、昔のデザイン案を引っ張り出し、カスタマイズ。

作業を始めて2時間ほど経過。

とりあえず、出来上がり。

ほどんど原型とどめてないな（笑）

さて、デザイン案が出来たところで寝かせマス。
次の日とかに見ると、悪い部分が見えてきたりするんよね。

そんなわけで、また来週（？）

デフレスパイラルの波に飲み込まれ、Blog設置しました。

初めは、Nucleusを設置したんだけど、どうも機能と情報が乏しく、Movable Typeに変更。
でも、1日かかった・・・

Nucleus設置 → Nucleus削除 →
Movable Type設置（EUC-JP） → Movable Type削除 →
Movable Type設置（UTF-8） → 現在に至る。

g r a y a s hがまだちょっと完成しないので、とりあえず救済処置としてBlog設置したんだけど、
ドメインもわざわざhttp://blog.grayash.com/ にしたので、このまま続けようかな〜って感じ。

とりあえずまぁ、誰が見てるか知らないけど、よろしくです。