SSブログ

livedoor Blog でスキンをちょっとカスタマイズしてみた [Web]

livedoor Blogはけっこうスキンが豊富です。しかも、いい感じのデザインが多い。

で、気に入ったのがあったのですが、仕様的に一部、気にくわないトコがある。ということでカスタマイズしました。livedoor Blog はCSSが自由に編集できるので便利です。CSS得意ではないけど、修正したのでメモ。

Before:元デザイン

手を加えていないオリジナルのスキン。ちょっと古そうですが、イラストがかわいい感じ。

スキン名:アリス
スキン「アリス」

カスタマイズした点

  1. 幅が狭いので、ワイドサイズに(約600→約900px)。
  2. 3カラムを、2カラムに。
  3. ヘッダを外して、すっきりに。
  4. タイトルの文字サイズとフォントを変更。

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/

所感

スキンのデザインの良さや反応速度では互角だが、はてなよりカスタマイズがわかりやすくて丁寧な気がする。広告が目立つ部分がマイナスだな。


Related Posts Plugin for WordPress, Blogger...
nice!(0)  コメント(0)  トラックバック(0) 

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 0

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。