テーマ「First」のカスタムで土日が潰れる Part2

休日返上

土日が潰れるシリーズ第2弾は、日曜編です。今回はテーマ「First」でナビゲーションメニューのカスタマイズに挑戦します。

スポンサーリンク

ナビゲーションメニューを見やすく

ナビゲーションメニューというのはページのヘッダー部分によくある、カテゴリーなどにアクセスしやすいようにデザインされたメニューのことです。

以下はカスタムを始める前の当ブログのナビゲーションメニューです。

ヘッダーメニュー

見づらくてすみません。右のほうに一応カテゴリーらしきものがありますが、全然ナビゲーションしてないです。これでは誰もクリックしてくれないと思います。
WordPress管理画面の「外観→メニュー」で、メニューをどこに配置するかチェックで選べるのですが、上の画像では「ヘッダーメニュー」にチェックを入れています。今回はそのチェックを外し、「ナビゲーションバー」にチェックを入れました。すると、

ナビゲーションメニュー

こうなりますが、CSSで装飾を何もしていないのでこのままでは場所を移動しただけになってしまいます。

ナビゲーションメニューのリンクを装飾

テーマ「First」においてこの部分はnav要素になっており、”main-navigation“というクラス名がつけられているので、ここにCSSで装飾を施します。nav要素はHTML5から新たに加わったもので、ページ内の主要なナビゲーションに使う要素です。

.main-navigation a { 
好みの設定;
}
.main-navigation a:hover {
好みの設定;
 }

上が通常時、下がマウスホバー時の設定です。

また、現在位置の設定については、

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
好みの設定;
}
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover,
.main-navigation .current_page_ancestor > a:hover {
好みの設定;
}

先ほどと同様、上が通常時、下がマウスホバー時です。

ドロップダウンメニューの装飾

テーマ「First」ではレスポンシブデザインに対応しており、スマホやタブレットでページを見たときに自動でドロップダウンメニューに切り替わってくれます。

ドロップダウンメニュー

ちょうど上の画像のような感じです。そしてこの「メニュー」の部分の装飾をCSSで設定するには、以下のようにします。

.menu-toggle {
好みの設定;
}
.menu-toggle:hover {
好みの設定;
}

メニュー各項目の前にアイコンを入れる

次に、以下のページを参考にしながら(ちゃんと接続できます)、前回Part1の記事でも登場したFont Awesomeを使ってアイコンフォントをリンクの前につけてみました。

データベースに接続できません – WordPressのカスタムメニューにCSSを当てる方法

.menu-メニュー名-container ul#menu-メニュー名 li a:before {
 display: inline-block;
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 padding-right: 2px;
 color: #333;
 border-style: none;
 font-size: 16pt;
 bottom: 1.5px;
}

上記のコードをCSSに記述して(大きさや色などはお好みで)、リンクの「前」部分を設定します。「メニュー名」となっているところは、WordPress管理画面「外観→メニュー」のメニュー名を記述します。メニュー名は任意につけられるのですが、ここを日本語にしてしまうと上記のクラスやIDを指定する際に複雑な文字列になってしまうのでおすすめできません。ですのでなるべく半角英数を使ってメニュー名をつけましょう。日本語をつけた場合はGoogle Chromeなどの「検証」機能を使えばどんな文字列になっているか確認できます。
また、このままではFont Awesomeのデータを呼び出せていないので、呼び出す必要があるのですが、私の場合はCDN経由で呼び出しています。やり方はPart1をご覧ください。

次は実際にアイコンフォントをリンク前に配置します。それぞれのリンクに別のアイコンを置きたいので、まずは各リンクにclass名をつけます。やり方は、WordPress管理画面「外観→メニュー」の右上「表示オプション」をクリックし、以下の画像のようにCSSクラスにチェックを入れます。

メニューオプション

すると、メニュー構造の各項目を選択した際に「CSS class」が出現するようになります。

メニューCSS

ここに任意のクラス名を入力すれば、メニューの各項目ごとにCSSで装飾を施すことができるようになります。実際にアイコンフォントをつけてみました。

.menu-メニュー名-container ul#menu-メニュー名 li.設定した任意のクラス名 a:before {
 content: "\Font AwesomeのUnicode";
}

 「メニュー名」は先ほどと同様に、「設定した任意のクラス名」にはメニューの各項目に設定したCSS classを記述します。「Font AwesomeのUnicode」には配置したいアイコンフォントを「Font Awesome」から選び、そのUnicodeを記述します。

アイコンUnicode

これでメニューのリンク前にアイコンフォントを設置する作業は終了です。私の場合はこうなりました。

ナビゲーションメニュー

アイコンだけでなく、文字の大きさや太さを変えたりして、以前よりは見やすくなりましたよね。

以上でPart2は終了です。今回の土日はこんな感じで潰れてしまいました。
休日など時間が取れるときは記事を書くだけでなく、このようにWebサイトのデザインも進めていくつもりです。まだまだWebデザインの勉強を始めたばかりなので様々な壁にぶち当たってますが、とても楽しんでやってます。
最初どうしても上手くいかなかったものが試行錯誤して上手くいったときの達成感は堪らないですね。初心者の特権かもしれません。これからも頑張ります!

スポンサーリンク

この記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA