バージョン選択

フォーラム

メニュー

オンライン状況

33 人のユーザが現在オンラインです。 (25 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 33
もっと...

サイト内検索

質問 > その他 > ヘッダーナビゲーションの色を変更したい

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
angry
投稿日時: 2020/3/28 12:07
対応状況: −−−
新米
登録日: 2020/3/28
居住地:
投稿: 2
ヘッダーナビゲーションの色を変更したい
初心者です。
デザイン・色変更のためのCSS管理について教えてください。

背景色等は変更することができたのですが、
ヘッダーナビゲーションの色変更がうまくできません。

設定箇所は把握しました。
http://eccube4-styleguide.herokuapp.com/#/section/11.2

「.ec-headerNav 」の中の
& &__itemIcon の「 color: black;」と
& &__itemLink の「 color: black;」だと思うのですが、

この「& &__」が入った場合の追加CSSの書き方がわからずうまくいきません。
他にも共通するのでご教示いただけると幸いです。

よろしくお願いいたします。



kazz_oga
投稿日時: 2020/3/29 11:09
対応状況: −−−
一人前
登録日: 2013/8/5
居住地: 東京都北区赤羽西
投稿: 122
Re: ヘッダーナビゲーションの色を変更したい
http://eccube4-styleguide.herokuapp.com/#/section/11.2
および「& &__」の記載はSassの記載です。
変更後はSassからCSSへのビルドが必要です。

ビルドはnpm run buildで行います
参考:https://doc4.ec-cube.net/design_css

npmがうまくいかない場合は
https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=23790&forum=2&post_id=97269#forumpost97269
を参考にしてください
kazz_oga
投稿日時: 2020/3/30 16:11
対応状況: −−−
一人前
登録日: 2013/8/5
居住地: 東京都北区赤羽西
投稿: 122
Re: ヘッダーナビゲーションの色を変更したい
cssを直接カスタマイズする場合は次の通り
.ec-headerNav .ec-headerNav__itemIcon {
color: red;
}

&が上位の.ec-headerNavに対応します。

eccube管理機能の「コンテンツ管理>CSS管理」で修正ができます。
このCSS管理で修正したcssファイルの反映は次を参考にしてください
https://qiita.com/kakuta_yu/items/d36f2e746b59f5db7557#カスタマイズした画像やcss
angry
投稿日時: 2020/3/31 14:21
対応状況: 解決済
新米
登録日: 2020/3/28
居住地:
投稿: 2
Re: ヘッダーナビゲーションの色を変更したい
ありがとうございます!
Sass が少々敷居が高く、コマンドラインのComposerのインストールからつまずいておりました。
「コンテンツ管理>CSS管理」で修正できました。
的確なアドバイスありがとうございました。
やりたいことが実現できました!
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は64,558名です
総投稿数は97,284件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
468
2494
4
nanasess
2089
5
umebius
1651
6
yuh
1612
7
red
1411
8
h_tanaka
1029
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
792
13 ramrun 789
14 karin 657
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.