グローバルナビメニューのCSS定義について - Cocoonテーマに関する質問

RE: グローバルナビメニューのCSS定義について

わいひら — Tue, 19 Nov 2024 11:08:30 +0000

ご確認いただきありがとうございます。

RE: グローバルナビメニューのCSS定義について

大門未知子 — Tue, 19 Nov 2024 03:13:17 +0000

----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.0.1
カテゴリー数：15
タグ数：12
ユーザー数：1
----------------------------------------------

修正されていることを確認しました。
本件をクローズとします。

RE: グローバルナビメニューのCSS定義について

わいひら — Mon, 18 Nov 2024 17:02:55 +0000

確かにフレックスボックスを使った方がスマートですね。
コードを参考にさせていただいて修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/ff220c46b480e0e0d6f3cd0af0a19d2a4ac3ba0b
全種類のスキンを調べたところ、いくつか修正する必要はありましたが、大体は正常に動作しました。

フレックスボックスを使った仕様変更により修正が必要になったスキン
・ハイジーン
・ライトニングスキン
・シーズンスキン

フレックスボックス関係なく修正したスキン
・ベルヌーイシンプログ：グローバルナビ背景色がスキンカラーになっていなかった
・ライトニングスキン：色々な不具合
・モノクロームスキン：背景色が白色になっていた不具合修正
・シンプルダークモード系スキン：スリムモードにしてもスリムにならない

グローバルナビメニューのCSS定義について

大門未知子 — Mon, 18 Nov 2024 03:46:15 +0000

----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.0
カテゴリー数：19
タグ数：150
ユーザー数：1
----------------------------------------------
●目的

以下のコードで、無理に行間を指定しているように思え。
その改善について述べます。

ただしスキンへの影響は全て確認できていません。その点はご了承ください。

https://github.com/xserver-inc/cocoon/blob/cd8b41d607624634c1aebc018cafaa3e82e4e1b2/style.css#L1115

●改善点

デフォルト高さ60pxとスリム40pxはnavi liに指定し、あとはflexを使い縦中央配置すればよく。
line-heightの60pxと40px指定は不要と思います。

https://github.com/xserver-inc/cocoon/blob/cd8b41d607624634c1aebc018cafaa3e82e4e1b2/style.css#L1061
https://github.com/xserver-inc/cocoon/blob/cd8b41d607624634c1aebc018cafaa3e82e4e1b2/style.css#L1108

---

サブメニューのアイコンをflexを用い縦中央配置。

.navi-in .has-icon {
  position: absolute;
  right: 6px;
  top: 0;
  display: flex;
  opacity: 0.7;
  font-size: 11px;
  height: 100%;
  align-items: center;
}

https://github.com/xserver-inc/cocoon/blob/cd8b41d607624634c1aebc018cafaa3e82e4e1b2/style.css#L1086-L1092

---
メニューの高さはliで指定しているので不要、メニュー内の要素に適用する。

メニューの高さはliで指定しているので不要、メニュー内の要素に適用する。
.navi-in .caption-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
}
.navi-in .caption-wrap > div {
  width: 100%;
}

https://github.com/xserver-inc/cocoon/blob/cd8b41d607624634c1aebc018cafaa3e82e4e1b2/style.css#L1114-L1125

---
メニュー内の要素は用い縦中央配置。

メニュー内の要素は用い縦中央配置。
.navi-in a {
  position: relative;
  color: var(--cocoon-text-color);
  text-decoration: none;
  display: flex;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  height: 100%;
}

https://github.com/xserver-inc/cocoon/blob/cd8b41d607624634c1aebc018cafaa3e82e4e1b2/style.css#L1150-L1157

●コード変更箇所まとめ

グローバルメニュー部分を

https://github.com/xserver-inc/cocoon/blob/cd8b41d607624634c1aebc018cafaa3e82e4e1b2/style.css#L1058-L1162

以下に置き換えます。

https://notepad.pw/share/DwAGCoCubQgdZNB6cci9

●影響

スキンHygiene

以下が不要。

https://github.com/xserver-inc/cocoon/blob/cd8b41d607624634c1aebc018cafaa3e82e4e1b2/skins/hygiene/style.css#L49