livedoor Blog でスキンをちょっとカスタマイズしてみた [Web]
livedoor Blogはけっこうスキンが豊富です。しかも、いい感じのデザインが多い。
で、気に入ったのがあったのですが、仕様的に一部、気にくわないトコがある。ということでカスタマイズしました。livedoor Blog はCSSが自由に編集できるので便利です。CSS得意ではないけど、修正したのでメモ。
Before:元デザイン
手を加えていないオリジナルのスキン。ちょっと古そうですが、イラストがかわいい感じ。
スキン名:アリス
カスタマイズした点
- 幅が狭いので、ワイドサイズに(約600→約900px)。
- 3カラムを、2カラムに。
- ヘッダを外して、すっきりに。
- タイトルの文字サイズとフォントを変更。
After:修正後
修正したCSSを適用。ワイドかつ2カラムで、かなりすっきり。すっきりすぎかも。
修正内容
・ワイド化
containerのwidthを修正。それにあわせて配下のカラムのサイズも調整。
元スキンでは、ヘッダの青い枠線は実はタイトル画像上に描かれていたので、ワイドにしたらサイズが合わなくなった。仕方ないので、画像は枠線を消して再アップロード。table#headerに青色の枠線を指定し直して、画像を中央に配置。フッタも同様に。
#banner{
height:293px;
background:#fff url(http://livedoor.blogimg.jp/miyamomonikki/imgs/d/6/titleimg.gif) no-repeat 50% 0;
text-align:left;
margin:0 auto;
/* clear:both;*/
border:solid 1px #66ccff;
}
#footer {
height:119px;
line-height:119px;
font-size:0;
background:#fff url(http://livedoor.blogimg.jp/miyamomonikki/imgs/7/5/footerimg.gif) no-repeat 50% 0;
border:solid 1px #66ccff;
}
・左カラムを消す
元ではwrapperに左カラム(left)と本体(content)が入って、wrapperに対してright(右カラム)が配置。左カラムを消して、contentのfloatを解除。
・ヘッダを消す
display:none;を追加したら消えた。けど、やっていいのかよくわからない。ちなみに広告はこれでは消せない。
table#header{
display:none; /* ←追加 */
}
・フォント
ゴシック系から明朝体系に変更。サイズも大きく。指定したフォントは下記。
#banner h1.blogtitle a{
font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','MS P明朝','MS PMincho',serif;
}
デザインテンプレートの共有
自分で作ったテンプレートを、公開する機能がある。いまいちカオスで玉石混淆。
技術情報
情報がちゃんと整備されてる感じ。これをみれば、スタイルだけじゃなく、テンプレもけっこういじれる。
http://wiki.livedoor.jp/staff/
所感
スキンのデザインの良さや反応速度では互角だが、はてなよりカスタマイズがわかりやすくて丁寧な気がする。広告が目立つ部分がマイナスだな。