03≪ 2020/04 ≫05
123456789101112131415161718192021222324252627282930
拙いテンプレートをご愛顧賜り、有難うございます。
本日、個別記事内にある追記開閉用のCSSを一部変更し、全テンプレートを修正・更新致しました。(同様の修正やカスタマイズを扱った記事も更新致しました。)
折り畳み追記の開閉
テンプレートの修正・更新致しました。5/14

この度の更新は、追記開閉に使っていたCSSの表示非表示に関わる部分に使っていた opacity を visibility に変更した点です。
opacity:0 は完全に透明にするもので、見えないだけでそこに有るものをクリック出来ます。
そのため、追記に内包されるものと位置によって、展開されていないのにカーソルがリンクを示すものに替わったり、カーソルが変わった所をクリックしてみたらリンク先に飛んだり、音楽が再生されたりする現象が起こります。
それは、折り畳み追記にリンクや動画、onclickのJS等が記述されていた場合、透明で見えなくなっていても存在しているために起こります。
visibility:hidden も見えなくなりますが、ブロックの大きさだけ存在して中は何もないように扱われます。
display:none では表示装飾を付ける事が難しいため、装飾が後に付けられるよう visibility:hidden を使う事に致しました。
(opacity を併せたり、CSS Transition、CSS Animation を使う事が出来ます。)
追記に文章や画像以外のものを掲載する想定を失念しておりました。大変申し訳ございませんでした。
追記を利用していて、コメント投稿欄やコメント表示部位に変な挙動が有る場合は、大変お手数ですが下記のように修正をお願い致します。


修正の内容は以下です。
テンプレートのスタイルシート編集枠内に有る下記の部分
該当箇所を見付ける場合は、PCのキーボードで『Ctrl+Fキー』を押して開いた窓に
/* 記事ページ追記ボタン */
を入れて検索します。
すると1ヵ所見付かりますので、その下12,3行目位に有る下記青文字部分オレンジ文字部分のように変更して下さい。

.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
opacity:0; /*中身を非表示にしておく */
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
opacity:1; /*クリックで中身表示 */
}

これを以下のように変更↓

.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
visibility:hidden; /*中身を非表示にしておく */
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
visibility:visible; /*クリックで中身表示 */
}

後は更新ボタンを押して適用して下さい。




Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等
* Comment : (1) * Trackback : (0) |

理解力が乏しいので * by 呑兵衛あな
確認の意味で教えてください。
本記事において、既存の利用者が自分で修正すべき事項は

>この度の更新は、追記開閉に使っていたCSSの表示非表示に関わる部分に使っていた opacity を visibility に変更した点です。

よりも下に書かれた事と理解しましたが、それでOKでしょうか?

PC/SPでGoogleChromeを利用したコメント投稿の際、ログイン投稿及び管理画面経由の投稿で、管理人判定がされず画像が出ない(コメント欄に画像が出る仕様のテンプレートの場合)症状が出ているようです。
ただ、(当方には症状が出ていないので)GoogleChromeを使った全数では無く、何かしらの条件が有りそうです。
情報などがございましたら、コメント等でお教え下さいませ。

今ほどFC2に問い合わせ致しました。
何かしらの報告が有りましたらこちらにてご連絡致します。
Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ閲覧障害等
* Comment : (16) * Trackback : (0) |

良かったですね~(笑) * by ぼっちん
akiさん、おはようございます ^^

そふぃあさんも、やぴこさんも喜んでらっしゃるご様子で、どうやら個別対応ではなくて、クロスドメイン間でのcookie受け渡しに完全対応してくれた模様ですね、運営さん(笑)

や~ 良かったですねぇ ^^

> サブドメインで今回の問題は関係無いのでしょうか?^^;

いえいえ、問題大有り(笑)でしたけど、今回の修正で「大丈夫になった筈」です(笑)

> 今回の件が解決したら、是非記事で解説をお願い致します!

それは、Akiraさんが真っ先に記事にしてくださると思いますよ~(笑)
私も説明下手なんですから~ (^_^; アハハ…

できました! * by やぴこ
akiさん、治ってます!
コメント欄ヒラヒラ舞いました~🌸

メニューバーリンクからもすんなり管理画面にいけました。

これが正常なんで当たり前なんでしょうけど、嬉しいですね♪

お気遣いご尽力いただき、感謝しております。ありがとうございました。
これからそふぃあさんとハグしてきます(*>ω<*)


PS.記念すべき80回目のコメントをakiさんへ捧げて参りました。


追記 * by そふぃあ
そうそう!謝り忘れて帰るところでした(汗)

コメント欄の件であれこれいじっていた時、未承認のままのコメントがあったことに気づいたのですが、何とそれがakiさんからいただいたコメントで……。
悪気も無かったですし、ちゃんとその時にコメント返しもしているのですが、ずっと無視していたみたいで申し訳なくて。
本当にごめんなさい。

こんなそそっかしい私ですが、今後ともよろしくお願いします。

解消しました! * by そふぃあ
akiさん、おはようございます。
今朝サポートからメールが届き、問題は「一応」解消しています。
いろいろとお気遣いいただき、ありがとうございました。

やはりYさんのブログにも同じ警告が出ているのですね!
以前からデベロッパーツールを使うと何か警告みたいなものがあるのを確認していましたが、素人過ぎて何のことか分からず(汗)
今後もChromeは次々に更新されていくでしょうから、FC2運営側で根本的な問題解決が行われること、願っています。

連日夜遅くまでがんばってくださり、本当にありがとうございました。
これからYさんのところで喜びを分かち合ってきます(笑)

Re: ぼっちん 様へ * by aki
こんばんは。また変な時間に返信してます。
先程やっとテンプレートの修正・更新記事をアップ致しました。(“ドリフ祭り”で判明した不具合修正の件です。)
文才が無いため、分かり易い言い回しが出来なくていつも時間が掛かってしまいます。^^;

The way ~でコメント拝見致しました。m(__)m
頂いたコメントと同じ文言が当テンプレユーザーのyさんのブログでも出ております。
Warningとでも言うのかな。3つ出ますよね。
> http://admin.blog.fc2.com/
> http://fc2.com/
> http://blog.fc2.com/
同じでした。

> SameSite属性がセットされていない模様ですね。
> つまりはhttps通信が行われていない(笑)
> これじゃcookie保持出来ないでしょうから、ログインやプロフィール画像表示に支障が出るんじゃないでしょうか?
>
> Chrome 80のSecure属性の影響かと思いますが、FC2運営さんの対応しかないと思います。

なるほど。だからChromeだけダメなのですね。
もう、運営さんにお任せするしか無いですが、是非とも早い対応をお願いしたいです。
ところで、ぼっちんさんの所で解説されている
『他社で取得した独自ドメインの、新規サブドメインを簡単にFC2ブログで活用出来るようになった』
の、サブドメインで今回の問題は関係無いのでしょうか?^^;

今回の件が解決したら、是非記事で解説をお願い致します!

Re: そふぃあ 様へ * by aki
お返事遅くなりました。m(__)m
The way ~でコメント拝見致しました。
Akiraさんも色々運営の方に連絡されておりますし、私の方でも分かる範囲の情報を連絡入れております。
もうFC2の運営でしか手が出せませんので、見守るしか無いですね…^^;
でも、一人では無く複数人が連絡する事によって、運営の方も重要案件と見なしてくれたでしょうから、きっと善処してくれるでしょう。
…と、そう願っております。(^_^)
そふぃあさんの素敵な写真と記事、楽しみにしておりますのでまた伺いますね♪

お邪魔します ^^ * by ぼっちん
akiさん、おはようございます。
夜中過ぎに、弊ブログへのコメントをありがとうございました ^^

この件、やはりChromeのキャッシュに関わりがありそうです。
一昨日からずっとChromeの様々な違和感をDevToolsで追っておりましたら、キャッシュ操作にそんな兆候が捉えられておりました。
今日、もし再現するようでしたら、スクショを撮ってみようと思います。

他ブラウザではそんな不具合は見られませんしね(笑)
FC2運営さんの裏仕事(笑)と相まって、事象が複雑になっている気がします ^^

■追記させて戴きます
キャッシュではなくて、cookieの誤りでした、すみませんです m(_ _)m
cookieの保持が変です (^^ゞポリポリ

■再度追記させて戴きます。
どうやら、独自ドメインに対するcookie対応が出来ていない様子です。
Akiraさんの記事にも報告させて戴きましたが

そふぃあさんブログ
https://dawn-clover.com/ での不具合は

A cookie associated with a cross-site resource at http://admin.blog.fc2.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

http://admin.blog.fc2.com/
http://fc2.com/
http://blog.fc2.com/

SameSite属性がセットされていない模様ですね。
つまりはhttps通信が行われていない(笑)
これじゃcookie保持出来ないでしょうから、ログインやプロフィール画像表示に支障が出るんじゃないでしょうか?

Chrome 80のSecure属性の影響かと思いますが、FC2運営さんの対応しかないと思います。
2020/04/03 16:40

Re: aki 様へ * by そふぃあ
おはようございます。
いろいろとお気遣いいただき、コメント下さって有難かったです。

私は当事者なので、せっせと運営側にも事情説明していますが、サポート側の問題であることやWebに詳しくないため、説明にも限界があります。
とにかく、自分でできることは全てやってダメなので、お返事待ちですね。

私のブログコメントは承認制、Yさんのブログコメントは認証キーを打ち込まないと公開されない設定になっていますが、どちらも管理人と認めてもらえていないわけなので、Google Chromeからコメント返しすると、管理人でも承認、認証キーの入力の作業が必要になるのも同じ症状でした。

こちらも併せてAkiraさんにも報告してみようと思います。(FC2サポートには画像付きで届け出済み)

連日、夜遅くまでお疲れ様でした。

Re: y様へ * by aki
ご連絡有難うございます。m(__)m
そちらにお伺い致しますね~。

管理人のみ閲覧できます * by -

いつもテンプレートをご愛顧頂き、有難うございます。
本日、ユーザー様よりご指摘の有った『バリデーションによるエラー』該当箇所の修正を行い、テンプレートの更新を致しました。
バリデーション(validation)とは、対象の記述内容が仕様や文法に照らして適合しているかを検証・確認することです。

W3C Markup Validation Service】 仕様を決めているw3cが提供する文法チェックツール。
Validator.nu (X)HTML5 Validator】 上記と同様のサービスです。

この度の修正は、上記のような文法チェックツールでテンプレートを検証した際に出てきた『エラー』を無くすためのものです。
…と、もう一つ。
トップページ要約表示に、記事内画像が無い場合の表示方法を少し変更しました。(またそこですか?という呆れるお声が聞こえそう…(-_-;))
テンプレートの更新日は2020/03/26が最新です。(スタイルシート上部に記述)


1) 文法チェックツールの『エラー』を無くす
2) トップページ要約表示に、記事内画像が無い場合の表示方法を少し変更




1) 文法チェックツールの『エラー』を無くす
当方が配布しているテンプレートの各画面(トップページ、個別記事、全記事一覧、月別・タグ・検索ページ)で表示された『エラー』です。改めまして…ユーザーの皆様申し訳ございません。m(__)m 検証は【W3C Markup Validation Service】を使用しました。

----------

その①:font element
warning4.gif
表示される(かもしれない)ページ[トップページ、個別記事、月別・タグ・検索ページ]
原因:コメントに、コメントツールバーを利用した文字色変更が有る。また、コメントリストによって表示されるコメント内に文字色変更が有る。

修正方法:このエラーは、FC2のコメントツールバーを使用すると<font color="色コード">~~</font>のように出力されるために出るものです。なので修正できません。
フォント要素(<font>)はHTML5で廃止されているためバリデーションでエラーが出ます。
コメント内に既に有る分は、自身のコメント以外(passが有る場合)編集不可なので我慢するしか有りません。
今後のコメントでエラーを出したくない場合は、文字色変更を使わないでと訪問者にお願いする(^^;・若しくは、いっその事コメントツールバーを外してしまうというのも方法です。

ct_responsive のカスタマイズ(コメント装飾・絵文字)
↑この記事の逆ですね。FC2がJavaScriptを修正しない限り、いつまでもこのエラーは出ます。
外す場合は、PCのキーボードで『Ctrl+Fキー』を押して開いた窓に↓を入れて検索します。

<script type="text/javascript" src="<%template_comment_js>"></script>

すると、2ヵ所(テンプレートによっては1ヵ所)見付かりますので、その文言を削除(末尾に<br>が有る場合はそれも一緒に削除)します。
後は『更新』ボタンを押して下さい。
warning5.gif
↑因みにこの警告は、FC2のコメントツールバーを表示している際の警告です。
コメントツールバーを設置しているだけで出る警告なので、これが嫌な場合はツールバーを外した方が良いです。

----------

その②:text-align: Parse Error
warning3.gif
表示されるページ[全記事一覧、月別・タグ・検索ページ]
原因:全記事一覧、月別・タグ・検索ページを制作する際、プラグイン3の表示スタイルを流用したため、プラグインのブロック内でのみ有効になる単変数がそのままになってしまった。

修正方法:PCのキーボードで『Ctrl+Fキー』を押して開いた窓に↓を入れて検索します。

style="text-align:<%plugin_third_talign>"

すると、3~6ヵ所(プラグイン3の部位2ヵ所、月別・タグ・検索ページ等)見付かるので、正しく使われている <!--プラグイン3--> の場所以外に有る上記の文を削除します。(残るのは、最終的に正しいプラグイン3の部分である2ヵ所になるはず。)

----------

その③:Attribute name not allowed 及び Duplicate ID(The fiest occurrence~)
上記画像の3から以下続く。
表示されるページ[一部のテンプレートの全記事一覧]
原因:全記事一覧とカテゴリー分け一覧を同一ページで(display:none)切り替える表示を試していて、IDが重複してしまった。未完でも見栄えは変わらなかったのでそのまま忘れて共有申請してしまった。(切り替え用のJavaScriptは不具合が有り搭載せず。)

その④:This document appears to be written in~ (警告)
warning1.gif
表示されるページ[全記事一覧]
原因:不明。当方のブログ、全記事一覧で表示された警告。使用言語が中国語とみなされているのは…何故?
考え得る可能性として、ページ内のひらがなやカタカナと漢字の出現比率とか?かも。
なので、この警告が出る(若しくは他の言語で出る)かどうかは、ブログの記事タイトル次第では無いかと推測します。…勿論、下記方法でも表示される場合も、出ない場合も有ります。
ただ、記事一覧自体は見易く整形しましたので、③④を解消する以外でも是非ご利用下さい。m(__)m

修正方法:全記事一覧ページ内のタイトルのみ表示では、日本語と判断するのに少ない文言なのかもしれないので、記事冒頭の20字を表示するよう単変数を追加し、バリデーションした時に起こる③④を解消するようHTMLを修正します。

修正方法:PCのキーボードで『Ctrl+Fキー』を押して開いた窓に↓を入れて検索します。

<!-- 全記事リスト開始 -->

すると、HTML編集枠内に1ヵ所有るので、そこから <!-- 全記事リスト終了 --> までの間を下記のHTMLに貼り換えて下さい。(テンプレート名をクリックで展開します。)











後は『更新』ボタンを押して完了です。
問題が無ければバリデーションで↓のように表示されます。
warning2.gif
…常に「こうなる」テンプレートを目指しております。m(__)m

お薦め記事

FC2ブログで消せないコメント関連W3Cバリデート警告

前記事に続いて、またまた W3Cバリデート の記事ですが、今回は、FC2ブログユーザー側では消せないWarning(警告)です(爆)

下図スクショがそのエラー表示ですが、今回のは Warning(警告) ですね。 Error(エラー)よりはマシでしょうか(爆) でも、これは実は、FC2ブログユーザー側ではいくら消そうとしても消せないエラーなんです。...


バリデーションチェックを簡単にする方法

FC2ブログのテンプレートを選択する時にW3Cバリデーションエラーになるものは避けましょう

最近筆者は「自分のブログのテンプレートくらいは自作してみたいな♪ 配布はともかくとして(笑)」と、音符♪が付くほどの気持ちでo(^-^)oワクワクと諸勉強を始めたんですよね(笑) 筆者あと1年半弱で古希になるこの歳に(爆)...







2) トップページ要約表示に、記事内画像が無い場合の表示方法を少し変更
この度の修正前テンプレートでは、画像無し記事のトップページ表示用代替画像に data URI を利用して、スタイルシートで非表示(display:none;)処理をしておりました。
要約表示時にサムネイル画像が無い場合の代替画像を data URI に変更。

[HTML]
<div class="left">
<a href="<%topentry_link>" title="<%topentry_title>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" alt="<%topentry_title>" onerror="this.src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';"></a>
</div>

[CSS]
.left img[src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="],
.left img[style*="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="]{
display:none; /* 要約表示時に画像が無い場合ダミー画像を非表示 */
}


これを下記のように変更致しました。
HTML編集枠内記述位置は、PCのキーボードで『Ctrl+Fキー』を押して開いた窓に↓を入れて検索します。

<div class="left">

すると、HTML編集枠内に1ヵ所有るので、その部位を変更します。

[HTML]
<div class="left">
<a href="<%topentry_link>"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" alt="<%topentry_title>"><!--body_img_none--><!--/body_img_none--><p class="mask"><span class="caption">Read More</span></p></a>
</div>

[CSS (変数を使うのでHTML内</head>の直前に記述)]
<style>.left img[style*="<%url>"]{display:none;}</style><!--object-fit(IE対策)-->
(このCSSをHTML内に追加する事で、CSS編集枠内に有る .left img[ の部分が不要になります。場所を限定した非表示処理なので、残したままでも問題ありませんが、画像遅延処理JS等の導入で不安な場合は削除して下さい。)
(要約表示タイプのアイキャッチ(サムネイル)画像については、簡易JSによって遅延処理をしております。)
[CSS (スタイルシート編集枠最下段に追加)]
.mask{
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
height:100%;
background:rgba(255,255,255,.5);
-webkit-transition:.3s;
transition:.3s;
opacity:0;
}
.mask .caption{
color:#222;
font-size:120%;
font-weight:normal;
line-height:140px;
}
.left:hover .mask{
opacity:1;
}

[CSS (youth_respのみこれも追加・暗色部分用)]
body.dark .mask{
background:rgba(0,0,0,.5);
-webkit-transition:.3s;
transition:.3s;
opacity:0;
}
body.dark .mask .caption{
color:#eee;
}


この度の更新で、要約表示のアイキャッチ画像hoverで『Read More』と出るようにしました。
不要の場合は、HTML上記ソースから
<p class="mask"><span class="caption">Read More</span></p>
を削除し、CSSの追加も不要です。

画像をトリミング表示出来る object-fit はChrome,Firefox,Safari,Operaではサポートしていますが、IE,(古い)Edgeには対応していません。
そのため、JSファイル『object-fit-images』を利用して対策をしているのですが、画像が無い場合 background-image にブログURLの入った空枠を作ってしまいます。
indexni-img.gif
ブログURLはご利用になる方によって異なるので、CSS内に個別のURLを指定した display:none; を付ける事が出来ないため、もし画像が表示されなかったら data URI を表示する、という形にし、その data URI をCSSで display:none; にするようにしていました。
ただ、これまでの方法のようにその都度『onerror="this.src='画像URL'』というJSを使うより、画像が無いなら
<!--body_img_none--><!--/body_img_none-->
というFC2の(非公開)変数を使って非表示にし、IEやEdgeの場合に吐き出す
background-image:url(ブログURL)
という空枠背景を非表示にするために、<head> 内に
<style>.left img[style*="<%url>"]{display:none;}</style>
として非表示にする事にしました。

この方法が良いのか悪いのか、当方は素人なのでよく分かりません。が、IE,Edgeでもエラー無く表示されておりますのでこの形に変更致しました。
(勿論、今迄のままでも不具合は有りませんので、この修正を無理に施す必要は有りません。)
もし、問題を見付けた・この方法は良くない・他に良い方法が有る、等ご意見がございましたら是非お声掛け下さいませ。

IE,Edgeはまだまだ利用者の方がいらっしゃいますので、何とか対応するようにしておりますが、ブラウザは出来るだけ新しい他のものに変更されることをお勧めします。
特にInternetExplorer(IE)は開発が既に終了しておりますので、早急に他のブラウザへ移行して頂けます様お願い致します。



Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等
* Comment : (10) * Trackback : (0) |

Re: s 様へ * by aki
コメント有難うございます。
そちらでお返事致しますね。(^-^)

管理人のみ閲覧できます * by -

Re: 呑兵衛あな 様へ * by aki
お返事有難うございます。
Title list のコメント数の所に有る💬は機種依存文字(環境依存文字)です。
画像じゃないので直ぐ表示出来ますし、文字なのでリクエスト負担も有りません。
機種依存文字が文字化けするのは、文字コードにShift-JISを使用した場合です。
テンプレートの文字コードはUTF-8なので、閲覧される方にも問題無く表示されますよ。
文字を入力する際に『ふきだし』と入れて変換して下さい。
宜しければ早速ご利用下さいませ。(^_^)
p.s. 返信は不要です。

Re: aki 様へ * by 呑兵衛あな
早速の対応をいただき、ありがとうございます。

Q1 については老眼鏡をかけ替えます(涙)

Q2 仰せの通りですね。
私としては、取り敢えずご指導いただいた位置に置いてみました。
カスタマイズ記事として掲載していただけたら、アイコンも含めてパクることにします(笑)

Re: 呑兵衛あな 様へ * by aki

Q1. ct_responsive3の要約表示で、画像の無い記事の場合、画像部分が欠落してしまう。
…スタイルシートを拝見させて頂きました。
一番下段に追加した『Read More』マスク部分のクラス名1ヵ所に( .ドット)が抜けています。そのためスタイルが反映していません。

mask{ ←ここのクラス名
position:absolute;
top:0;
~~~~
}

という部分を、

.mask{
position:absolute;
top:0;
~~~~
}

に直して下さい。それで画像部分が修正されるはずです。


Q2. 【 ありのごとくあつまりて 】にて説明されている >全記事一覧 に コメント件数 が表示できるようになっていた。
私的には以下のURLの様に入れてみましたが、ご興味を持たれて、配布テンプレートに組み込もうかという気に成っていただければ嬉しい
…タグを追加するのであればこの位置では無く、全記事リストの末尾</a>と</p>までの間が良いと思います。
(位置の見本はこのブログのTitle listをご覧下さい。)
私的に組み込まれるのは大歓迎です。ただ、テンプレートで…となるとコメントを受け付けていない方やコメント欄を開放していてもコメントの少ない方等にとってどうなのか…?と考えまして、当方テンプレートは標準で付けておりません。(ゼロがず~っと並ぶのも何だかなと。^^;)

なので、近いうちにカスタマイズ記事として掲載させて頂きますね。
有ったら良いなと思う方が利用出来るのが一番だと思うので。(^_^)

Re: b 様へ * by aki
コメント頂き有難うございます。m(__)m
そちらに伺ってお返事致しますね。

No Subject * by 呑兵衛あな
修正版を適用しました。
ありがとうございます。2点、お願いです。

Q1.以前も御教授いただいたのですが、修正する部分を説明して頂いた記事を失念してしまいました。当該記事を教えてください。
「内容」
ct_responsive3の要約表示で、画像の無い記事の場合、画像部分が欠落してしまう。
当該URL
https://nonn63400.blog.fc2.com/

Q2. 【 ありのごとくあつまりて 】にて説明されている
>全記事一覧 に コメント件数 が表示できるようになっていた。
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-162.html
を組み込みたい。
私的には以下のURLの様に入れてみましたが、ご興味を持たれて、配布テンプレートに組み込もうかという気に成っていただければ嬉しい。
https://nonn63400.blog.fc2.com/archives.html
PS、乗り気でなかったならその旨教えてください。自前で考えますので

管理人のみ閲覧できます * by -

Re: 徳川たぬこ 様へ * by aki
大変お待たせ致しました。

自身でもバリデート掛けていったら色々出てきてしまって…
久々の超大作修正・更新記事が完成しました。^^;
あんまり良い話では無いですね。お手数をお掛け致しました。
過去のものを使いまわすと、こういう弊害がある事も。肝に銘じます。
また何かお気付きが有りましたら教えて下さいね。

色々とお忙しいでしょうけども、お身体には気を付けて。 ^^) _旦~~

お疲れ様でした * by 徳川たぬこ
記事更新大変お疲れ様でした
お陰様でvalidエラーのないテンプレートが完成いたしました˖✧
ついでに憧れの“サムネイルにReadMore文字”もつけることができました
さすがです!˖✧
ありがとうございました(^^)

いつもテンプレートをご愛顧頂き、有難うございます。
本日、公式プラグイン『ユーザータグ』利用時の当方テンプレートでの表示崩れを修正するCSSの更新を致しました。

【修正済】公式プラグイン「タグ」の仕様変更について

不明点が多く「絶対」と言い切れず。そして私の日本語力の限界にもチャレンジだ!な記事でございます。うまく説明する自信がない… ( ̄∀ ̄;)...


崩れる原因は、当方がプラグインのユーザータグを利用していなかったための見落としで、表示の際のスタイルを付けていなかった事でした。
  • word-break:文の改行の仕方について指定
  • inline-block:表示形式を指定するプロパティ。幅と高さ,余白が持てるinline要素のようなもの

bodyタグに word-wrap: break-word; overflow-wrap: break-word; を付けているから大丈夫、と勝手に思っておりました。また、inline-block を指定していないために、タグ名の途中で改行・英数長文が途中で見切れる、という崩れがございました。
大変申し訳ございませんでした。

この度の修正では、ユーザータグのCSSを修正したのみです。本日以前にテンプレートをDLされた方でユーザータグをご利用の方は、下記のスタイルシート部分を修正・更新して頂きます様、宜しくお願い致します。

【修正方法】
テンプレート管理画面の [ テンプレート名 ] のスタイルシート編集 枠内の下記の文言を探します。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に /* タグリスト */ を入れて検索)

◇ youth_resp2c,3c (変更 淡色部・暗色部の2ヵ所)
枠内3/4位の位置
/* タグリスト */
.tag_list{
display:inline-block;
margin:20px 25px 5px;
padding:0 5px;
border:1px solid #999;
border-radius:3px;
font-size:0.8em;
}

↑を↓に変更
/* タグリスト */
.tag_list, .plugin-tag a{
word-break: break-all;
display: inline-block;
padding:0 5px;
border-radius:3px;
font-size:0.8em;
}
.tag_list{
margin:20px 25px 5px;
border:1px solid #999;
}
.plugin-tag a{
margin-bottom:3px;
border:1px solid #aaa;
}


枠内最下位置
/* タグリスト */
body.dark .tag_list{
border:1px solid #666;
}

↑を↓に変更
/* タグリスト */
body.dark .tag_list{
border:1px solid #666;
}
body.dark .plugin-tag a{
border:1px solid #555;
}




◇ genial_resp2c,3c (変更1ヵ所 ↓以下同)
serene_resp2c,3c
ct_responsive
al_responsive
candy-2c3c
green-2c3c
lace-al2,al3
lace-d2c,d3c
dt21_ryo3c,ryo_2c

枠内最下位置
(margin値が少し違う場合有り)
/* タグリスト */
.tag_list{
display:inline-block;
margin:20px 25px 5px;
padding:0 5px;
border:1px solid #999;
border-radius:3px;
font-size:0.8em;
}

↑を↓に変更
/* タグリスト */
.tag_list, .plugin-tag a{
word-break: break-all;
display: inline-block;
padding:0 5px;
border-radius:3px;
font-size:0.8em;
}
.tag_list{
margin:20px 25px 5px;
border:1px solid #999;
}
.plugin-tag a{
margin-bottom:3px;
border:1px solid #aaa;
}



後は更新ボタンを押して適用して下さい。
上記修正は『公式プラグイン ユーザータグ』本体の仕様変更に伴う構文エラーの修正を含みません。
プラグイン自体が構文エラーになっている可能性が有りますので、プラグイン・ユーザータグのHTMLもご確認下さいませ。

確認の方法、修正方法が詳しく上記 [ The other way round ] Akira様のブログカードリンク先に掲載されておりますので、確認のためにもご一読下さいませ。


【追記】 2020/03/26 構文エラーが解消されました。詳しくは下記をご覧下さい。

公式プラグイン「ユーザータグ」の構文エラーについて回答がありました

公式プラグイン「ユーザータグ」の新コードがhtml構文エラーですよ、という件への運営からの返信と共にhtml修正が入りました。...





Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等
* Comment : (6) * Trackback : (0) |

Re: 呑兵衛あな 様へ * by aki
パソコン画面でしたか。先にお伺いすればよかったですね。
当方は利用しておりませんでしたので、機会が有ったら確認致します。

> ということで、私から持ち掛けた話題なのに失礼なのですが、本件はこれで終わりにしたいと思います。
…お力になれず申し訳ございません。m(__)m

Re: aki 様へ * by 呑兵衛あな
たいへん御手数を掛けているようで恐縮しています。
私の環境で『InoReaderについて』が出ないことについてだすが
私はパソコンの ブラウザでしか見ていません。Firefox・Chrome・Chromium Edgeにもに『InoReaderについて』は出ませんし、当然先には進めませんでした。

20-03-23-13:27にてAndroid端末との事でしたので、Android 4.4.2タブレットを引っ張り出してアブリを入れてみました。これにより、おっしゃられる
>設定→Inoreaderについて→キャッシュをクリア
の画面は判りました。そして「キャッシュをクリア」を行いました(256Kb⇒0Kb)。結果として当初私が書きました20-03-22-10:16時点とまるっきり変わりなく
http://nonn634.blog.jp/archives/82466286.html
のように、表示されないファビコンが有ります。ですが、InoReaderは当人しか見ないアブリですから、気にしなければ気に成らないということですね。
ということで、私から持ち掛けた話題なのに失礼なのですが、本件はこれで終わりにしたいと思います。



Re: 呑兵衛あな 様へ * by aki
先般の導入機種はiPhoneでしたので、試しにAndroid端末にも新規で入れてみました。
…ファビコンは問題無く表示されています。

> 私の場合。設定の先「→Inoreaderについて」が見当たりませず、辿り着けませんでした。
…キャッシュクリアの場所ですが、アプリを開いた左上に『≡』のボタンが有るのでそれをタップ
→設定をタップ
→上部の濃いグレー横向きメニューに『InoReaderについて』という部位が有るのでそれをタップ
→開いた画面の下を見ていくと『アプリケーションキャッシュを消去する』と有るので『キャッシュをクリア』をタップ

これで出来ると思いますのでお試し下さいませ。

Re: aki 様へ * by 呑兵衛あな
>試しに当方も『Inoreader』入れてみました。

それは、たいへん手間を掛けていただき恐縮です。

>設定→Inoreaderについて→キャッシュをクリア

なるほど、やはり「キャッシュをクリア」機能があるんですね。
私の場合。設定の先「→Inoreaderについて」が見当たりませず、辿り着けませんでした。今朝も再確認したのですが...
一度「Inoreaderを退会して、再度レンタル」したみたのですが、Inoreader側にキャシュが残っているようで状況変化無しです。
本件、忘れてください。
お手数掛けたこと、感謝します。

Re: 呑兵衛あな 様へ * by aki
こんばんは。修正の件、お手を煩わせて申し訳ございません。
それと、検索のプラグイン表示致しました。^^;
先月共有化した『youth_resp2c,3c』テンプレで検索プラグインを標準表示させていたため、時節で桜テンプレに変更して(プラグイン表示を)忘れておりました。
申し訳ございません。m(__)m

ファビコンについてですが、検索しても無いです。掲載した記憶が無いので。(^^ゞ
貴殿のブログを拝見して、試しに当方も『Inoreader』入れてみました。

https://blog-imgs-141.fc2.com/s/o/r/sorauta1/inoreader.png

ファビコンは表示されております。
当方は新規導入で表示されておりますので、キャッシュの問題なのでは無いでしょうか?
設定→Inoreaderについて→キャッシュをクリア
…消して良いか悪いか不明ですが、どうでしょう?

No Subject * by 呑兵衛あな
毎度お世話様です。
修正しました。
ところで、検索プラグインを表示させていないようですが....出しておいていただけると助かります。

というのは、私過日、FC2のファビコン設定にで疑念が生じました。
>「feedly.com」には表示されるのだが、「inoreader.com」の場合は表示されないファビコンがある事に気が付いていた。
http://nonn634.blog.jp/archives/82466286.html

ということで、貴ブログでの記述説明が無いかしらんと思いましたところ、検索プラグインが表示されていないことに気が付いた次第です。

いつもご愛顧頂き、誠に有難うございます。
テンプレートや記事の文字サイズ変更方法について、今迄記事にしておりませんでした。
不案内なテンプレートで申し訳ございませんでした。m(__)m
カスタマイズをされる方にとっても必要な情報と思いますので、記事にさせて頂きます。


1) テンプレート全体の文字サイズ変更
2) 投稿画面で文字サイズを変更
3) 記事カラムまるごと文字サイズを変更



1) テンプレート全体の文字サイズ変更
先ず、テンプレート全体の文字サイズ変更についてです。
全体の文字サイズ
(クリックで大きく表示)
ブログ全体の文字を大きくしたい場合は、ご利用テンプレートのスタイルシート編集枠上段の
html{
font-size:
85%; という部分の数値を調整します。(小数点以下も可。)
テンプレートによって85%では無いものも有ります。その場合も html の font-size の数値を変更して下さい。

1emの大きさはブラウザーのfont-sizeのデフォルト値で、変更がなにも無ければ16pxです。
html{ の下に有る body{ に font-size:1em; と有りますが、html{ で(上記であれば)85%としているので、16pxの85%という大きさになります。html{ のfont-sizeを100%にすると、デフォルト値の16pxで表示されます。




2) 投稿画面で文字サイズを変更
文字のサイズを記事内で変更する場合は投稿画面で行います。大小色々変えたい場合はこちらをご利用下さい。
【注意】
投稿画面での文字サイズ設定は、テンプレート毎の基本文字サイズが指定されている場合、上手く反映しない場合が有ります。
当方テンプレートではデフォルトサイズより小さくなっておりますので、それに合わせて投稿画面で文字サイズ設定を致しますと、テンプレートを変更した場合に『大き過ぎ』たり『小さ過ぎ』たりする事が有ります。
入力モードでの文字サイズMediumは16pxですので、「テンプレートの文字が小さいな」と思われましたら、先ず(1)の基本文字サイズを100%にして表示をご確認下さいませ。


[参考数値 1em=16pxを100%とした場合]
フォントサイズ

投稿画面1
・ 通常の(旧)投稿画面。(クリックで大きく表示)
投稿画面2
ボタンを押すと選択した文字列にCSSが直書きされます。
変な文字列訳わからん、と仰る方は下記の入力方法をどうぞ。

・ 高機能テキストエディタを使った場合
投稿画面3
MS Wordのような画面です。でもこの『W』はWordでは無く WYSIWYGの事です。
WYSIWYGは「What You See Is What You Get」の略で、入力画面上で表示されている通りに表示する事ができます。

・ 新投稿画面の場合
投稿画面4
使うかどうか分からないようなボタンを排除し、使い易さを重視したシンプルな投稿画面で、こちらも『見たまま』表示です。




3) 記事カラムまるごと文字サイズを変更
いちいち記事を書く時にエディタで調整するのは面倒なので、まとめて記事表示部分の文字サイズを変更したい、という場合はスタイルシートを編集します。簡単に言うと「ヘッダーとメニューカラム以外」です。
…細かく言うと、ヘッダー部のブログタイトル・ブログの説明文、サイドに有るメニュー部分を除き、(設定していれば)トップページ及び個別記事のプラグイン3、個別記事ページの本文・コメント・トラックバック、カテゴリーや月別・全記事タイトルリスト等の文字は大きくなります。

元々(全体の文字サイズで指定しており)記事カラム部分の文字サイズは指定しておりませんので、一番簡単な方法として新たに文字サイズのスタイルを追加します。
この方法で有れば、テンプレートを他のものに変更しても(2)の注意事項を気にしなくて済みます。
ご利用テンプレートのスタイルシート編集枠最下段に、下記を追加して更新して下さい。

テンプレート名↓の場合は
youth_resp2,3c
genial_resp2c,3c
serene_resp2c,3c
ct_responsive
dt21_ryo,ryo_2c
candy-2c3c
green-2c3c

↓下記を最下段に追加(コピペ可)
.blog-con {
font-size: 1.2em; /* 記事の文字サイズはここを変える */
}


テンプレート名↓の場合は
al_responsive2c
↓下記を最下段に追加(コピペ可)
.con1,.menu3 {
font-size: 1.2em; /* 記事の文字サイズはここを変える */
}


テンプレート名↓の場合は
al_responsive3c
lace-d2c,d3c
lace-al2,al3

↓下記を最下段に追加(コピペ可)
.con2,.menu3 {
font-size: 1.2em; /* 記事の文字サイズはここを変える */
}


後は更新ボタンを押して頂ければ適用されます。
文字サイズの数値は小数点以下が指定できますので、見栄えの微調整が出来ます。
(閲覧されるブラウザの種類によっても解釈が異なりますが、第3位で切り捨て・四捨五入等が有るものを考慮して、小数点以下は第2位までの指定が無難…と思います。)



Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (8) * Trackback : (0) |

Re: k 様へ * by aki
お返事にいらして頂き、誠に有難うございます。m(__)m
一つご提案がございますので、そちらに伺わせて頂きますね。
(このコメントの返信は不要です。(^-^))

管理人のみ閲覧できます * by -

Re: b 様へ * by aki
お返事有難うございます。m(__)m
後出し報告が有るので、そちらに伺います~。

管理人のみ閲覧できます * by -

Re: b 様へ * by aki
コメント頂き有難うございます。

ちょっと良いもの(?)見付けましたので、そちらにお伺い致しますね~♪

管理人のみ閲覧できます * by -

Re: maccha2665 様へ * by aki
無事に適用できたようで何よりです。(^^)
他にもカスタマイズされていらっしゃり、暗色テーマもとても見易いですね。
また何かお気付きがございましたら、いつでもお声掛け下さいませ。

この度は素敵な出会いを有難うございました。(^-^)

No Subject * by maccha2665
早々と、年寄りにも丁寧によく分かるように解説下さり有難うございました。

拙いテンプレートをご利用の皆様、ご愛顧頂き誠に有難うございます。
youth_resp テンプレートに導入しております「ダークテーマ」を、(浅はかな考えで^^;)OS設定の「ダークモード」にも対応させようという記事です。
CSSは増えてしまいますが、メディアクエリを使って両方できるようにする方法ですので、良し悪しはともかく「こんな方法が有るよ」という『お目汚し程度』でご覧下さい。m(__)m
…記事と関係無いですがご報告まで。本日付のテンプレート更新は、誤字脱字の有ったコメントアウト部分を修正しただけなので、テンプレート本体に変更・更新は有りません。


1) ダークモードとは何?
2) OSの設定がダークモードの場合に表示するCSSメディアクエリ



1) ダークモードとは何?
簡単に言うと、OSレベルで設定可能な画面表示の暗色設定、です。

ダークモードとは何か?各OSの設定方法からiOS/Androidアプリの対応方法まで - Qiita

# はじめに
勉強会をご覧の皆さま
元々のテーマは「10分でわかるダークモード対応」でしたが、あちこち調べているうちにページ数が30を超えてしまい、「**10分ではわからないダークモード対応**」になりました🙇‍♂️
20分には...

↑こちらに詳しく出ておりますのでご覧下さいませ。
ダークモードは新しいOSのみの対応です。旧OSは対応しておりません。(上記サイト参考)
Windows 10 version 1903~
Mac OS Mojave(10.14)~
Android 10~
iOS 13~

ダークモード使ってますか? OS、アプリ別の設定方法がこちらです

これ肩こりも軽減されるかも。スマホやパソコンの見過ぎは目にも体にも良くない!と思いつつ、染み付いた習慣を変えるのはなかなか難しいものがあります。で...

↑OS、アプリ別の設定方法です。
(ダークモードとダークテーマの設定も書いて有ります。)




2) OSの設定がダークモードの場合に表示するCSSメディアクエリ
CSSのメディアクエリ『prefers-color-scheme: dark』を使用するだけで、OSのカラー設定がダークモードの場合にスタイルが適用されます。
[Can I Use] prefers-color-scheme
↑クリックで表示
『prefers-color-scheme: dark』は、新しいPCブラウザのサポートは既に済んでおり、SPブラウザはSafari for iOS, Android Browserなどで機能します。
使い方は、ダークモードで表示して欲しいスタイルを、上記のCSSメディアクエリで挟むだけです。

@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #eee;
}
}

youth_resp テンプレートの『切り替えダークテーマ』と同様に『OSダークモード』で表示したいスタイルをCSS内に(メディアクエリに挟んで)記述します。
ただ、『切り替えダークテーマ』の方は(切り替えるための)クラスが付いており、これをそのまま『OSダークモード』に使う事は出来ないので、クラスを外したものを用意する必要が有ります。また、『OSダークモード』適用中は切り替えボタンをクリックしても淡色になりません。
ボタンの切り替えができなくても、『OSダークモード』を利用している方は暗色での閲覧を希望されている訳ですので、用意するCSSにボタン表示は必要ありません。(故にボタンは非表示にします。)
CSSは増えてしまいますが、この方法で
  • OSダークモード』を設定されている方には『ダークモードCSS』で暗色に。(切り替えボタン無し)
  • 設定されていない方には切り替えボタンで『ダークテーマCSS』で暗色に。
の両方が適います。(^^)

もっと簡単な方法・綺麗で簡素なCSSで実現できるのでしょうが、当方の理解の範疇で出来るのはこの形なので、難しい事はご容赦を。m(__)m
追加するCSSを [Read More] に掲載致しましたので、youth_resp テンプレートをご利用で「使ってみたいな」と思われる方は是非どうぞ♪

youth_resp テンプレートのスタイルシート編集枠一番下に、下記をクリックして展開したCSSを全てコピーして貼り付けて下さい。
CSS自体は『切り替えダークテーマ』と同じものです。(淡色切り替えボタン無し)
トップ画像や色調変更する場合は、youth_resp のカスタマイズ(トップ画像変更)の記事のように、コメントアウトしている個所をご確認の上、該当部分を変更して下さい。
後は【更新】ボタンを押して完了です。
不具合が有った時のために、複製を作っておくことをお勧め致します。m(__)m





Return

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ
* Comment : (2) * Trackback : (0) |

Re: 呑兵衛あな 様へ * by aki
こんばんは。コメント有難うございます。m(__)m
思い付く事は色々有るのですが、素人なので綺麗にまとめる事が出来ません。
記事も、テンプレートも。^^;
ご興味有りましたら、お付き合い頂ければ幸いです。

p.s. 拍手より一言残して頂きたい…というのが本音です。(^^ゞ
(無理に強いては居りません。)

No Subject * by 呑兵衛あな
素晴らしい。
拍手だけして..と思いましたら、こちらは拍手ボタンを付けてないんですね。
それはそれとして、良いアイデアです。