blog.grayash.com Webデザイナーによるブログ。日々勉強

226月/040

ちょぴっとリニューアル

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

つってもまぁ、色つけて、ヘッダーつけて、メニューの枠取って・・・ぐらいか。基本的な部分はこれで終わりなんですが、ヘッダーとイメージの部分をどうしようか悩み中です。ヘッダーとイメージエリアを含めて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だけ効かないので直す。
・カテゴリーページなど、下に長いコンテンツを分割する。
・その他、細かいトコを直す。

224月/040

ちょこちょこ更新

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

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

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

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

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

184月/040

テンプレートを作ろう! 第五回

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

あ〜、疲れた。

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

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

もう少しじゃ〜。

174月/040

テンプレートを作ろう! 第四回

やっとできた〜!

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

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

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

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

164月/042

テンプレートを作ろう! 第三回

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

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

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

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

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

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

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

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

マイク○ソフトめ・・・

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

154月/040

テンプレートを作ろう! 第二回

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

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

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

完成!

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

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

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

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

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

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

うぐぐ。

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

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

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

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

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

144月/040

テンプレートを作ろう!

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

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

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

ふむふむ、なるほど。

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

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

うぅ〜ん・・・

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

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

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

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

ほどんど原型とどめてないな(笑)

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

そんなわけで、また来週(?)

134月/040

Blog設置!

デフレスパイラルの波に飲み込まれ、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/ にしたので、このまま続けようかな〜って感じ。

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