広告 雑記

賢威テンプレート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の固定ページを作成すると、
作った項目名が自動で設定されますので、
やってみるとよいでしょう。

  • この記事を書いた人

ラング

WEBライター兼ブロガー|SNSや動画編集なども独力で行いながら、メディア構築スキルを高めて発信中。自由な時間を作れる努力が好き。音楽とRPGゲームが大好物。

オススメ記事

1

どうも、ラングです。YouTube動画をアップする時、他の投稿者のように目立つサムネイル画像を設定したい!…と思ったら、カスタムサムネイルが設定できない!!いや、グレーアウトしてるんだけど。反応しない ...

CocoonでSearchConsole設定 2

どうも、ラングです。今回は、無料WordPressテーマ「Cocoon」にて、検索パフォーマンス管理ツール「Google Search Console」の設定を行ってみようと思う。この記事では、Coc ...

Googleアドセンス審査時の状態 3

なんだかんでで根強い人気よね、アドセンス。 どうも、ラングです。今回は、雑記ブログの運営過程において導入する、収益方法の一つ「Googleアドセンス」を扱うために、必要となる審査通過に向けてやったこと ...

無料ロゴ制作ツール5選オススメ 4

無料とはいえ、クオリティについては侮るなかれ。どうも、ラングです。ブログやホームページ運営していると、カッコいい、見栄えのよいロゴを作れないかな?って思うことあると思うんだよね。無料でロゴを作れるウェ ...

5

どうも、ラングです。実は、新しくブログを作るにあたってドメインを取得しようと思ってたんだけど、せっかくなら新しいサーバーで作ってみようと考えた。(既存はエックスサーバー)料金抑えつつ、独自ドメインがも ...

-雑記
-