なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

ど素人のCSSのみで行うブログデザイン構築編② 〜ブログの寸法を知っておこう!〜

Sponsored Links


なまら春友流

ブログのデザインを考える際に知っておいたほうがいいことがブログの寸法。
冒頭のスクショはMacBookAir11インチで「なまら春友流」を表示したもので各id毎に色を変更したもの。
スタイルシートを直接弄らずに、Chromeの拡張機能を使用することでリアルタイムにCSSの変更を確認できます。

新米ブロガーにおすすめ!ちょっとしたCSS知識だけでブログカスタマイズを楽にする2つの便利機能!! | なまら春友流

Chrome拡張「 Live CSS Editor」

Sponsored Links


#main #container #content

#mainは(青部分)全体の幅。
余白も含めた表示されている全体の部分。
#container(黄色部分)は余白も含めた記事の幅。
#content(黒部分)は記事本文のみの幅。
各テーマによって異なるのでしょうが「Thematic」は左右両サイドに10pxの余白が設定されています。
例えば、#contentは640pxだとしたら#containerは660pxになるってこと。

当ブログは#mainで全体を1080pxにしています。
で、#sidebar(#primaryと#secondary)は400px。
#sidebarも両サイドに10pxずつの余白が設定されています。
ってことで、#mainが1080pxで#sidebarが400pxにした場合は#contentは640pxになります。
基本なんでしょうけどこれがなかなかわからなかった。
で、Live CSS Editorを使って背景色を変更してみると各コンテンツの幅がわかりやすかったんですね。
背景色を変更して確認してみると視覚的に全体像がわかるのでオススメです。

他のデバイスでの表示

iPadでは#mainが1080pxの場合は以下のように表示されます。

Skitched 20120102 100140

そして以下がMacBookAir11インチでのスクショ。

スクリーンショット 2012 01 02 9 53 37

ページ全体の左右の余白部分が無くなった以外は、ギリギリデザインの変更(下への回り込み等)無く全てが表示されています。
基本なんでしょうけど自分にとってはなるほど〜って感じでした。
もし他にも自分のブログの幅を把握されてない方がいたら一度視覚的に確認してみるといいかもしれません。
やっぱりChrome拡張「 Live CSS Editor」はなまら便利です。

Sponsored Links


LEAVE A REPLY

*
*
* (公開されません)

Return Top