さて、WordPressテーマデザインをSTINGER3オリジナルに戻しました。オリジナルのデザインもなかなか素敵ですね。でも、他の人とまったく同じデザインというのもなんとなく気になりました。
そこで、メニュー表示とフッター部分のデザイン変更に挑戦してみました。試行錯誤の連続でしたが、なんとか変更することができたので、その方法をまとめておきます。
メニュー表示部分
今回もStyle.cssを一部変更することになります。でも、最初はメニュー表示に関する記述がどこにあるのかも不明でした。そこで、Style.cssの記述内容をじっくりと眺めていきました。すると、ナビゲーションという記述箇所を見つけました。この部分がメニュー表示に関する記述箇所のようです。
さっそく作業に取りかかり、次のように変更しました。
[css]
/*———————
ナビゲーション
———————–*/
#navi-in{
background:#666;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
}
#navi-in li {
position: relative;
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
padding-top: 3px;
padding-bottom: 3px;
}
#navi-in li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
border: none;
}
#navi-in li a {
float: left;
color:#FFF;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
#navi-in li a:hover {
color:#000;
}
#navi-in li:hover {
background-color:#EEE;
}
[/css]
最後のカーソルを重ねた場合の背景色変更の所は、試行錯誤を重ねた結果、なんとか思い通りにできた箇所なのですが、もっと合理的な記述の仕方があるのかもしれません。この辺が、素人の辛い所です。
フッター部分
ついでに、フッター部分にも色をつけてみることにしました。Style.cssの「基本構造」という記述箇所に次のような記述を追加しました。
[css]
/*—————————–
基本構造
——————————*/
#footer {
background:#000;
}
[/css]