[fourget]

無茶な要望すみませんでした

この要望の背景として、色分けされたテーブルを多く使ったサイトを運営されているお客様がいらっしゃいまして

そのサイトは外注で作られており、お客様にHTML,CSSの知識がないと安易にテーブルをカスタマイズできないような作りになっていたため

お客様でも直感的にテーブルを簡単にカスタマイズできるようなプラグインをさがしていたのですが、プラグイン「Advanced Gutenberg」のAdvanced TableだとHTML、CSSの知識がなくともある程度カスタマイズできるのですが、

Advanced Tableテーブルのボーダーは「あらかじめ存在するもの」と設定されており、セルの背景色を設定するとボーダーの部分が透明になりセル全体が塗りつぶされた状態ではくなってしまうので

ボーダーを設定しないと空白ができ、セルをボーダーで全部囲むとボーダーが2重になりテーブルの線の太さが１ｐｘと２ｐｘの混合になる見た目の悪いテーブルに仕上がってしまうので

CSSを使って色の付いたセルのボーダーの色を背景色に変える、といった作業が必要になってしまったので「個人的にいただけない」と思っての要望でした。

複雑なテーブルに関しては、エクセルやスプレッドシートなどで作ったものを画像として保存しサイトに張り付けたほうがよさそうですね

お忙しい中、要望に耳を傾けてもらいありがとうございました。

トピック閉じさせてもらいます。

♥ 1

いいねをした人: 居ません

[fourget]

お忙しい中、返信ありがとうございます。

教えてくださった方法をためしてみます。

SCSSだけでJSのような動きを再現できるとは知らなかったもので・・・

深堀すればするほどすごく面白く、勉強になるテーマに出会えて本当に良かったです！

それではトピックを閉じさせていただきますね。

ご対応ありがとうございました。

♥ 1

いいねをした人: 居ません

[fourget]

返信ありがとうございます。

言葉足らずで申し訳ありませんでした。

『ヘッダーサブナビゲーションの色もカスタマイズ＞デザイン＞ヘッダー』で変更できるようにして、そこで変更した色を

[data-scrolled=false] .l-header--sticky-overlay-colored-lg {
  color: var(--overlay-header-text-color,#fff);
}

と同じ場所に格納してほしい、という要望でした。

以下背景です。

背景画像が暗いためCSSで文字色を白に変えているのですが「オーバーレイ（上部固定/スクロール時背景白）」をつかうと背景色と色が同じなため見えなくなってしまいまして

現在メインのヘッダーでは

.l-header{
  color:black;
}

で、地の文字色を黒に設定しておいて、カスタマイズ＞デザイン＞ヘッダー　で文字色を白に設定しておけば

スクロールしてないときは

[data-scrolled=false] .l-header--sticky-overlay-colored-lg {
  color: var(--overlay-header-text-color,#fff);
}

これが.l-headerで設定した黒を打ち消して文字色を白に上書きしているのを確認しました。

これをスクロールしたときにdata-scrolledが発火して

[data-scrolled=true] .l-header--sticky-overlay-colored-lg {
  background-color: #fff;
  background-color: var(--_background-color,transparent);
}

となり、『カスタマイズで変更したcolor設定が無くなり、ヘッダーの背景が白になると同時に文字色が.l-headerで設定した黒に戻る』ことでメインヘッダーの色問題は解決したのですが

.p-header-sub-nav .c-navbar__item a　で変更した色も上記のようにスクロールすることで色を変化させることは可能なのでしょうか？

重ね重ね言葉足らずで申し訳ございませんでした。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿