早速、アメブロで「ライブドアブログのカスタマイズ記事」という斬新(?)なシリーズを始めます。
基となるデザインの選定
まず、カスタマイズする基となるデザインを選びます。
ライブドアブログもアメブロ同様数多くのデザインが最初から用意されております。
なんでも良かったのですが、デフォルトと名前のついている「デフォルト2008（ねずみ,3カラム）」というデザインを使う事にしました。
早速、反映させるとこんな感じ
うん。ちゃんとダサいです。
でもこれ実は結構細かく作ってるんです。今となっては角丸はCSS3にまかせちゃおうって流れになってますがこのデザインの角丸は画像で作ってます。
2～3年後にWEBデザインの勉強を始める人にはまったく必要のない技術になんだろうな…。
最近2カラムが多かったので…3カラムとか久しぶりに使います。
まだちゃんと見てないのですが、ライブドアブログは過去記事や関連記事へのルートに弱い気がするんで、3カラムにして一番左のカラムにナビゲーション的な物を配置しようと思います。
「デフォルト2008（ねずみ,3カラム）」の構造を知る
選んだデザインの構造を見ます。
とりあえずヘッダーとフッターは置いといて、いわゆるコンテンツ部分だけ見てみます。
…率直な感想として「どんどけdivつかっとんねん！」って感じですが、これもCSS2時代の…CSS3時代にはもっとすっきりしてるはずです。
で、ざっくりと絵にしてみました。
わかるかな？
div#containerとdiv#contentはとりあえず無視しといて…
#mainと#subと#extraは同列に並んでいます。
#mainはwidth:100%なんで親要素の#contentと同じ幅になります。
div#main div.colum-innerはmarginで左右に230pxの隙間を作っています。
#subと#extraはネガティブマージンを指定しているので本来の位置(div#mainの両隣の境界)から内側に配置されます。
これによって#content内に3つのカラムが収まるようになっています。
私はあまりネガティブマージンを使った事がなかったのですが、この方法だと3カラムを配置する際に3つのカラムの内、メインカラムを先頭に持って来れるのでSEO的にも若干のプラスになるのではないかと思います。
ネガティブマージン…今更ながら…いいかも。
カラムの幅を変える
ここまで構造がわかったらあとは簡単です。
まず、横幅がリキッドだったのですが固定幅に変更します。
div#container{width:950px;}そしてコンテンツ部分の両サイドの余白は必要ないのでdiv#content{margin:0 10px;}をdiv#content{margin:0;}に変更します。
そして両サイドのカラムの幅＋余白部分をmarginで設定します。
両サイドのカラムにはfloat:leftがかかっているので、左側のカラムにはネガティブマージンでwidth:-100%;(親要素=#mainの幅の100%)を設定し、右側のカラムは、その幅と同じ分だけネガティブマージンを設定します。
↓こんな感じ
ちょっとバランス悪い様に見えるけど…どうせみんな左側しか見てないでしょ？
デフォルトの背景をなくし、bodyに背景画像を設定する
ダサい…頑張った背景画像は今回使用しないので、カスタムページのCSSのタブのテキストエリアを選んでコマンド+F(windowsの人はコントロール+F)でbackgroundを検索して片っ端から削除。
でbodyにちょっとざらっとした背景画像を設定した。
とりあえず今回はここまで。
次回はヘッダーをいじります。