WordPress Twenty Sixteen カスタマイズ 6-4-1「メニュー」編 続メニューバー 階層 表示 デザイン 追加

ごけたです。
ここでもGoogle Chromeの「検証」頼りですが、「検証」内での変更で満足して、
「style.css」ファイルに入力するのが面倒になる時があります。

はじめに

WordPress Twenty Sixteen カスタマイズ その6-4-1
今回は「その6-4」で行ったメニューに階層を追加した時の表示設定です。

設定は子テーマファイルで行っています。
変更設定はテーマ「twenty Sixteen」を初期設定の状態で行っています。
「その6-1」で行った設定は一旦削除しています。


※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。

ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
テーマはTwenty Sixteen、OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。

事前準備-階層表示

メニューバーが階層表示になっていないので、管理画面の「外観」
→「メニュー」から「階層表示」設定を行います。


ここではメインメニューバーに「カテゴリー」を表示しています。
各カテゴリーに4つ以上の投稿ページが階層メニューとして
表示されるように設定しています。



投稿ページはタイトル、投稿記事は1行と簡単に、
「パーマリンク」はローマ字入力になるよう気をつけて公開しています。

階層表示した時のメニューの特徴

PC画面

PC画面ではメニュータイトルが多くなると右上の表示だったメニューバーが
みだり寄せに移動して表示される

階層メニュー用にタイトル右隅に「下方向マーク」が表示される。

「下方向マーク」があるタイトルにカーソルを合わせて階層メニューを表示すると、
枠(罫線)でメニュータイトルが囲まれている

階層メニューにカーソルが重なった時の色変更は、
メニューバーのカーソルが重なった時の設定を引き継いでいる。



階層メニューのすぐ下のタイトルの吹き出し部分の色が設定されていない。

カーソルが重なった時に吹き出し部分だけ色が違うので若干違和感がある。


スマホ画面

階層メニューがある場合、右隅に「下方向マーク」が表示される。
タイトルと「下方向マーク」の間に「|」縦の仕切り棒が表示される。


「下方向マーク」に

「下方向マーク」にカーソルが重なって「階層メニュー」が表示されるPC画面とは違い、
スマホ画面では「下方向マーク」をクリックしないと「階層メニュー」が表示されない。


「下方向マーク」をクリックした時に
PC画面の階層メニューが枠(罫線)に囲まれて表示されていたが、
スマホ画面では枠(罫線)が非表示でタイトルのみの表示になる。

右隅の「下方向マーク」が「上方向」に変わる。

タイトルと「下方向マーク」の間にあった「|」縦の仕切り棒が消えて、
「リンク」色の点線の罫線の枠が表示される

PC画面同様に階層メニューにカーソルが重なった時の色変更は、
メニューバーのカーソルが重なった時の設定を引き継いでいる。

矢印マークは上下とも「Webアイコン」を使用している。

変更設定-PC画面編-1

階層表示の初期設定を踏まえて、PC画面では変更しました。

1:カーソルが重なった時の階層メニューの枠(罫線)を非表示にする。

階層メニューの枠(罫線)は上部と下線の2つの設定で構成されています。


まずは下線の枠(罫線)の非表示の設定から

親の「style.css」ファイルの3040-3047行目前後にある
階層メニューの下線の枠(罫線)の設定のみを変更します。

「style.css」ファイルの一番下にコピペします。
「ページの更新」ボタンをクリックします。

この内の下線設定は
「border-bottom: 1px solid #d1d1d1;」の「1px solid #d1d1d1」を
「none」に変更して非表示に設定しています。

次に
階層メニューの下線以外の枠(罫線)の非表示設定です。

こちらは削除しています。

私の理解力では原因を説明出来ませんが、この設定を入力してままにすると、
スマホ画面では下層表示ができなくなります。削除すると表示できます。


設定は

親の「style.css」ファイルの3058-3062行目前後にある
階層メニューの下線以外の枠(罫線)の設定を変更します。


この内の
「border: 1px solid #d1d1d1;」の「1px solid #d1d1d1」を「none」に変更して
非表示しています。

2:枠(罫線)の変わりに、枠(罫線)に影を付ける設定に変更して枠(罫線)を兼ねる。

「border: none;」の設定で
階層メニューを表示すると全体の枠(罫線)は非表示になりました。
タイトル位にカーソルを重ねた際のタイトルの背景色の下線が設定されていないので、
区切り表示としてややおかしく感じます。

「box-shadow: 0 2px 6px 1px #1a1a1a;」を
「border-bottom-width: 0;」の下に追加入力して
カーソルが重なった時の背景色の下線を罫線ではなく、
下線の影設定を追加して表示させています。

色設定は
影なので「#1a1a1a;」(黒系)を選択しています。



ここまでを

まとめるとこちらのソースコードになります。

「style.css」ファイルの一番下にコピペします。
ここでは「階層の下線の非表示設定」の下にコピペしています。
「ページの更新」ボタンをクリックします。

背景色の
「background-color: #fff;」の「#fff」を他の色に変更すると、
階層メニューが表示された時の背景色が変更できます。

このあとに「カーソルが重なった時に背景色を変更する」の設定するので、
ここでは背景色の設定はしていません。


3:階層メニューのタイトルにカーソルが重なった時の背景色と文字色を変更する。

設定は
親の「style.css」ファイルには設定が入力されていないので、
「/* 階層メニューバーの背景色、罫線(下線以外の枠)の設定 */」をアレンジします。

「a:hover」「a:focus」を追加入力して、カーソルが重なった時の変更設定を行います。
「background」で背景色(オレンジ系)、「color」で文字色(白系)を設定しています。

「style.css」ファイルの一番下にコピペします。
ここでは
「/* 階層メニューバーの背景色、罫線(下線以外の枠)の設定 */」の
下にコピペしています。
「ページの更新」ボタンをクリックします。




サイトを表示して

階層メニューの1段目にカーソルを合わせると背景色が設定した色に変更します。
と同時に吹き出し用の上向き矢印の色が設定されずに
「白系」で表示されてしまいます。

4:カーソルが重なった時の階層メニュー用の「吹き出し三角」の色変更。

階層メニューの1段目にカーソルを合わせた時の吹き出しの「三角」部分が
「白系」で表示されています。
これを階層メニュー側の背景色に合わせて変更します。

まずは
上部の罫線の色のみの設定です。

親の「style.css」ファイルの3076-3081行目前後の設定の
「border-color: #ff8500 transparent;」の「d1d1d1」(灰色系)を
「ff8500」(オレンジ系)に変更しています。
これで吹き出しの上向きの罫線の色が変更されます。

「style.css」ファイルの一番下にコピペします。
ここでは「階層タイトルにホバー、フォーカス時の背景色、文字色設定」の
下にコピペしています。
「ページの更新」ボタンをクリックします。

次は
上向き矢印の内側の色の設定です。

[code]

親の「style.css」ファイルの3083-3088行目前後の設定の
「border-color: #d1d1d1 transparent;」の「d1d1d1」(灰色系)を
「ff8500」(オレンジ系)に変更しています。
これで吹き出しの上向きの罫線内側の色が変更されます。


「style.css」ファイルの一番下にコピペします。
ここでは
「階層メニューバー吹き出し-上矢印の罫線の外側」の下にコピペしています。
「ページの更新」ボタンをクリックします。



※この設定では、
メインメニューのタイトルにカーソルを重ねた時と、
階層メニューの2段目以上にカーソルを重ねた時に
吹き出しの矢印マークの色が背景色と異なって表示されます。メインメニュー側か階層メニュー側かどちらかの
吹き出し用矢印の色設定を行うと
もう片側の色設定は出来ませんのでこのような表示になります。
これだけは設定上どうしようもありません。


吹き出しの矢印マークを非表示にする

吹き出しの矢印マークが無くても階層表示はメインのメニュータイトルに
カーソルが重なれば表示されるので、
吹き出しに拘らなければ非表示設定でも構いません。

「階層メニューバー吹き出し-上矢印の罫線の外側」と
「階層メニューバー吹き出し-上矢印の罫線の内側」の
「border-color: #d1d1d1 transparent;」の「#d1d1d1」を削除して
透過の「transparent」だけを残して「border-color: transparent;」にします。

「ページの更新」ボタンをクリックします。


吹き出しの矢印マークを下向きにしてみる

設定を行う前に

吹き出しの矢印マークが上向きの時と同様に
こちらも設定でも一番上のタイトルにカーソルを重ねた時と、
2段目以上にカーソルを重ねた時に吹き出しの矢印マークの色が
背景色と異なって表示されます。



設定は
「階層メニューバー吹き出し-上矢印の罫線の外側」と
「階層メニューバー吹き出し-上矢印の罫線の内側」を使用します。


設定その1
「階層メニューバー吹き出し-上矢印の罫線の外側」の変更

「border-color: #fff transparent;」の「#fff」を削除して、
「上向き矢印」の背景色を透過設定にします。

「border-width: 0 0 0;」の値を全て「0」にして
「上向き矢印」の罫線を非表示にします。

「style.css」ファイルの一番下にコピペします。
ここでは「階層メニューバー吹き出し-上矢印の罫線の内側」の下にコピペしています。
「ページの更新」ボタンをクリックします。


設定-2

「階層メニューバー吹き出し-上矢印の罫線の内側」の変更

「border-color: #fff transparent;」の色を「d1d1d1」に変更して、
メインメニューバーにカーソルが重なった時と同じ色に設定する。

「border-width: 0 8px 8px;」の値を
「0 8px 8px」から「15px 15px 0」に変更して、
吹き出しの矢印を上向きから下向きに変更する。

「style.css」ファイルの一番下にコピペします。
ここでは
「PC画面 ホバー、フォーカス時の吹き出しの矢印を下向きに変更-1」の下に
コピペしています。
「ページの更新」ボタンをクリックします。


上向き矢印の時の同様に、表示中のメニュータイトルに
カーソルが重なった時はメニュータイトルの背景色と
下向き矢印の色が違う表示になります。


変更設定-スマホ画面編

ここではスマホ画面での親の「Style.css」ファイル設定を

スマホ画面での階層メニューはPC画面の変更と引き継いでいる個所と、
スマホ画面専用の表示設定になっている個所があります。

スマホ画面専用の表示設定の説明-ソースコード

ここでは親の「style.css」ファイルからスマホ画面での設定に該当する
ソースコードで各設定を見ていきます。
「/* */」のタイトルに簡単な設定内容を、
各設定の右側の「/* */」に各設定の簡単な説明を記載しています。

861-874行目前後



876-884行目前後



886-890行目前後

「background-color: transparent; 」の「transparent」の代わりに
「#xxxxxx」カラーチャート設定すると、
下矢印にカーソルが重なった時に背景色が変更する。

「color: #007acc;」の「#007acc」を変更すると
下矢印の色と点線の罫線の色が変更する。


892-895行目前後

タップした時の枠(罫線)の色は


897-899行目前後



901-903行目前後

WordPress Twentyシリーズが採用しているWebアイコンは「Genericons」です。
「Genericons」の使用方法が分からないので、
他にどのような矢印アイコンがあるかは不明です。
スマホ画面ではここまで説明してきた設定の全てを変更していません。
ここでは
「右隅の「下方向マーク」をクリックして階層メニューを表示した時の
点線の罫線の枠を非表示にする。」のみ設定しています。


階層メニューを表示した時の点線の罫線の枠を非表示にする

設定方法



892-895行目前後

「outline: thin dotted;」の「thin dotted」を「none」に変更すると、
点線の罫線が非表示になります。
但しメニューと下向き矢印との間の「|」仕切り棒も非表示になっていまので、
ここだけ他の表示と違いが出来てしまいます。



本来ならここにも「|」仕切り棒の設定をしたいのですが、
残念ながら設定が上手くできていません。
なので背景色で補うことにしました。
「background: #d1d1d1;」を一番下に追加入力しています。
※他の色設定と調整しながらお好みの色を設定してください。

「box-shadow: 0 2px 6px 1px #1a1a1a;」
ここでは他の合わせて影の設定も追加しています。
「style.css」ファイルの一番下にコピペします。
ここでは
「/* 階層メニューバー吹き出し-上矢印の罫線の内側 */」の下にコピペしています。
「ページの更新」ボタンをクリックします。

※吹き出し用の矢印を非表示にしたり、逆さにする設定は追加設定なので、
ここでは初期変更設定の一番最後の設定のうしろにコピペしています。


オマケ設定
上記の「右隅の「下方向マーク」をクリックして階層メニューを表示した時の
点線の罫線の枠を非表示にする」の設定では右隅の矢印を「クリックした時」のみでした。

カーソルが重なった時もまとめて色を変更する場合は、

892-895行目前後の「outline: thin dotted;」の
「thin dotted」を「none」のみ変更します。


続けて


さらに

「box-shadow: 0 2px 6px 1px #1a1a1a;」と
こちらで影の設定も追加することでカーソルが重なった時でも
背景色と影表示が可能になります。

「style.css」ファイルの一番下にコピペします。

ここでは
上記で設定した「フォーカス時(タップ)の矢印用の
アウトラインの罫線(枠)の太さ、種類、位置設定 */」を一旦削除してから

「/* 階層メニューバー吹き出し-上矢印の罫線の内側 */」の下にコピペしています。
「ページの更新」ボタンをクリックします。

さいごに

階層メニューの吹き出しは見出しの吹き出しと同じ設定構成になっていますが、
吹き出し用の三角は吹き出し側と受け口側の両方に背景色があると
表示に支障がでることが初めて分かりました。
メニューバー(受け口)側のリンク設定を変更したり、色々試してみましたが、
私の知識では対応できませんでした。

最後までお合い下さいまして有難うございました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク