attention admin about comments trackbacks you may also like

テンプレートカスタマイズをする方へバリデートのススメ

2020年03月18日
カスタマイズ
26
初心者向け Education トラブル対処 SEO

何度か啓蒙として記事にしています。なので再々々々々掲とかそんな感じ (´・ω・`)

「テンプレートをカスタマイズする」ということは、htmlやCSSの内容を 変更する ということですから十分注意しなければいけません。

特に html の方はほんの少しの記述ミスが 致命的なエラーを引き起こすことがあります ので、自身で行った変更にミスがないかどうか常にチェックされた方が良いと思います。

はじめに

大手ブログサービスの多くが CSSは編集できるがhtmlは編集不可 になっています。何故かというと、先に述べたように 致命的なミスを犯す可能性 が常にあるからなんですね。そのためhtmlはユーザーに触らせずに運営が管理する、というサービスがほとんど。

FC2ブログではその禁則がほぼ何もありません。htmlも変更できますしJSの追加なども開放されています。CSS(スタイルシート) というのは主に 装飾 を司るものですから、多少ミスをしても「文字色が反映されない」「文字のサイズ変更が機能していない」など視覚的な問題に留まりますが、htmlの方はそうはいきません。

htmlは ページの構造やページの各部位の持つ意味などを構成する器 です。ですからものすごく重要なんです。Googleなどの検索ロボットは htmlを頼りにみなさんのページを解釈しています ので、ここでミスをしてしまうと 正しい情報が伝えられなくなる 危険があります。情報が正しく伝わらなければ「何故かインデックスされない」「大量のエラー警告がGoogleから送られてくる(search console登録者)」など、良いことはひとつもありません。

テンプレートを編集したら必ずバリデートをする、ぐらいの覚悟をもってカスタマイズに挑む

ことをおすすめします。なんだかとっても難しく感じますが、要は

正規の方法でチェックを行い、修正できるものは修正を、できないあるいは理解できないものはテンプレート製作者に相談する

という考え方で良いと思います。製作者にヘルプを求める、というのもひとつの解決策です。ただし製作者によっては「カスタマイズ相談の受付不可」であったり、既にFC2ブログから離れている場合もあります。なのでここからは弊テンプレートに限った内容になります。

私の制作したテンプレートをご利用の方で、自力で解決できない困りごとなどがございましたら一度相談に訪れてください。その際はローカルルール

  • 自身のブログへのリンク記載必須
  • 問題のあるページがはっきりしている場合はそのページへのリンク記載
  • 該当テンプレート専用記事で質問をする(関係の無い記事や別のテンプレート専用記事で質問をしない)
  • 該当テンプレートを設定済みにし、問題のあるページを可視状態にしておく
  • テンプレートと無関係なプラグインの設置方法の指南を求めない

上記を守って頂ければ幸いです。

リンク必須は「現状の目視確認・ソースコードの目視確認」を行うためです。とにかく 目視確認を行う というのが解決への近道ですから、ブログのアドレスを伏せてのご質問は承れません。

該当ページへのリンクが必要なのは「すぐに作業に取りかかれるようにする」ためです。大量のページから問題該当ページを私が探し当てるということでは時間のロスが大きすぎます。

該当テンプレート専用記事で質問するのは「コメント欄を参考にしているユーザーへの配慮」でもあり(無関係な内容が紛れると混乱を招きます)、「記事内容の参照を容易にする」ためでもあります。

該当テンプレートを設定済にする必要があるのは「コメントを投稿したのはAテンプレートの専用記事、実際の質問対象テンプレートはBテンプレート」という勘違いが度々起こっているためです。対象テンプレートの特定とすり合わせのためにお願いしています。また、目視確認の意味においても非常に重要です。

「このプラグインを導入したいのでやり方を教えて下さい」など、テンプレートの仕様と無関係な某の指南を求める丸投げ質問はお断りしています。

弊テンプレート以外、他の製作者さんでも独自ルールを設けている方がいらっしゃると思います。それらは 意味と理由があってお願いしていること だと思いますので、個々のルールに従って質問して頂けると質疑応答も円滑にすすむかと思います。

htmlのミス, 構文エラーの影響

視覚的な悪影響が出る場合と、見た目には全く気づかない場合とがあります。仮にエラーであっても、目視しただけでは全然わからない、ということもあるんですね。そして寧ろその方がやっかいで致命的エラーであることが多いんです。

例えばページの根幹を担う head要素 という部位があります。この部位は原則「視覚に現れない情報」を左右していますので、見ただけではエラーが全くわからなかったり、わかりづらかったりします。ですがページ構成の基礎部分ですから 非常に重要な部位 です。

FC2ブロガーはhead要素のエラーが非常に多い

この記事を書いている理由でもあります。最も重要な部位が最もミスが多い部位。何故なら search consoleの登録アクセス解析の設置 などを行うのがこのhead要素だからです。そしてくどいようですがミスが有っても気づかない可能性が高い部位でもありますので、ミスを察知するにはバリデートが必要だ、ということですね。

バリデート方法

バリデート(validate) というのは 正確性を検証する ことです。検証動作(動詞)を「validate」検証(名詞)のことを「validation」検証済(形容詞)であれば「validated」で、これは英語なのでときに異なる表現が用いられますが同じことを指しています。

まず以下のボタンをマウスドラッグで ブラウザのブックマークバー へドロップします。

W3C validator

ブックマークレット登録することで、今見ているページを即座にバリデート可能。「なにかおかしいぞ?」と感じたときにすぐアクセスできて便利です。W3C というのはhtmlの規格制定を行う非営利団体です。現在では WHATWG というAppleやMozillaやMicrosoftといった開発組織が提唱する内容を策定していますので、実質はWHATWGの定めるものが「web標準」となるのですが、あくまでも勧告など公式なものはW3Cの名義で行われます。なのでW3Cの検証が「正規検証」と言って良いと思います。

上記は htmlバリデート なのでCSS内容のチェックはできません。

弊テンプレートでのバリデート

要約表示タイプテンプレートトップページ は完全valid(正確)ですから、チェックした際に表示されるのは以下のような内容です。

Document checking completed. No errors or warnings to show.
文書のチェックが完了しました。エラーや警告はありません。

と表示されています。つまりvalidである、という意味です。もしあなたがバリデートを行って、上記スクリーンショットの内容「以外」の表示になった場合には プラグインか自身で追加したhtml内容に必ず不正確な内容が存在しています。例えば以下のような感じ。

赤字でerrorと表示されていますよね。しょっちゅうバリデートをしていると大体すぐに見当がつきます。この場合は 要素が閉じていない(途中で中断されている) のを発端に以降の内容に次々と悪影響を及ぼし、全部で50あまりのエラー及び警告が出されています。たった一つのミスでの連鎖です。

で、この方は弊ブログの訪問者記録でお見かけした弊テンプレート利用者さんです。視覚的影響はどうかというと、このパターンは 悪影響あり で、ヘッダーが下に下がっています。ご本人が気づいているか、なんとなくうっすら「おかしい… かな?」ぐらいは感じているかもしれません。とはいえ見てすぐに「あっ!おかしい!」というほどでもありませんので、このまま放置する可能性大。視覚的ではなく構造的な悪影響については「head要素解釈の中断」が行われていると思います。要するにGoogleがこのブログの基本ページ構成(使用言語やサイト所有権確認など)の解釈を 放棄している 可能性ですね。比較的大きなミスですが、見た目にわかりづらいのでバリデートしなければ気づけないわけです。

要約表示タイプと全文表示タイプ

テンプレートでも 要約表示タイプ全文表示タイプ とで分けて考える必要があります。というのは、要約表示タイプの場合のトップページは製作者がほぼ全てを整形しますので、テンプレートユーザーが書いた記事内容・記事内で利用しているhtmlやCSSというのは 反映されません。つまり記事でミスを犯していたとしても要約表示の場合は影響しません。

一方、全文表示タイプの場合にはユーザーが記事内で犯したミスがトップページにも反映されますので、エラーが有ってもそのエラーが「テンプレートにある(テンプレートhtmlに追加した何か)」なのか「プラグイン」なのか「記事内容」なのか、原因の特定が難しいんですね。

要約の場合にはテンプレートは完全validですから(弊テンプレートの場合はです)、エラーが出れば「プラグイン」か「テンプレートに追加したhtml」で確定です。そしてプラグインは非表示にできますので、プラグインを全て非表示にしてもまだエラーが出るのであれば原因は「テンプレートhtml」ですし、プラグイン非表示でエラーが解消されれば原因は「プラグイン」です。プラグインを一つづつ順に表示させてその都度バリデートすれば「どのプラグインが原因か」まで特定できます。

原因が特定できればあとは修正。修正の仕方がわからない・修正部位をどうしても特定できない、という場合には弊ブログで質問をして頂く(弊テンプレート利用者のみ)という流れです。

ミスのワースト5

よく見かけるミスを挙げてみます。

ワースト順位 内容 原因
1 ヘッダーの隙間, ヘッダー余白の増大, ヘッダー位置下降 など head要素内に全角スペース混入 or FC2アクセス解析「ソーシャルタイプ」利用
* ソーシャルタイプを利用するとヘッダーに隙間が生じますので利用回避を
2 ナビゲーション縦幅増大 リンク追加(li要素)時に全角スペースでインデントを付けた
3 ある時点から以降が全て太字 b要素終了タグ </b> の欠損
4 表示されるべきものが表示されない a要素終了タグ </a> の欠損
5 SNSボタンの左横に黒点 多岐(記事内htmlのミス多し)

兎にも角にもまずは トップページ で検証を行ってください。それには 要約表示タイプ を用いるのが賢明です。まずは「テンプレート + プラグイン」の器を綺麗にして、それから「個別記事」を検証します。器をとにかく整えないと個別記事にテンプレートやプラグインのエラーまでが混じっていたら、初心者さんではもうどうして良いかわからなくなってしまいます。同じ理由で全文タイプでの検証は非常に困難になるでしょうから、全文愛用者だとしても一時的に要約の方を用いると良いと思います。弊テンプレート全文タイプも記事内容及びプラグインにさえミスがなければ完全validです。

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(26)

There are no comments yet.

-

2020/03/18 (Wed) 08:33

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2020/03/18 (Wed) 14:07
vanillaice (Akira)

To バリデートの件 内緒さん

こんにちは。
お返事不要とのことですがいくつか再確認の必要と私からのアドバイスもありますので返信させてくださいね。

> 以前からAkiraさんが画像は止めた方が良いと忠告していらしたのは承知していた〜

ちょっとこの発言をした記憶がないので何か誤解があったのではないかと思います。私自身は「記事には最低でも1点以上の画像を付けた方が良い」と推奨しています。

参考記事: これからはサムネイル設定必須の時代
https://vanillaice000.blog.fc2.com/blog-entry-567.html

あと、本記事でも私が言葉足らずで「FC2ブログでの不可避エラー」に関する情報掲載を怠っていました。後ほど追記しますのでご覧頂くか、以下の記事をご参照くださいね。

参考記事: FC2ブログ主要公式プラグインをHTML5 validに修正
https://vanillaice000.blog.fc2.com/blog-entry-814.html

FC2ブログでは「ユーザーではどうにもできないいくつかのエラーや警告」というのがあって

・関連記事リスト(画像つき) --- エラー, alt属性なし
・新着記事リスト(画像つき) --- エラー, alt属性なし
・コメント関連JS --- 警告, type属性記載不要 及び charset属性記載不要

などです。警告内容については無理に修正する必要が無いので容認するとして、関連記事と新着記事のリストのalt無しエラーについて解決するには、双方の内容をブログ個人設定やFC2プラグインに頼らず、テンプレートに修正事項を加えた上で直打ちすることなんですね。
で、それについては主に「製作者側のしごと」になります。私の最近のテンプレートでは新着記事リストはデフォルトでテンプレートに記載し、プラグインの非表示化をおすすめしています。
関連記事リストの方は個人設定の変更が必須になり、個人設定を利用している場合にはテンプレートのデフォルトhtmlが無視されて負担がかかるだけなので敢えて導入していません。時折「ブログ限定配布・上級者向け」というのを提供することがありますが、それらは関連記事リストもテンプレートに直打ちしてバリデートエラーを防いでいます。ブログ限定配布の場合は必ず当ブログからDLすることになりますので、説明文を「しっかり読んでいる」という前提ができるのでそういうことが可能なんですね。

-----
内緒さんが現時点で修正可能なのは、参考記事に記載している内容(プラグイン内容の修正)と、掲載する画像にしっかりとalt属性を書く ことです。
FC2投稿画面のツールを利用している場合、通常の画像にはalt属性が自動でつきます(拡張子を含めたファイル名が自動でaltになります)が、絵文字には付きません ので軒並みエラー対象になってしまいます。なので絵文字を掲載したら末尾に
alt=""
と入れておくと良いですね。ただそこまでする必要は個人的には無いと思います。どのみち不可避エラーが存在するのですから、絵文字程度にやきもきする必要は無いというか(笑)

記事内に掲載する画像で「文章と関連がある」「記事内容と深い関わりがある」というものについてはalt属性を適切な内容にしっかりと書き換えてください。SEO対策にも有効です。

-----
内緒さんのトップページを拝見して、修正必須と思われるエラーはサイドメニュー部「今月の人気記事〜」の冒頭部位
</br><div class="plugin-freearea
と、「〜共犯者の目的」のすぐ後ろの
</a></li></ol></div></br></div>
それぞれ赤字部位の削除。こちらは構文エラーです。これ以外クリティカルなエラーはありませんので、画像のaltに目を瞑れば比較的「綺麗に書けている」と言って良いと思いますよ。

こん

2020/03/18 (Wed) 15:02

早速ありがとうございます!

Akiraさん、んも~感激です~( ;∀;)。
ちょうど今、自分に喝を入れてせっせと確認していたところでした。

コメントのお知らせ機能は便利ですね~(^_-)。
ビックリして飛んできました(爆。

まず画像に関しては私の完全な思い違いだったようです。
いつの間にかフラッシュの話と(自分の中で)混ざっていたかもしれませんm(__)m。

画像の「alt」は、以前はポップアップがでていたことから、
記事には書けないぼやきなどを入れるのに重宝していて、
ポップアップが出なくなった今でも何かしら入力はしています。

>絵文字を掲載したら末尾にalt=""
>と入れておくと良いですね。ただそこまでする必要は個人的には無いと思います。

そう言っていただいてホッとしました~ものすごい数です(爆。

またプラグインを確認していて、ご教示いただいたように
FC2のプラグイン(カウンターなど)は自分では直せないことが分かりました。

これに加えて以前教えていただいたplug-in(親子カテゴリ)についても再度見直しいたしました。

それでよ~やくAkiraさんが指摘してらした「バリデートが気になる方は~~」の意味を理解し(爆、
遅まきながらスタイルシートにご指示いただいた「style」の部分を移動したところです。
いや~分かると嬉しいですね、ってまだまだありんこの歩みですけれど(苦笑。

こんなことでもどなたかの参考になるかもしれませんので、
今回は勇気を出して鍵を外しまするね(笑。

お忙しいところ丁寧に教えてくださって、いつも本当にありがとうございます。
ただただ感謝の気持ちでいっぱいですm(__)m。

こん

2020/03/18 (Wed) 15:47

自分で書いてました(汗

Akiraさん、たびたびすみませんm(__)m。

先ほど</br>については自分では書いていないと申し上げましたが、
「HTMLの編集」のところで書き加えていたことをすっかり失念していました(汗。
これまた私の勘違いです~もうそそっかしくて本当にお恥ずかしいです(苦笑。

しかも長々と書いたので、上からは削除させていただきました~。
まだお読みになっていなかったなら、これは無視してくださいませねm(__)m。

Akira

2020/03/18 (Wed) 18:09
vanillaice (Akira)

To こんさん

完璧にしようとまで考える必要は無いんですが、できる限り綺麗にしておくことで大きな障害が生じたときに対処しやすくなりますね。エラーや警告が50も60も出てきたら放り出したくなるけれども、5〜6程度であれば見ただけで放棄、なんてことにはならないと思うので(笑)

個人設定で「画像の枠設定 > 何もせずに挿入」にしておくと
The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
(ボーダー属性は廃止です。代わりにCSSで指定しましょう)
の警告をなくすことができます。border="0" の指定が無くとも画像周りに枠線が表示されることはありませんので元々不要な指定です。

公開コメントのご配慮もありがとうございます。
お疲れ様でした :)

こん

2020/03/18 (Wed) 18:55

画像の枠設定ですか!

Akiraさん、たびたびお邪魔いたしますm(__)m。

「画像の枠設定」ですか~今初めて知りました。
Akiraさんのブログを拝見するようになる前は、
FC2さんのお知らせは、自分に分かることしか読んでいなかったですからね~(苦笑。
ご親切に教えて頂きまして本当にありがとうございました!

今後ともどうぞよろしくご指導くださいますよう心よりお願い申し上げます。

深緑の女魔術師

2020/03/18 (Wed) 19:06

耳が痛い話・・・機会の提供ありです。

深緑の女魔術師です。

デザインが最低限あれば大丈夫っしょ??

というマイルールで
適当にいじってたツケの清算ってことで、
バリデートしてエラーでまくりで感謝です。

JavaScript 関連は記述が古かったりで、
修正するいい機会が出来たので真面目に感謝です。

全般的にやっつけで直しちゃったので、
それでよかった不明ですけどね。

以上です。

Akira

2020/03/18 (Wed) 22:54
vanillaice (Akira)

To こんさん

こんばんは ('0')/
はい。画像の枠設定はバリデーションを気にかけるユーザーのリクエストが通過した形で実装されました。いちいち消す手間が無く便利だと思います(笑)

こちらこそよろしくおねがいします。お疲れ様でした :)

Akira

2020/03/18 (Wed) 23:00
vanillaice (Akira)

To 深緑の女魔術師さん

こんばんは ('0')/
htmlエラーの場合は必ずしもレイアウトやデザインに影響が出るというわけではないので、気づかず長年そのまま、という方も多いです。

> JavaScript 関連は記述が古かったりで〜

ブログ村やカウンターやなんでもそうですが、コードを取得してテンプレートに掲載する設置方式の JSコード は、html5テンプレートだと確信が持てるときは

×
<script type='text/javascript' charset="UTF-8" src="xxx"></script>


<script src="xxx"></script>

こうしてtype属性とcharset属性は削除して構いません。type属性の初期値はtext/javascriptなので書く必要が無いんですね。なのでバリデート時には「わかりきっていることを何故わざわざ書いてファイルサイズを増やすのだ」という警告が出ます。
charset属性の方は既に廃止されていますし、テンプレート全体でUTF-8の指定が行われていますので書く必要はありません。
この点を修正されるとさらに綺麗に管理できますよ。FC2ブログのコメント関連JSのようにサーバーサイドで自動的に吐き出されるものはどうにもできませんが、手打ちするコードであれば修正可能ですからお試しください。
お疲れ様です :)

こん

2020/03/19 (Thu) 07:19

これは違反でしょうか?

Akiraさん、おはようございます。
朝早くからまた押しかけてすみませんm(__)m。

今朝起きがけにふと
Akiraさんがおっしゃるところの「サーバーサイドで自動的に吐き出されるもの」
のうち、プラグインなら「フリーエリア」が使えるのではないかと思い立ってちと試してみました。

つまり「公式プラグイン」のたとえば「カウンター」なら、
フリーエリアにそのHTMLを丸ごとコピーした後なら、変更が可能なのではないかと。

やってみたらできちゃったみたいです~また勘違いじゃないといいんですが(苦笑。

これって規約違反とかになりますでしょうかね。
そうでなければ嬉しいのですけど。

Akira

2020/03/19 (Thu) 12:07
vanillaice (Akira)

To こんさん

こんにちは ('0')/
違反とはならないと思います。第三サービスの方が利用する場合はコードのコピペで行うわけで、FC2ブロガーの場合は「プラグインにしたから簡単に使えるよ」というだけです。

恐らくimg要素へのalt属性追加の対処をされたと思いますので、ついでにscript要素のcharset属性, type属性の取り除きをしておくと警告を減らせます。
<script type="text/javascript" charset="UTF-8" src=""></scriipt>

<script src=""></script>
と修正しておくと良いですね。

-----
ひとつ気づいたんですが、twitterウィジェットのコードが間違っていないでしょうか。

<a class="twitter-timeline" href="https://twitter.com/xxx" data-widget-id="xxxx" width="200">
赤字部位、a要素にwidth属性をつけることはできませんので構文エラーです。一度ご確認くださいね。

こん

2020/03/19 (Thu) 12:52

バリデーターは健康診断(笑

Akiraさん、早速のお返事をありがとうございました!

お~カウンターはこれで大丈夫そうですね。

>恐らくimg要素へのalt属性追加の対処

そうなんですよ~全部は無理でも目に付くところ
(トップページの定型文とか)だけでも直そうかと取り組みを始めました。

それでですね、またまた初心者質問でお恥ずかしいすが、「alt=""」を追加する際、

<img src="//static.fc2.com/image/v/280.gif" class="emoji" style="border:none;" alt="XXX"/>

で良いでしょうか?最後の/の前に半角スペースは必要ですか?
バリデーターではエラーになっていなかったのですけど、ちょっと心配になって、
この際図々しくお尋ねしてみましたvv。

Twitterのウィジェットは、実は昨日もエラーに気づいてはいたのですが、
いったいどこから拾ってきたのか思い出せず、放置していました。も~ダメですね~苦笑。

今改めて入れなおしたところです。今度は大丈夫そうです。

そこにももれなく<script type="text/javascript" charset="UTF-8" src=""></scriipt>
が付いてきたので、早速ご教示いただいた通り削除しました(^^)/。
他のところもおいおい修正していきますね~。

少しずつでも綺麗になっていくと思うと本当に嬉しいです~。
実は大分前になりますが、何かの拍子にチェックしたことがあったのですけど、
あまりのエラー数に圧倒されて諦めたことがありました(爆。

これからもAkiraさんのご指導の下、
定期的な健診を欠かさないようにしていきたいです(笑。ありがとうございました^^。

Akira

2020/03/20 (Fri) 00:29
vanillaice (Akira)

To こんさん

こんばんは ('0')/
絵文字のaltのことですよね。たぶん。

まずhtml構文は
<img src="絵文字画像アドレス" class="emoji" alt="">
これで良いですよ。

style="border: none;"
は本来は不要(何も書かなくともborderは付かない)ですが、FC2のエディターが勝手に吐き出しますのでいちいち取り除く必要も無いかと思います。あとホントは border: none でなく border: 0 の方が確実なんですけどね(これはFC2運営に向けてです)
* none = border-style, 0 = border-width

altの内容は絵文字ですから私なら
alt=""
こうして空にしておきます。
alt
だけでもOKです。

×
<img src="xxx">

<img src="xxx" alt>
または
<img src="xxx" alt="">

alt属性なしはダメですがaltの空はOKで、「特に重要な意味は持たない画像」として扱われます。スクリーンリーダー(視覚障害をお持ちの方などへの読み上げ機能)で読み上げ対象にしたい場合は「笑顔」「泣き顔」「スプーン」とか、絵文字が何を表しているのか書いてください。

末尾のスラッシュはhtmlでは不要です。これが必要なのはxhtmlやxmlであってhtmlでは必要ありませんが付けておいても問題ありません。ちなみにxmlではスラッシュ前に半角スペースが有ってもなくてもどちらでも良くて、xhtmlは半角スペースありが推奨です。

頑張ってたくさん修正されたんですね。お疲れ様です :)

こん

2020/03/20 (Fri) 07:15

ありがとうございました!

Akiraさん、こんにちは~。

も~またまた感激です。
私が疑問に思っていた(でもうまく言葉にできなかったvv)ことを
すべて理解し、私が納得できるように説明してくださるなんて(泣。

実は昨日も直しながら、これでええんかな~などと不安でしたが、
おかげさまでようやく自信をもって修正に臨めそうです(笑。

お忙しい中、本当にお手数をおかけいたしました。
ありがとうございました!

Akira

2020/03/20 (Fri) 15:12
vanillaice (Akira)

To こんさん

こんさん、こんにちは ('0')/
また何かあればお気軽にどうぞ。お疲れ様でした :)

hige

2020/03/21 (Sat) 14:41

alt 属性の値

いつもお世話になっています。

ひとつお教え下さい。

alt="" を = 以降を省略して、alt だけでもいいとのこと。初めて知りました。
で、疑ってる訳ではないのですが、W3C Markup Validation Service
https://validator.w3.org/
でテストしてもエラーになりませんでした。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>AltAtrTest.html</title>
</head>
<body>
<img src="https://blog-imgs-138.fc2.com/b/l/g/blgid1974/20200318002.jpg" alt style="width: 700px; height: auto;">
</body>

ところがですね、このことをネットで検索しても、解説しているサイトは今のところ一ヵ所も見つけられませんでした。

どこかに出典なりがあれば後学の為教えていただけませんでしょうか。
おわかりでしたらで結構です。又、お暇な時にでも。

Akira

2020/03/21 (Sat) 16:38
vanillaice (Akira)

To higeさん

higeさん、こんにちは ('0')/
出典は私も探せません(笑) 申し訳ない ^^;

「htmlで省略できるけど意外と知られていないもの」に含まれるのではないかと思います。


alt=""
alt


disabled="disabled"
disabled


async="async"
async

-----
空の値が認められている、属性名と値が同じ、という場合はほぼ省略可能ですYO (o'ω')ノ

hige

2020/03/21 (Sat) 16:57

ありがとうございます

お忙しい所をすいません。

色々あるのですねぇ。
なんか慣例のようなものが残ってるんでしょうねぇ。

hige

2020/03/21 (Sat) 19:57

teratail で聞いてみました

あんまり気になるので
teratail で質問(https://teratail.com/questions/248528?whotofollow=)したら早速回答がいただけました。
HTML5の規格の翻訳ページ:
https://momdo.github.io/html/introduction.html#a-quick-introduction-to-html
の、「属性は…」の所に、確かに

属性は開始タグの内部に置かれ、"="文字で区切られた名前と値で構成される。属性値がASCII空白文字または任意の" ' ` = < >を含まない場合、属性値は引用符で囲まないままにできる。そうでなければ、単一引用符または二重引用符のいずれかを使用して、引用符で囲む必要がある。値が空文字列の場合、"="文字とともに値を完全に省略できる。

と云う記事がありました。

ご報告まで。

Akira

2020/03/21 (Sat) 20:54
vanillaice (Akira)

To higeさん

慣例というよりもルールですね。省略できるものは省略する、というのが本来というか。例えばGoogleもそう推奨しています。余計なものを書いて欲しくない、というのが本音だと思います(笑)

ただ「これは省略できるからxの書き方、これはできないからyの書き方」と覚えるよりも
「全てyの書き方」とする方が容易です。今回で言うと

属性="値"

この書き方ですよね。書き方を揃えるとミスも減ります。なのでどちらが良いかはときと場合によると思います。

Akira

2020/03/21 (Sat) 21:04
vanillaice (Akira)

To higeさん

そうだったんですね。さっきお返事しちゃった(笑)
higeさん、私やっぱり管理画面返信辛いです。話の流れを掴みづらい (´;ェ;`)
でも頑張ります。だからせめてデフォルト記載内容のカスタマイズだけでもさせてほしい (;ωq`)
でもリクエストしてもきっと「見送り」(笑)

hige

2020/03/21 (Sat) 21:10

To Akiraさん

ルールがあったんですね。
でも、Akira氏がおっしゃるようにどの様な場合でもはずれにならない記述 CSS の最後の ; は不要でも書く とか。は納得できます。

でも teratail の今回回答してくれた方の返答の仕方、ちょっとむかつきました。と愚痴を。

意識高い系の人の見下した言い方

まぁ、この方はすごい回答者なので実は尊敬しているのです。

ですが、思いっきり嫌みを書いてきました。悪い性格です。

また、叩かれるんでしょうねぇ。年寄りは自尊心がむやみに高いのが欠点です。

又々、お聞き流しを。

Akira

2020/03/21 (Sat) 21:14
vanillaice (Akira)

To higeさん

私思うんですけど、日本のQ&A回答者の方が欧米のそれよりも手厳しい気がしています。ただ私の場合日本語のニュアンスを勘違いすることもあるのでアレだけれど ^^;

htmlやCSSを知っていても「偉い」ということは全く無いです。曲がりなりにもそれをやってる私が言うのだから間違いない(笑)

hige

2020/03/21 (Sat) 21:28

To Akiraさん

いやいや Akira氏は なかなか出来たお方だと 好感 一杯です。

hige

2020/03/21 (Sat) 21:32

追記

頑張って管理画面から書かれる必要はないと思うんですが
どうなんでしょう

自分が書き込んだ他ブログへのコメントが見れるのは一前進で、こちらは気になって確認に行くと思うのですがねぇ。

Akira

2020/03/22 (Sun) 11:01
vanillaice (Akira)

To higeさん

higeさん、こんにちは ('0')/
どうだろー ( ̄∀ ̄;)FC2ブロガーさんが今回の新機能を「すごく便利!」と思うか「別に今までで良い」と思うかによるのかなぁ。
私的にはたぶん便利なんじゃないかなと思うのでなるべくそうしたい。けどついていけるか不安(笑)

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧