【賢威８】グローバルナビを表示領域全体に配置する方法

『賢威7.1』から『賢威8』へ移行したことで、ページヘッダー部のグローバルナビが表示されなくなっていたことに気付きました。

グローバルナビもどうやら移行の対象外のようですね。

表示させるだけであればダッシュボードの『外観』⇒『メニュー』でチェックを付けるだけでOKです。

「あぁ、そんなカテゴリー作ってたな」と思いつつ、とりあえず表示は出来ました。

ただ、この左寄せの配置がちょっと気に食わなかったので全体に並べてみることにしました。

※以降は開発環境での画像を使用しています。

グローバルメニューの全体配置

スタイルを変えたい部分はこちら。

グローバルナビを全体に配置させるには『base.css』を変更する必要があります。

.keni-gnav_cont{
	margin: 0;
	background: #fff;
}

上記がグローバルナビの表示エリアのスタイル定義になります。

ここに下記のように変更します。

.keni-gnav_cont{
	margin: 0;
	background: #fff;
	width: 100%;
	text-align: center
}

結果がこちら。

無事、メニューが全体に表示されるようになりました。

しかし、メニューの子がいまだ小さいままとなります。

さすがに親の大きさに対して小さな表示は微妙なので今度はこちらを親と同じサイズに表示されるよう修正していきます。

※なお、メニュー個々の表示領域は自動で決定されるようです。等間隔配置は引き続き検証してみます。

子メニューの大きさを変えるのにも『base.css』を修正していきます。

変更する箇所がこちら。

.keni-gnav_inner ul{
	border-top: 0;
	letter-spacing: -.5em;
}

ここに大きさの指定を追加します。

.keni-gnav_inner ul{
	border-top: 0;
	width: 100%;
	letter-spacing: -.5em;
}

結果がこちら。

無事、親と同じ大きさで表示されるようになりました。

メニューの表示を左寄せにしたい場合は親のスタイル定義を変更することで可能です。

.keni-gnav_cont{
	margin: 0;
	background: #fff;
	width: 100%;
	text-align: center　/* この行を消す */
}

今回の変更にあたって、最初ソースを見て辺りを付けたんですが、親のスタイルがここまで影響を与えるとは思いませんでした。

子のスタイルから変更しては確認の繰り返しで3時間程度かかった気がします…。Web系の技術も難しいですね。

以上です。

コメントを残す