本ブログのサイドバー。CSSを少し変更

本ブログのサイドバー。プロフィール欄のCSSを少し変更しました。

今まで、プロフィールの名前とidに下線が入っておりました。運用上問題があるわけではないのですが

水森千十

と書いてあると 水森はいいとして、千 が 壬 、十が 土 と区別が付かないような気がしていました。

 ・　千十 　→　下線を付けると　→　　千十

 ・　壬土 　→　下線を付けると　→　　壬土

そこで、通常は下線無しにして、マウスオーバー時のみ下線が出現する方法に変更しました。

どこを変更したかというと、

サイドバーのプロフィール部分のHTMLが以下のようになっているので(全体的に簡略化しています)

<div id="box2-inner">
<div class="hatena-module hatena-module-profile">
<div class="hatena-module-body">

<span class="id">
    <a href="https://～～" class="hatena-id-link">水森千十 id:k-emu</a>
</span>

<div class="profile-about">
    <a href="https://～～">このブログについて</a>
</div>

～～～省略～～～

</div></div></div>

ダッシュボードの「デザインCSS」の一番下に、以下の2行を追加しました。

.hatena-module-profile.id a {text-decoration: none;}
.hatena-module-profile.id a:hover {text-decoration: underline;}

同様の効果をサイドバー全体に適用するのであれば、以下のようにします。

/* --------------------------------------------------
サイドバー全体に有効 */
.hatena-module-body a {	text-decoration: none;}
.hatena-module-body a:hover {text-decoration: underline;}

/* --------------------------------------------------
プロフィール欄全体に有効 */
.hatena-module-profile a {text-decoration: none;}
.hatena-module-profile a:hover {text-decoration: underline;}

/* --------------------------------------------------
名前とidのみに有効 */
.hatena-module-profile.id a {text-decoration: none;}
.hatena-module-profile.id a:hover {text-decoration: underline;}

以上、ささやかな変更のお知らせでした。