2020.4.19 ブログテンプレートを「The THOR」に変更しました。細部を修正中です。
NO IMAGE

賢威テンプレートVer6.1でグローバルナビを改変(クール版)

ブログにはいろんな機能がありますが、
見た人の回遊性を高めるためにも、
ブログ自体が見やすくなるためにも、
グローバルナビの導入は必須です。

グローバルナビとは、コレのこと。

WS000000

常にブログ上部に存在させることで、
どの記事からもグローバルナビに設定してあるカテゴリに
ショートカットでアクセスすることができます。

つまり、ブログを閲覧するのに無駄がなくなりスタイリッシュ!

ちなみに賢威テンプレートver6.0はグローバルナビを標準装備。
簡単な設定だけで特に問題なく使えます。

た・だ・し。
ちょっと味気ないかなぁと思ったり。

特に背景色や文字色をいろいろと変更してきて、
グローバルナビの配色だけ違うのもなんか違和感が出ますね。

そんなわけで下記よりトライ!

◆グローバルナビの改変

/*——————————————————–
グローバルナビ
——————————————————–*/

#global-nav{
border-top: 1px solid #555; /*メニュー上のラインの設定*/
border-bottom: 3px solid #00ffff; /*メニュー下のラインの設定*/
}

~~~~~~~~~~~

/*メニューのデザイン*/
#global-nav #menu li a{
display: block;
padding: 1.2em 3em 1.2em 2em;
background: url(./images/icon/icon-gnav.png) 0.5em center no-repeat;
color: #fff; ←メニューのフォントの色を変更
text-decoration: none;
}

#global-nav #menu li a:hover,
#global-nav #menu li a:active{
background-color: #757575; ←マウスカーソルを乗せた時、クリック時の背景色を変更
filter: alpha(opacity=70); /* ie8以下用の透明度を設定 */
-moz-opacity: 0.7; /* Firefox用の透明度を設定 */
opacity: 0.7; /* 透明度を設定 */

赤字の部分のカラーコードを希望の色に書き換えれば、
配色の変更ができます。

ちなみにグローバルナビの項目自体は、
WordPressの固定ページを作成すると、
作った項目名が自動で設定されますので、
やってみるとよいでしょう。

NO IMAGE
最新情報をチェックしよう!