トップページ > 記事閲覧
【質問】HAIKのCSSカスタマイズ 元のCSSに邪魔されない方法は?
投稿日 : 2019/10/08(Tue) 12:35
投稿者 Yujiro
参照先
HAIKで見出し(h1〜h4など)のデザインを変更しようとしています。

ところが、元のテーマにある指定が優先され、自分の設定が反映されません。

【シンプルな例題】

独自にCSSを書くときよく使う方法は・・・

これです ======================

#beforescript{{
<style type="text/css">
<!--
 (ここに変更したいCSSを記述)
-->
</style>
}}
============================

例えば、h2を文字色=黒、下線付きにしたいなら、以下の通りに書いてフッタなどに入
れます。

#beforescript{{
<style type="text/css">
h2 {
/*線の種類(実線) 太さ 色*/
border-bottom: solid 3px black;
}
</style>
}}

ところが元のテーマのデザインに文字色指定があると、そちらが優先され、自分で
書いた方が反映されません。

下線も同様に、元デザインに指定があるならそれが優先。

(元のCSSに指定がなければ独自記述は反映)

ここをなんとか、元のデザインを無視しして自分の設定を優先させる書き方はない
でしょうか?
Re: 【質問】HAIKのCSSカスタマイズ 元のCSSに邪魔されない方法は?
投稿日 : 2019/10/08(Tue) 23:06
投稿者 Yujiro
参照先
【経過報告】CSSの強制書き換え

まずは「見出し」を変更したい場合のセレクタの書き方について。
---------------------------------------------------------------------------------

最初はセレクタとして単に「h1〜h4」と書いていたところを・・・

.haik-palette-cyan .haik-container h2

などのように実際のソースコードからセレクタのクラス名を拾い出して記述。
(いしまるさんご指摘)

その結果、セレクタとして単に「h1」や「h2」と記述するのと結果が変わりない
ことがわかった。(いやどこかに落とし穴があるかもですが)

あとでテーマ変更する可能性があるならh1、h2など一般的なセレクタの記述のま
まの方が便利です。

.haik-palette-cyan .haik-container h2 などのクラス名にはテーマデザインの名
前(基本カラーの名前など)が含まれるため、テーマを変えるとそのままでは通用
しなくなることあり。

===============================================

次にプロパティを強制的に上書きする方法の検証。
(うみほしさんご指摘 --値;の後に !important を記述)
(これと別に新たな問題発覚編)
---------------------------------------------------------------------------------

結果は以下の通り

規定デザインが以下の通りとする。

セレクタこれこれ {
プロパティA:値;
プロパティB:値;
プロパティC:値;
プロパティD:値
}

やりたいことが以下の通りとする。
プロパティAとBは上書き。
プロパティCとDは不要。
プロパティE、Fを追加。

そうして下の通りの記述。

セレクタこれこれ {
プロパティA:値;!important(規定デザインから値変更)
プロパティB:値;!important(規定デザインから値変更)
プロパティE:値;
プロパティF:値
}

これでプロパティAとBは !important によりオリジナルをうまく上書きできます。
!important がないと上書き不可。

そして新たに追加したプロパティEとFも表現可能。

しかしながら規定デザインのプロパティCとDは残ったまま。
(失敗!)

そりゃそうかも。だって独自記述ではプロパティCとDはいじってませんから。

規定デザインで指定してあるプロパティを独自記述で「なかったことにする」という
方法があるのだろうか?(やったらやったで大変なことになりげか?)

追記:2019-10-9
上記の結果の記述は様々な付帯条件が考えられます。テーマデザインの種類などで
異なる結果が考えられます。
Re: 【質問】HAIKのCSSカスタマイズ 元のCSSに邪魔されない方法は?
投稿日 : 2019/10/08(Tue) 18:48
投稿者 うみほし
参照先
スタイルの区切りを表す;のあとに
!important
を書くと,そのスタイルは最優先になります。
これが効かない場合はセレクタが間違ってると考えた方がいいでしょう。
Re: 【質問】HAIKのCSSカスタマイズ 元のCSSに邪魔されない方法は?
投稿日 : 2019/10/08(Tue) 16:35
投稿者 Yujiro
参照先
いしまるさん

あー、やっぱしセレクタなど解析必要そうですか。
手を出したくなかった・・・
Re: 【質問】HAIKのCSSカスタマイズ 元のCSSに邪魔されない方法は?
投稿日 : 2019/10/08(Tue) 15:35
投稿者 いしまる◆vOmCuTAP2Tw
参照先 https://haik.oi21.net/
見出しのアスタリスク1個のデザインを変更したいのであれば、
単に「h2」ではなく、「.haik-palette-cyan .haik-container h2」
のような感じでセレクタを指定しなければならないような気がします。
ブラウザの開発ツールなどで要素指定して調べられます。


あと、「#beforescript」 より「#lastscript」の方が、ページ内の
後半に記述されるので、元々の設定によって上書きされにくくなると
思われます。

- WEB PATIO -