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