コメントの編集

Edit a comment

Name:

Subject:

Mail:

URL:

Comment:

A1. ハンバーガーボタンの部分の色は『.el_humburger span 』というclass名の background-color を変えれば良いのですが、問題は Dark Reader を適用すると何色にしても[打消]グレーになってしまう点です。
検証してみたのですが、赤にしてもグレー、白にしてもグレー、黒にしてもグレー、なのです。[/打消]設定色よりも数割暗い色になります。
多分、文字色・リンク色に対しては設定よりも数割明るい色調に変更され、背景色は数割暗い[打消]グレー[/打消]色になるのだと思います。
ハンバーガーボタンは文字では無く<span>というタグの背景に色を付けて3列並べてクリックでクロスに変化するように作っているので、何色を設定しても結局暗い色になってしまいます。
方法としては、[打消]CSSに !important を付けて優先度を上げる事が有効でした。
ただ、自分以外も閲覧するという事も考えて、明るめのグレー（白背景でも黒背景でも取り敢えず見える）か、[/打消]全く違う色（赤系や青系など白・黒以外）にした方が良いかと思います。（!important を付けても、Dark Reader側のstyleにも !important が付いてしまうようです。）

改変個所です。
テンプレート編集画面でCtrlキー＋Fキーで検索窓を出し、[色:3399FF].el_humburger span{[/色] と入れて検索すると2カ所出て来るので2番目の方に有る
.el_humburger span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background-color:[色:FF6600]#777[/色];　←この部分を変更
}
というスタイルの background-color:#777; を別の色コードにして[打消]後ろに !important を入れます。
（グレー系でこれ位かなぁ？と思うのは、background-color:#888 !important;　だと。取り敢えず画面が淡色でも暗色でも見える。）[/打消]下さい。

.el_humburger span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background-color:#ff0000;
}

赤色なら background-color:#ff0000; となります。

A2. ct_resp3cの記事カラムのみで710pxなので、sunny_respでは800px位でご説明致します。

テンプレート編集画面でCtrlキー＋Fキーで検索窓を出し、[色:3399FF]#wrapper[/色] と入れて検索すると4カ所出てきますがその内の3番目
#wrapper{
  display:flex;
  flex-flow:column;
  max-width:[色:FF6600]1040px[/色];　←この部分を変更
  min-height:100vh;
～
以下略
}
ここの数値をマイナス200pxして [色:FF6600]840px[/色] にして下さい。

次に [色:3399FF]#box[/色] で検索すると1カ所有ります。
#box{
  width:100%;
  max-width:[色:FF6600]1000px[/色];　←この部分を変更
  flex:1 0 auto; /* IE対策含む */
  margin:0 auto;
  position:relative;
  text-align:left;
}
ここの数値をマイナス200pxして [色:FF6600]800px[/色] にして下さい。

次に [色:3399FF].ud-button[/色] で検索すると2カ所有ります。
（1カ所目）
.ud-button{
  position:fixed;
  width:33px;
  bottom:150px;
  margin-left:[色:FF6600]1017px[/色];　この部分を変更
  text-align:right;
  line-height:2.1;
}
ここの数値をマイナス200pxして [色:FF6600]817px[/色] にして下さい。

（2カ所目）
@media screen and (max-width: [色:FF6600]1130px[/色]){　←この部分を変更
.ud-button{
  margin:0;
  right:0;
}
}
ここの数値をマイナス200pxして [色:FF6600]930px[/色] にして下さい。

後は更新ボタンを押して適用して下さい。（複製を作って作業すると安心です。）

-----追記-----
05/01 再度検証し、 !important が有っても有効にならない事を確認致しました。
（非現実的ですが…<span>に対してstyleを直書きした「インラインスタイル」に、更に !important を付けると適用されました。^^;）
コメントした後で恐縮ですが、目立つ色を設定する方が良いと思われます。m(__)m

Password:

Secret:非公開コメント