アメブロのデザインをカスタマイズその２～CSSを編集するの巻

htmlの構造が判ったら次はCSSの編集です。

CSSはカスケードスタイルシートの略で…みたいな説明はめんどくさいので省きます。

ざっくりとしたことはこちらで↓
http://helps.ameba.jp/qguide/blog/

ちなみにアメブロでは、CSSの編集が出来るスキンと出来ないスキンがありますので気をつけて下さい。


まずは軽くヘッダー部分のデザインを変更してみます。



↑うちのブログでいうとこんなの。。

ここは

<div id="userNaviArea" class="clearFix">
<a href="http://profile.ameba.jp/designs-blog/" id="userNickName">takada</a>
<ul id="navigationList">
<li><a href="http://profile.ameba.jp/designs-blog/">ルーム</a></li>
<li class="lastItem">ブログ</li>
</ul>
</div>

というところなのでCSSでその記述を探します。

ない時もあります。
現在、カスタマイズしている「ベーシック」というスキンにはありません。

なので、そのままCSSに書き足します。

#userNickName{
background:url(画像のURL) no-repeat;
width:160px;
line-height:40px;
text-indent:-9999px;
}

↑まずはこんな感じ
名前が出るところを画像にしてみる。
普通のサイトのロゴみたいなイメージで。。

あと、その横のリンクを普通のサイトのサブメニューみたいに右に寄せる。

#navigationList{
margin:0 0 0 auto;
padding:0;
float:right;
}
#navigationList li{
margin:0;
padding:0;
line-height:100%;
}





まずはここまで。

次回はヘッダー画像の変更です。