Top Page › Template › テンプレ修正等 › テンプレートの修正・更新致しました。20/03/28

2020 · 03 · 28 (Sat) 19:39

テンプレートの修正・更新致しました。20/03/28

いつもテンプレートをご愛顧頂き、有難うございます。
本日、ユーザー様よりご指摘の有った『バリデーションによるエラー』該当箇所の修正を行い、テンプレートの更新を致しました。
バリデーション(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>
若しくは
<script src="<%template_comment_js>"></script>

すると、2ヵ所(テンプレートによっては1ヵ所)見付かりますので、その文言を削除(末尾に<br>が有る場合はそれも一緒に削除)します。
後は『更新』ボタンを押して下さい。
warning5.gif
↑因みにこの警告は、FC2のコメントツールバーを表示している際の警告です。
コメントツールバーを設置しているだけで出る警告なので、これが嫌な場合はツールバーを外した方が良いです。
また、コメントツールバーを残す場合で検索した際のJSに type="text/javascript" が付いていたら削除して下さい。(HTML5ではtype属性の指定を省略できるので、Warningを一つ消す事が出来ます。)


----------

その②: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;
position:absolute;
top:50%;
left:50%;
width:100%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.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)は開発が既に終了しておりますので、早急に他のブラウザへ移行して頂けます様お願い致します。



[Tag] * 修正・更新

Comments

お疲れ様でした

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

aki Re: 徳川たぬこ 様へ

大変お待たせ致しました。

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

色々とお忙しいでしょうけども、お身体には気を付けて。 ^^) _旦~~
2020-03-28-21:31
aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-03-29-07:39
[ 返信 * 編集 ]

No Subject

修正版を適用しました。
ありがとうございます。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、乗り気でなかったならその旨教えてください。自前で考えますので
2020-03-29-11:47
呑兵衛あな [ 返信 * 編集 ]

aki Re: b 様へ

コメント頂き有難うございます。m(__)m
そちらに伺ってお返事致しますね。
2020-03-29-16:15
aki [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ


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

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

という部分を、

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

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


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

なので、近いうちにカスタマイズ記事として掲載させて頂きますね。
有ったら良いなと思う方が利用出来るのが一番だと思うので。(^_^)
2020-03-29-16:44
aki [ 返信 * 編集 ]

Re: aki 様へ

早速の対応をいただき、ありがとうございます。

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

Q2 仰せの通りですね。
私としては、取り敢えずご指導いただいた位置に置いてみました。
カスタマイズ記事として掲載していただけたら、アイコンも含めてパクることにします(笑)
2020-03-29-17:31
呑兵衛あな [ 返信 * 編集 ]

aki Re: 呑兵衛あな 様へ

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

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-03-30-00:33
[ 返信 * 編集 ]

aki Re: s 様へ

コメント有難うございます。
そちらでお返事致しますね。(^-^)
2020-03-30-16:32
aki [ 返信 * 編集 ]






非公開コメント