REDLINE MAGAZINE | [B]RLMの作り方・その１

[B]RLMの作り方・その１

※RSSリーダーで読まれてる方に分かりやすいようにこれから初心者向けのカテゴリへはビギナーの[B]とか入れる事にしてみます。

RLMって何という話ですが、単純に「RedlineMagazine」ってのが長すぎたので単純に短縮しただけです。発音しにくいとかはスルーの方向で･･･。とりあえずせっかく初心者向けのカテゴリを作ったので、このサイトの作り方でも説明してみます。もし何か参考になる点があったらどんどんパクってください。

幅サイズをどうやって決めたかの巻

まずは構造文書の話ーをしようとも思ったんですが、それはコーディングの説明をする時にした方がいいと思うので、まずは見た目の話。

まず想定画面サイズをどうするか。ログを見て考えました。このサイトを見てくださってる方はおそらくweb関係者の方が多いと思うのですが、結構みなさん画面デカいです。

１ヶ月の統計ベスト10(不明は除く)

１位が幅1280、48.32%。２位が幅1024で15.96%。この辺りを対象に考えました。1024で見ると横スクロールが出ると思いますが、エントリ部分が右に消えないようにはなってるはず(多分)で、その予定でスクロールは出るものの右にズラさないでも閲覧可能にはなってると思います。ただ、某ブックマークで横スクロールが出てウザいという意見も頂いてやっぱり今となっては若干後悔してます(汗)

見た目デザインうんぬんの巻

見た目についてですが、見栄えのデザインは得意でないので結構･･･適当です。発想を箇条書きにするとこんな感じ。

• 「Redline」なので赤い線を入れよう(単純すぎる動機)。
• でも赤メインは目が疲れるのでポイント絞って１箇所にしよう。
• むむ。赤いライン１本だとなんか寂しいぞ。
• ページ上部だけ色を入れよう。敢えてブルーにしてみよう。
• 前回３カラムで目の向く方向がバラバラだったので２カラムにしよう。
• なにはなくとも本文だけは読みやすくしたい。ブログやし。
• テキストサイズはデカくしたい。
• デカすぎると苦情がきたら後でサイズ可変のボタン置こう･･･。
• これだけじゃなんか寂しいから左上に印象に残る何か置いてみよう。
• コメントはあまりないブログだし下の方にひっそりでいいや。
• その部分は折りたたみにしてページ高節約しよう。
• その他モロモロ･･･
• ･･･完成してみたら結構自分好みの見た目になった→採用

趣味のサイトなのでほんとに単純な発想です。すいません。デザインに関してはこのブログに記事を書いてくださってるGreenさんの話を読んだ方が確実にためになるので、お忙しいようでなかなか更新されない事もありますが、そちらを参考に。

サイトの枠組みの巻

このサイトの一番大まかな枠組みは結構単純で、左の図のように大きく分けると3つのパートに分かれます。１と２はよくあるパターンで左と右にそれぞれフロート。で、その２つのボックスを#containerというdivで包んでます。

印刷時には１番(左メニュー)と３番(フッタ)の部分はいらないと思うのでCSSでバッサリ消してます。つまり印刷される部分は２番だけです。枠を大きく分けておくといらない部分をバッサリ消す時に便利です。(時と場合によりますが)

とりあえず、あと何回かに分けて細かい部分の説明でもしてみたいと思います。

2007年04月12日 23:07 | Red | パーマリンク