レスポンシブ体験（その５）：メニュー弄り

グローバルメニューは、どうなるのでしょう？　気になります。
レスポンシブ対応テンプレートを使っての、既存ホームページ改造体験日記（その５）です。

テンプレートは、「テンプレートキング」さんの「会社案内系ベーシックデザインC02」を使わせていただいてます。直接このページにいらした閲覧者様には、初回記事からご覧いただけるとうれしいです。

メニューはどうなる？

サイトタイトルの下にあるメインメニュー、グローバルメニューでいいですか。これについては、オリジナルテンプレートのメニューが好みです。

とは言っても、そのままでは全然勉強にならないので、PC画面用についてのみ、公開中の「手作り千両！」に似せてみることにします。

スマホ用はシンプルのままがよいと思うので、そのまま。

＜メニュー＞

メニューの組み立てそのものは、WordPressの基本機能、つまり、管理画面の「外観」／「メニュー」の機能をオリジナルテンプレートも使っているようなので、異議なしで利用します。

このメニューは、飛び先のページへマウスオンすれば項目の色を変えられるのはもちろんですが、今映しているのはこのページですよと分かるようにカレントページの色も変えられます。

上の画面が作業後の画面ですが、現在見ているページが「ホーム」、「ダミー」ページへ行こうとしてマウスを乗せました（マウスマークは写らなかった）。2箇所色が変わっているのがお分かりと思います。

これらの細工は、Wordpressが吐き出す「class」を利用し、修飾文を記述しています。先輩の紹介記事(*)が詳しいのでご参照のほど。

メニューの組み込み

メニューが複数ある場合は、メニュー名を指定しなさいとのことですので、「header.php」ファイルのphp文に作成メニュー名が「navi」であることを追記しました。

ファイル内104行目あたりに記載されている「php wp_nav_menu･･･」（上リスト2行目）が、メニューの読み込み文ですね。実際にブラウザに表示されるのは、青緑地に白文字のメニュー項目で、今までにお馴染みゆえ画像添付は省略します。

スタイル設定

今日の記事は、前出の画像メニューの色合いにするのには、CSSの各プロパティをこうしましたと言うだけの話です。

2000行を超える「style.css」のどの項目かを見分けるには、前に記載したと思いますがhtml文のソースコードを開き、「li」タグで書かれているメニュー項目を修飾している「class」名を探すことになります。

修正を加えた主要部分は、左の抜粋を参照下さい。ブレークポイント指定行の後段に書かれています。この他にもメニューの背景色をピンクにしたり、横線を加えたりしていますが、メニューデザインの本質ではないので省略します。

余談ですが、このようなチマチマした作業、いえ、チマチマした作業にかかわらずhtml文でページを作っていく作業においては、ブラウザFirefoxの「開発ツール：インスペクタ」が便利ですね。その存在を昨年ブログ先輩に教えていただいたのですが、非常に助かっております。

＜2段表示＞

レスポンシブ対応のこのテンプレートでは、メニューはどのように見えるのか？　結果は2段に見える場合もある　でした。

画面幅786px以下ではメニューは畳まれているので何ら不自然さは感じませんが、それ以上の画面でメニュー項目が多い場合、2段に表示されますので、オッと思うかも知れませんね。

では、また次回。

＜有意義情報をありがとうございました＞

*：「WordPressのナビメニューをカレント表示にする方法」