デザインスキンは「グリーン」「ピーチ」「グレー」「ブルー」が基本です。
ちなみに私は『ピーチ／２コラム－記事右」を選択しています。
←のメニューリストを見てください。
デザインスキン「ピーチ」標準の場合、「プロフィール」や「カレンダー」ゃ「最近の記事の一覧」などの
メニューの下線が、「 _ _ _ _ _ _ _ _ _ 」になってると思います。
↑↑↑↑ ｺｺ 変更しちゃいます。
ついでにメニューの前についている画像も変更しちゃいます。
/* ----------------------- menu_element_basis ----------------------- */
.mainMenu {
margin-bottom: 15px;
}
.menu_title {
margin: 0px 2px 7px;
padding: 3px 0px 3px 10px;
border-bottom: 1px dashed #666666; ←ここ変更します。（参照①）
background-image:
url("画像のＵＲＬ"); ←メニューの文字の前の画像の場所です。（参照②）
background-repeat: no-repeat;
background-position: 3px 7px; ←画像の大きさに合わせて調整してください。（参照③）
text-indent: 3px; ←画像の大きさに合わせて調整してください。（参照④）
}
/* ----------------------- menu_element_background ----------------------- */
＜参照①＞
● 1px → 線の太さです。
● 破線 → dashed ← 標準はこれになってます。
という事は、この部分を変更すればＯＫです。
実線 → solid
点線 → dotted
二重線 → double
へこんだように見える線 → groove
浮き上がったように見える線 → ridge
（注）線の種類によっては、太さを調整しないと、見えにくいものがあります。
● #666666 → 線の色です。
私の場合【 border-bottom: 1px solid #e64d80; 】 になってます。
(￣ε￣〃)ｂここからポイント
padding-top : → 上線
padding-bottom : → 下線
padding-right : → 右線
padding-left : → 左線
標準の場合は、「 border-bottom: 1px dashed #666666 」 になっているので、
下線部しか表示されません。
上記の全てを書き込むと、四角い枠になります。
上線と右線だけとか、下線と左線だけの表示でもおもしろいかもしれませんね(*￣∇￣*)
ようするに、このメニューの下線は、「ライン」ではなく、「ボックスの一部表示」だったみたいです。
＜参照②＞
バランスが悪くなってしまうと思いますので、標準の画像と同じくらいの大きさのものを
おすすめします。
ようするに、画像は文字の前に挿入してあるのではなく、
四角いボックスの中の背景になっています。
今までの応用で、メニュー（ボックスの中）の、色づけ等ができると思います。
＜参照③＞
参照②に注意していただければ、変更することはないと思います。
＜参照④＞
text-indent: 3px; → 3px文字がインデント（字が下がる）するという事です。
画像の大きさによっては、メニューの文字と重なってしまうので、
画像によって調整してください。
★デザインスキンによっては、メニューそのものが、「画像」になっているものがあるようです。
自分でデザインしたメニューリストも素敵だと思いますよ。
私は、ここまで時間をかけたので・・・・・
しばらく、このままで行きます･･･ ε=(￣。￣;A フゥ… （笑）