サイト設計備忘録
前回は実装した機能をザクッと書きましたが、今回はレイアウト関連です。
ほとんど自分への記録残しというか、備忘録というか、未来の自分が見て
このとき自分は何を考えていたのかを残しておきたい、というか、書いとか
ないと何やったのか忘れてしまいます^^;
サイト設計
元々バイクというアクション色の強いテーマにも関わらず、グリーンという
安心を与えるといわれる色を使っていたので、攻撃的な赤にメインカラーを
変更しました･･･が、赤と黒の組み合わせが好きな僕は、ついつい黒を使い
すぎてしまいました。
･･･まぁ、とりあえずメインは赤ってことで、自分の中のハードルをあげる
ために、より整ったページを探すと見つかりました。･･･というか必死で
探してるときは見つからなくて、ふと別件で調査していたりする時に
見つかりました（笑）
・バイク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をアップしなおせば直るものもあったりなど、ホント原因不明なものが多か
ったです。
そういう時って大体ブラウザキャッシュだったりするんですが、キャッシュを
参照させんようにしている時などは、かなり泣きそうになり、それを通り越
して笑ってしまったりしてしまいます。（いや、これホントの話）
ネタが多くてここには書ききれませんので、これも別途記事にして残して
おこうと思います。あまり解決の手助けにはなってないんですけどね^^;
|
前 ： バイクスタイル・リニューアル
|
