Top Page › Template › テンプレ修正等 › 「sunny_resp2-l(左メニュー)」の修正・更新致しました。21/04/28
2021-04-28 (Wed) 17:29

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

修正ばかりで申し訳ございません。m(__)m
sunny_resp2-l(左メニュー)のSP表示時に、ブログタイトル右側が空いてしまっているのを、本日修正致しました。
私が制作時、左右のpaddingを左メニュー用に設定し直すのを失念したためです。

大変申し訳ございません。
お手数ですが「sunny_resp2-l(左メニュー)」をご利用頂いている方は下記のように修正をお願い致します。

左メニューのみ修正

左画像のブログタイトル右側に有る緑色の部分を削除します。

[ 修正方法 ]

ご利用の「sunny_resp2-l(左メニュー)」テンプレート編集画面下段の「スタイルシート編集枠内」内に有る下記の部分を探します。
(Ctrlキー+Fキーで検索窓を開き、(max-width: 430px) と入れると1カ所見付かります。暗色スタイルページネーション修正を行っている場合は2カ所見付かりますが、h1#blog-name{ という部分が有る方を修正して下さい。暗色版CSSは 21/04/28 に修正済みです。)
その下に有るブログタイトル部分のCSSを変更して下さい。

h1#blog-name{
  margin:5px 0;
  padding:0 40px 0 0;
  font-size:1.3em;
}

↑これを下記のように変更↓

h1#blog-name{
  margin:5px 0;
  padding:0 0 0 40px;
  font-size:1.3em;
}

後は更新ボタンを押して適用して下さい。お手数をお掛け致します。m(__)m

Comments

No Subject

>(Ctrlキー+Fキーで検索窓を開き、(max-width: 430px) と入れると1カ所見付かります。)

との記述について
Q1.過日解説された、以下の「sunny_resp2c-l,r のカスタマイズ(暗色テンプレートに変更)」によれば
https://sorauta1.blog.fc2.com/blog-entry-452.html
(max-width: 430px)にてヒットするヵ所の記述が上記説明の記述と異なります...が、修正するべきでしょうか?

Q2.(max-width: 430px)で検索すると、広告事件に伴う修正説明の内容でもヒットし、計2ヵ所出ます。
>2) FC2ブログの広告が表示された際に、ページネーションが隠れてしまう不具合の修正。
https://sorauta1.blog.fc2.com/blog-entry-454.html
2021-04-29-10:12 呑兵衛あな
[ 返信 * 編集 ]
aki

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
2021-04-29-14:48 aki
[ 返信 * 編集 ]

Re: aki 様へ

>…ヒットする箇所のうち h1#blog-name{ という部分が padding:0 40px 0 0; となっていたら padding:0 0 0 40px; のように修正して下さい。

そのようにしました。
ありがとうございました
2021-04-29-14:59 呑兵衛あな
[ 返信 * 編集 ]

ハンバーグボタンの色

Q1.sunny_resp2c-l,r のメニュー用ハンバーグボタンの色を変えたいのですが、方法を教えてください。
理由は、FirefoxでDark Readerアドインを用いた場合に背景色と識別できなくなる為です。
Q2.ついでに伺います。
sunny_resp2c-l,r の横幅を変える事は(簡単に)出来るのでしょうか?
簡単ならば御教授願いたいのですが、思い付きですから当面は要りません。
理由は、私の視力では、左右に目玉を動かす事ができず、顔全体を振らなければ見られないので疲れるv-16
[ct_responsive3c]で十二分に満足していますので、いずれもスルーでもいいです。
2021-04-29-15:19 呑兵衛あな
[ 返信 * 編集 ]
aki

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
2021-04-30-01:12 aki
[ 返信 * 編集 ]

Re: aki 様へ

ありがとうございました。
特にハンバーガーボタンの色変更は「ct_responsive3c」でも応用してみたいと考えています。
「ct_responsive3c」は御提供いただいた暗色を利用しているので、パソコン・タブレット共にDark Readerアドインを用いた経験は無く状態を知らなかったのですが、本質問後にタブレットで試みたところ、私の視力では背景色と識別できないことがわかりましたので。
「sunny_resp2c-r」はパソコンでもハンバーガーボタンが表示されるタイプだったために気が付いたということですね。

私的にはハンバーガーボタンの色は大いに目立った方が良いと思っています。
そのへんは趣味の世界でしょうが。
私のネット友は「ハンバーガーボタンを押して、メニューを開いて...」という2アクションよりは、2カラムとか3カラムでメニューが出ている方が簡潔に脳ミソに伝わります。
私の場合も「ブログについているハンバーガーボタン」の意味する事を知りませんでした。最近のブラウザではハンバーガーボタンがついているのでなんとなく理解すると思いますが...ブログはやっていてもブラウザを弄らない年寄りも少なくないですよ。
そんな事から、目立つハンバーガーボタンのほうが「こりゃ何だ?」となりますのでベターとはと思ってます。
2021-04-30-08:36 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

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

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

プラグイン3は記事の上に表示(?)

教えてください。
『プラグイン3は記事の上に表示』することについて「sunny_resp2c-r」の機能を確認したいのですが。

ブログのTOPでは『プラグイン3は記事の上に表示』されますが、個別記事を表示させた場合は、コメント欄の下部に表示されます。

これは仕様でしょうか?
私が利用させていただいている「ct_responsive3c」では、個別記事を表示させた場合はコメント欄の下部に表示されませんので、素朴な疑問です。
PS:以前は『個別記事の下部に表示される』との但し書きがあったようにウロ覚えしていますが、いつの間にか『表示されなくなった』のでそれに馴染んでいましたが。
2021-05-02-13:13 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

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

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

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

<!-- 固定リンク画面の下段に表示 -->
<div class="menu3">
<!--プラグイン3-->
<!--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-->
<!--/プラグイン3-->
</div>
<!-- 固定リンク画面の下段に表示 ここまで -->

後は更新ボタンを押して下さい。m(__)m
2021-05-02-13:57 aki
[ 返信 * 編集 ]

Re: aki 様へ

お手数掛けました。ありがとうございます。
>ご自身で削除されたのではないかと思いますが…覚え有りませんか?
全然記憶にありません。ボケましたかね.涙

別件ですが、「sunny_resp2c-r」で記事タイトルを太字にしたいのですが、弄る場所を教えてください
2021-05-02-15:38 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

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

.entry_title h2 {
font-weight: bold;
}

宜しくお願い致します。m(__)m
2021-05-02-16:12 aki
[ 返信 * 編集 ]

Re: aki 様へ

教えてください。
Q1.私はブラグインでプルダウンメニューを使っていますが、そりが白抜きになってしまいます。
<select onchange="window.open(this.options[selectedIndex].value)" style="width:200px;">
<option value="">▼徘徊ブログリンク</option>
白抜きにならないようにする方法を教えてください。
Q2.「全記事一覧(Title list)にコメント数を表示」を適用させようと考えています。
https://sorauta1.blog.fc2.com/blog-entry-380.html
説明中に「更新日が 20/03/28 以前の方のみ下記を貼り換え」とありますが、「sunny_resp2c-r」の場合は無視してOKですか?
2021-05-02-16:45 呑兵衛あな
[ 返信 * 編集 ]
aki

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
2021-05-02-22:21 aki
[ 返信 * 編集 ]

Re: aki 様へ

ありがとうございました
完了しました。

質問の件に手を入れるよりも、
>コメントアイコンの表示カスタマイズをされたようですが、恐れ入りますが方法が間違っているようです。
の修正に手間取りました。
なんせ、常用している「ct_responsive3c」系が新旧ありますので.汗
「コメントアイコンの表示カスタマイズ」部分は「ct_responsive3c」の該当箇所付近からコピペした部分でしたので、某時期に曲がってそのままだったと思います。
今回併せて手を入れました。

PS.私なりに「serene_resp2c-r」を弄ってみましたが、やはり「ct_responsive3c」に戻ろうと思っています。
お手数を掛けましたが、恐縮です。
2021-05-03-09:12 呑兵衛あな
[ 返信 * 編集 ]
aki

Re: 呑兵衛あな 様へ

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

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






非公開コメント