サイト設計備忘録
前回は実装した機能をザクッと書きましたが、今回はレイアウト関連
です。
ほとんど自分への記録残しというか、備忘録というか、未来の自分が
見てこのとき自分は何を考えていたのかを残しておきたい、という
か、書いとかないと何やったのか忘れてしまいます^^;
サイト設計
元々バイクというアクション色の強いテーマにも関わらず、グリーン
という安心を与えるといわれる色を使っていたので、攻撃的な赤に
メインカラーを変更しました･･･が、赤と黒の組み合わせが好きな
僕は、ついつい黒を使いすぎてしまいました。
･･･まぁ、とりあえずメインは赤ってことで、自分の中のハードルを
あげるために、より整ったページを探すと見つかりました。･･･と
いうか必死で探してるときは見つからなくて、ふと別件で調査して
いたりする時に見つかりました（笑）
・バイクGO!急急ドットコム
・ライブ&ダイニングバー 音楽室
・フリー素材屋Hoshino
何ともまぁハイクオリティなサイトです。ハードルが高すぎて
とても「参考にしました♪」なんて失礼すぎて言えません^^;
自分としては「粗さ」をだいぶ取り除いたと思っていたのですが
まだまだですねー。
さて、実際にテクニックを拝借したのは、yahooや価格コム、mixi
で、yahooは検索窓の位置、価格コム・mixiはコメントの表示の
仕方です。
検索窓についてはこれまでも設置はしていましたが、設置位置の
悪さから利用頻度も低く、価値が薄れていたので中央に移動。
やっぱり真ん中にある方が見つけやすいし、ポインタの移動も
スムーズかなと思います。
コメントについては、これまでは枠線も特に引いていなかった
ことから、白地が視界を支配し、自分的には「どーも文字に集中
しにくいな･･･」と印象を持っていたので、枠線をガサッと引い
て、「枠内」に視線が収まるようにしてみました。コメントあり
きのブログからすれば、コメンターさんの意見もコンテンツの
一部なので、読みやすくしないともったいないですよね。
あと、見落としてた点はサイトの説明文です。これまでは一発
でバイクのサイトとわかるようにイメージ先行で作ってました
が、「バイクの何のサイトなのか」というところがアピール
できてませんでしたので、説明書きをトップに追加。あんまり
工夫がないレイアウトですが、いい案が思いつかなかったので
テキストをそのまま追加しました^^;
CSSの使い分けと設置位置
これまではCSSをMTのテンプレート上で作成していたのですが、
そこまで触る機会が少ないことと、毎度再構築するのが面倒な
ため、FTPで更新する方法に戻しました。
それと、MT4は以前と比べてサーバへの負荷が大きくなっている
ので、迷惑かけないように、制限かけられないようにするために
、ってのが裏の意図にあったりします。
で、今回も色々とIEのバグに足を引っ張られたのですが、これは
恒例として、別の問題で悩んだのが、インデックスページとアー
カイブページでのレイアウトです。
画面上ではほぼ一緒なのですが、使っているCSSプロパティが被る
ことにより、インデックスページでは問題なかったのが、アーカ
イブページだと具合が悪いってことが多々あったので、使用する
CSSを下記のように振り分けました。
・インデックスページに使うCSS
import01.css - common.css , index.css
・アーカイブページに使うCSS
import02.css - common.css , archive.css
common.css は全ページ共通のプロパティを入れ、後はそれぞれ
import**.css でcommon.cssとそれぞれのページで使うCSSをイン
ポート。これでうまく帳尻が合いました。･･･が、追加で足さない
といけないプロパティが後で色々と出てきたので、ちとソースが
キタナイです^^;
あと、毎回思うのがMac環境でどーなっているのかみたいなという
点。前に会社のMAC（IE）でみたところ、特に問題がなかったので
今回も大丈夫かなーと思いつつ、やや心配。安いmacがあれば操作
感になれるのも含め、買ってみようかと思う今日この頃です。
（メインPC買い替えのため、当面先の話ですが）
前述しましたが、IEのCSS表現で今回は数え切れないほど悩ま
され、時にはCSSをアップしなおせば直るものもあったりなど、
ホント原因不明なものが多かったです。
そういう時って大体ブラウザキャッシュだったりするんですが、
キャッシュを参照させんようにしている時などは、かなり泣き
そうになり、それを通り越して笑ってしまったりしてしまい
ます。（いや、これホントの話）
ネタが多くてここには書ききれませんので、これも別途記事に
して残しておこうと思います。あまり解決の手助けにはなって
ないんですけどね^^;
|
前 ： バイクスタイル・リニューアル
|
