ナビゲーションバーをカスタマイズする

wordpressテーマSTINGER3カスタマイズ wordpressでブログを作ろう

 wordpressテーマSTINGER3のナビゲーションバーをカスタマイズする。

 目的は以下のとおり。

・パソコン表示でのナビゲーションバーの項目の境目をはっきりさせる。

・パソコン表示でのナビゲーションバーの各項目がリンクであるということをわかるようにする。

 具体的には

・境目の|を太くする。

・マウスを乗せたとき背景色が変わるようにする。

 どちらもスタイルシート.phpをカスタマイズする。

広告

ナビゲーションバーの境目を太くして項目の境をはっきりさせる

1,【外観】⇒【テーマの編集】⇒【スタイルシート.php】をクリック。

2, #navi-in li {の中のborder-left-width: 1px;の数字部分を大きな数字にする。

 で太くしてみたら、実は点線だった。

 これを実線に変えるには、border-left-style: dotted;のdottedをsolidへ変更する。

 2本線ならdouble、破線ならdashed、くぼみ線groove、隆起線ridgeというように書き換える。

ナビゲーションバーの項目にマウスを置いたときに背景色がかわるようにアレンジ

  #navi-in li a:hover {に背景画像を付け加える。

#navi-in li a:hover {
    color: #00f;text-decoration: underline;background-color: #fff;
}

 マウスを乗せたときにリンクの色が変わるようにしてみた。

コメント

タイトルとURLをコピーしました