[ブログデザインのカスタマイズ記録] サイドバーの「ニックネーム」を画像ボタンにする

(これは私はこうやった、というメモ程度の内容です。そしてけっこう７めんどうなことをしているので関係なければ読まなくてもいいような内容です)

最近ちょこっと変えてみたCSSの編集についてですが、

私、テキスト表示のリンクっていうのが見ていてカッコよくないなあと思ってまして、

たとえばサイドバーの「読者になる」ボタンをオリジナルの画像で表示できるなら、

そのほかでも同じように変えれるんじゃないかと。

そんなわけでサイドバーのプロフィール欄をいじくってみました。

.....そもそも不要な項目まるけなんですよね、これ。

プロフィールページなんかからきし何も表示してないくらい、サイドバーにもいらないです。

#new_profile .profLink{display:none} /* プロフィール｜なう｜ピグの部屋 */

#new_profile .sex{display:none} /* 性別*/

#new_profile .birthDay{display:none} /* 誕生日 */

#new_profile .bloodType{display:none} /* 血液型 */

#new_profile .hometown{display:none} /* お住まいの地域 */

#new_profile .freeText{display:none} /* 自己紹介 */

#new_profile .genre{display:none} /* ジャンル */

#profile p.link_blog{display:none} /* 記事作成・編集 */

#profile div.ad_frame{display:none} /* 自分そっくりピグで遊ぼう */

#amemberProfArea .menuReader{display:none} /* 読者になる */

#amemberProfArea .menuMsg{display:none} /* メッセージを送る */

#amemberProfArea .menuAmember{display:none} /* アメンバーになる */

#amemberProfArea .menuPresent{display:none} /* プレゼントを贈る */

.....とりあえずこんな感じでプロフ項目のほとんどを非表示にするわけですが、

これをCSSに入れた段階で「なう」「プロフィール画像」「ニックネーム」が残りました。

とりあえず「プロフィール画像」はないと意味が理解んないっぽいので、

/*プロフィール画像を中央*/

#new_profile li.image{
text-align:center;/*真ん中に表示*/
}

と、変更としては中央寄せに。

で、「ニックネーム」。

「ニックネーム」という表示が気に入らないです。

「ペンネーム」とか「芸名」のほうがしっくりくるよ!!!!!

.....そんなわけで、ニックネームという文字列を非表示にしようとして、

そうすると名前そのものまで見えなくなってしまうっぽいということで、

リンクになってるのを画像表示にできるんじゃなかろうかと思って入れたのが、

/* ニックネーム部分をオリジナルの画像ボタンにする方法 */

#new_profile .nickname
{
font-size: 0em;
text-indent:-9999px;
}

#new_profile .nickname a{

display:block;

margin:0 auto;

width:150px;/* 使用する画像の幅 */
height:30px;/* 使用する画像の高さ */
background-image:url(画像の元アドレス);

}

#new_profile .nickname a:hover{

background-image:url(マウスが乗ったとき表示する画像の元アドレス);

}

これで直りました。

なんでこうなるのか全然意味理解んないですけど。

X∞