「sunny_resp2-l（左メニュー）」の修正・更新致しました。21/04/28

Re: 呑兵衛あな 様へ

こんにちは。お知らせ頂き有難うございます。

今ほど記事を修正致しました。28日の時点で暗色版CSSは修正しておりましたが、記事内に入れておりませんでした。
お気付き頂き有難うございます。m(__)m

> Q1 (max-width: 430px)にてヒットするヵ所の記述が上記説明の記述と異なります．．．が、修正するべきでしょうか?
…ヒットする箇所のうち h1#blog-name{ という部分が padding:0 40px 0 0; となっていたら padding:0 0 0 40px; のように修正して下さい。
> Q2 (max-width: 430px)で検索すると、広告事件に伴う修正説明の内容でもヒットし、計2ヵ所出ます。
…この記事カッコ内を追記修正致しました。

バタバタと色んな修正をしておりましたので、作業後も何かが抜けているような不安が拭えません。
素人テンプレートなので、また何かお気付きが有りましたらお知らせ下さいませ。m(__)m

Re: 呑兵衛あな 様へ

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

改変個所です。
テンプレート編集画面でCtrlキー＋Fキーで検索窓を出し、.el_humburger span{ と入れて検索すると2カ所出て来るので2番目の方に有る
.el_humburger span{
position:absolute;
left:0;
width:100%;
height:2px;
background-color:#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キーで検索窓を出し、#wrapper と入れて検索すると4カ所出てきますがその内の3番目
#wrapper{
display:flex;
flex-flow:column;
max-width:1040px;　←この部分を変更
min-height:100vh;
～
以下略
}
ここの数値をマイナス200pxして 840px にして下さい。

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

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

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

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

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

Re: 呑兵衛あな 様へ

こんばんは。お返事有難うございます。

Dark Readerを適用した場合のハンバーガーボタンが暗くなって見難くなるとは…検証してみなければ分かりませんでした。
全ての閲覧者が拡張機能を使っている訳では無いので「直ぐ」には無理ですが、良い方法を見付けて今後の修正・更新等で改良できれば良いなと思います。
有難うございました。

Re: 呑兵衛あな 様へ

こんにちは。コメント有難うございます。

> ブログのTOPでは『プラグイン3は記事の上に表示』されますが、個別記事を表示させた場合は、コメント欄の下部に表示されます。
これは仕様でしょうか?
…仕様です。他の共有テンプレートもそうなっております。
個別記事ページで優先するべきは記事本文で、プラグイン３の内容はエントリーページでトップ表示されているので（個別記事で）上に表示する必要性を感じないからです。寧ろ、不要な方が簡単に外せるようにコメントアウトで場所を示しています。
1月にURLでお渡ししたテンプレートのHTMLもそうなっているはずです。
先程貴殿ブログのHTMLを拝見致しましたが、プラグイン３を下段に表示する部位がコメントアウトごと削除されているようですので、ご自身で削除されたのではないかと思いますが…覚え有りませんか？
（因みに私のブログの個別記事ページに表示されていないのは、意図的に外しているためです。）

再度取り付けたい場合は、下記の部位にソースを追加して下さい。
・（Ctrlキー＋Fキーで検索窓を出し「<!-- ページネーション　ここから -->」と入れて検索
・見付かった箇所2/2の場所の上に下記ソースを追加

<!-- 固定リンク画面の下段に表示 -->
<div class="menu3">
<!--プラグイン３-->
<!--permanent_area-->
<!--plugin-->
<!--plugin_third-->
<section class="blog-con blog-con2">
<h2 class="entry_title" style="text-align:<%plugin_third_talign>"><%plugin_third_title></h2>
<div class="con_body">
<div style="text-align:<%plugin_third_ialign>"><%plugin_third_description></div>
<%plugin_third_content>
<div style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></div>
</div></section>
<!--/plugin_third-->
<!--/plugin-->
<!--/permanent_area-->
<!--/プラグイン３-->
</div>
<!-- 固定リンク画面の下段に表示　ここまで -->

後は更新ボタンを押して下さい。m(__)m

Re: 呑兵衛あな 様へ

テンプレートのスタイルシート内に1ヵ所（Ctrlキー＋Fキーで .entry_title h2 と入れると）見付かります。
ただ、この部分の font-weight:normal; を bold に変更すると、プラグインのメニュー等も全て太文字に変わります。
記事タイトルのみに限定したい場合は、下記スタイルを編集枠の一番下にでも追加して下さい。

.entry_title h2 {
font-weight: bold;
}

宜しくお願い致します。m(__)m

Re: 呑兵衛あな 様へ

こんばんは。ご質問有難うございます。
A1、option部のスタイル設定は元々していないので、スタイルシートの一番下に下記を加えて下さい。

nav select option{
background-color:rgba(0,0,0,0.8);
}

A2、全記事一覧のコメント数表示カスタマイズは、「ここからは更新日が 20/03/28 以降の方も対象です。」以下を行って下さい。
Ctrlキー＋Fキーで [<%titlelist_category>] と入れて検索すると1ヵ所見付かります。
その後ろの</a>と</div>の間に記事のコードを入れて下さい。

貴殿ブログを拝見致しました。
コメントアイコンの表示カスタマイズをされたようですが、恐れ入りますが方法が間違っているようです。
https://sorauta1.blog.fc2.com/blog-entry-392.html
この記事の「'20/06/08 更新日以降のテンプレートにカスタマイズを加える場合は、②のみ追記して下さい。①と③は必要ありません。」と有るように、位置とURL無しの場合のアイコンが設定済みです。（①を行ったために❦マークまで端に表示されてしまっています。）
戻して頂けるようであれば改変部分を戻して頂き、②のJSのみ追加して下さい。
宜しくお願い致します。m(__)m

Re: 呑兵衛あな 様へ

こんにちは。お返事有難うございます。

いえいえこちらこそ、ご質問頂いた事で幾つかの『気付き』を頂きました。有難うございました。
テンプレートはDLしてもらっても、全ての方に利用して貰えるとは限りません。
自分用にカスタマイズして楽しんで頂く、そして気に入ったら使って頂く、それで良いと思っています。
どうぞお気になさらず、テンプレートの改変を楽しんで下さい。(^_^)

Re: 呑兵衛あな 様へ

当りを付けた所は正しいですが、他にも有ります。
.css-cancel と .css-cancel:before というclass名を探して下さい。
この部分はメニューが開いている時の×印部分です。

.css-cancel{
display:inline-block;
position:relative;
margin:3px 12px 0 20px;
padding:0;
width:2px; /* キャンセルボタン 線の太さ */
height:20px; /* キャンセルボタン 線の長さ */
background:#ccc; /* 線の色 */
transform:rotate(45deg);
}
.css-cancel:before{
display:block;
content:"";
position:absolute;
top:50%;
left:-9px; /* 左からの位置 */
width:20px; /* キャンセルボタン 線の長さ */
height:2px; /* キャンセルボタン 線の太さ */
margin-top:-1px; /* 上からの位置 */
background:#ccc; /* 線の色 */
}

どちらも /* 線の色 */ という部分を変更して下さい。m(__)m

Re: 呑兵衛あな 様へ

ゴメンナサイ。お返事遅れました。
はい。不具合が有ったら仰って下さいね。(^_^)