Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › グローバルメニューのデザイン
- このトピックには5件の返信、2人の参加者があり、最後にたっきぃにより8年、 7ヶ月前に更新されました。
-
投稿者投稿
-
-
2015年3月19日 2:39 AM #23982マッシュゲスト
グローバルデザインのメニューのみ、
下記のように変えたいと思っています。他社のもので申し訳ありません。。
横幅、縦幅、デザイン、色を同じにしたいのですが
どのようにすればよいでしょうか? -
2015年3月19日 5:40 PM #24043わいひらキーマスター
「外観→カスタマイズ」の「色」から「グローバルナビ色」を変更し、「レイアウトの設定(全体・リスト)」から「グローバルナビを横幅いっぱいにする(要グローバルナビ色設定) 」にチェックを入れれば変更できます。
-
2015年3月19日 6:27 PM #24050マッシュゲスト
ご回答有難うございます!
縦幅も長くしたいのですが、可能でしょうか?
-
2015年8月28日 10:16 PM #31459たっきぃゲスト
私も縦幅の調整の方法を知りたいです。
-
2015年8月29日 12:36 AM #31468Hidekichiゲスト
通常だと、ulに対して縦幅を設定します。その中のliは高さ100%にします。ulにpaddingが入って無ければ、通常はメニューのそれぞれのアイテムの高さはulの高さになります。
Simplicityの場合、それだけではダメでして、aタグに色々と設定がされているので、aタグの高さも100%にする必要があります。
#navi ul { height: 80px; /*わかりやすいように大きめにしてます*/ } #navi ul > li { height: 100%; } #navi ul li a { height: 100%; box-sizing: border-box; /*はみ出し防止*/ }
こんな感じで一応縦幅は変えて、マウスオーバーした部分がはみ出さず色が変わるかと思います。
しかし、これだけだと、メニュー自体が上にあってアレだと言う場合は、#navi ul li a { height: 100%; box-sizing: border-box; /*はみ出し防止*/ line-height: 73px; }
あたりを入れてみて下さい。73pxは高さ80pxからフォントサイズの半分(14px/2 = 7px)を引いた数値です。ここはマニュアルでの作業なので、見た目ちょっと上のがいいかなと思えば72pxとか71pxあたりにすれば良いのではないかと思います(フォントの状態による)。若干計算よりも、上に上げたほうが真ん中っぽく見えたりします。
これ、aタグの中にspanでも入ってたら自動でできるんですけどね。
それかもうひとつ方法がありまして、マウスオーバーした時に色を変えているわけですが、これはaタグに記載してあります。これをliのバックグラウンドでするようにします。
#navi li:hover { background-color: #ddd; }
そうしたらaタグに高さはいりません。
しかし、そうするとテキストしかサブメニューを表示する反応エリアがなくなりますので、ナビのhtmlの構造自体を変える必要があります。
現在は以下のような構造になってます。(以下htmlタグは[ul][/ul]のように[]で書きますので〈〉と読み替えて下さい。〈〉で書くと実際にタグとしてこのページに反映されてしまうため)[ul]
[li]
[a](例えば)HOME[/a]
[/li]
[/ul]これを、
[ul]
[a]
[li](例えば)HOME[/li]
[/a]
[/ul]こうすることで、li全体が反応エリアになります。それをしてしまうとcssがちょっと変わるので、構造自体をよく理解して新たに設定していかねばなりませんが、おそらくそうするのが良いと僕は思います。
この手法をとった時には、ついでに[li]の中に[span class=’itemText’]メニュー名[/span]を入れて下さい。そうすれば、
.itemText{ display: block; top: 50%; position: absolute; transform: translateY(-50%); }
これで縦中央にメニューが自動で入ります。transformはベンダープレフィックスが必要です。最近のブラウザだと要らないと思うんですけれども。
横道にそれました。話を戻します。
先ほど#navi ulに高さを入れました。そうするとサブメニューもその高さになってしまいます。なので、#navi ul.sub-menu, #navi ul.children { height: 31px; } #navi .sub-menu li, #navi .children li { height: 100%; } #navi .sub-menu li a, #navi .children li a { height: 100%; line-height: 24px; /*ここも若干少ない方が真ん中っぽい 23pxとか*/ }
※ line-heightは、高さ31px(元々の設定の高さ) – ( フォントサイズ(14px) / 2 ) + α(微調整) です。
多分これぐらいでイケると思うんですけれども、色々やらないといけないのと整合性を保たないとレイアウトが崩れるので、ひとつずつweb開発環境(F12キー)などで確認しながら試してみて下さい。
また元に戻せるように、オリジナルのcss(メニュー部分)はコピーなどしてバックアップしておいて下さい。 -
2015年8月29日 4:26 PM #31508たっきぃゲスト
返信が遅れましたすみません。
最高です!上手く出来ました。
こんなに対応が早くて、しかも易しく説明していただけるなんて思ってませんでした。
素敵です。ありがとうございました。
-
-
投稿者投稿
- トピック「グローバルメニューのデザイン」には新しい返信をつけることはできません。