WordPress個別サポート

賢威のグローバルメニューは次のようにサイト名の下に表示されます。

賢威のグローバルメニュー(クール版の例)

賢威のグローバルメニュー(クール版の例)

グローバルメニューのフォントサイズ

グローバルメニューの各項目のフォントサイズは次のように「1.2em」に設定されています。

#global-nav #menu {
    font-size: 1.2em;
}

「1.2em」を任意のサイズに変更すればグローバルメニューのフォントサイズを変更できます。フォントサイズを大きくする場合は、必要に応じてメニュー項目の左右の余白を狭くした方が良いかもしれません。以下にCSSの例を紹介します。

/* グローバルメニューのフォントサイズを設定 */
#global-nav #menu {
    font-size: 1.6em;
}

/* メニュー項目の左右の余白を設定 */
#global-nav #menu li a {
  padding-left: 1.3em;
  padding-right: 0.8em;
}

表示結果は次のようになります。

グローバルメニューのフォントサイズを大きく

グローバルメニューのフォントサイズを大きく

メニュー項目のアイコンを変更する

クール版のメニュー項目に付加されるアイコンを変更するには次のようなCSSを入力します。

/* メニュー項目のアイコンを設定 */
#global-nav #menu li a {
    background: url("images/square.gif") no-repeat 0.3em center;
}
この例ではテーマのimagesフォルダに保存したgifファイルをアイコンとして呼び出しています。WordPressと関係ないフォルダに保存されている場合などは「http://」から始まるURLを指定することもできます。

表示結果は次のようになります。

メニュー項目のアイコンを変更する

メニュー項目のアイコンを変更する

メニュー項目にマウスオーバーしたときの色を設定する

メニュー項目にマウスオーバーしたときの色は「#757575」に設定されています。この色はリンクのhover疑似クラスに対して次のようなCSSを記述して変更できます。

/* メニュー項目マウスオーバー時の色を設定 */
#global-nav #menu li a:hover {
    background-color: #cca6bf;
}

表示結果は次のようになります。

メニュー項目マウスオーバー時の色を変更する

メニュー項目マウスオーバー時の色を変更する

このセレクタには「opacity: 0.7;」という透明度が指定されています。この値を1に近づければ透明度が下がりハッキリ見える状態になります。0に近づけるとより透明になります。たとえば、「opacity: 0.2;」に設定してみると、次のようにほぼ透明の状態になります。

メニュー項目がほぼ透明に(opacity: 0.2;)

メニュー項目がほぼ透明に(opacity: 0.2;)

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート