ブログ作成に役立つブックマークレット

2018年10月01日
カスタマイズ
10
Education Bookmarklet 初心者向け

FC2ブログで記事を書く際に 役立つかもしれない、という条件付きです。
特に 旧投稿画面を利用し、htmlを使うことが多い 方向けです。

他の方が製作したものについてはここでの二次配布は致しません。ご紹介するだけです。
リンクを掲載しますので直接赴き、提供者様の規約・ルールに則ってご利用ください。

htmlバリデート系

htmlの正当性を検証するためのツールです。

HTML終了タグチェッカー

【 HTML終了タグチェッカー 】改訂版の再配布を致します

弊ブログのこの記事 ↓ を発端にして、FC2ブログを「HTMLタグのみ」の改行設定で記事を書くブロガーさん達が増えつつあります。 最近の筆者の趣味は皆さんのブログ記事のHTMLソースを読むことです(笑) - 初級パソコン術最近の筆者の趣味は、皆さんのブログ記事のHTMLソースを読む(覗く)ことなんですよね~(笑)...

開始タグと終了タグの「数」が合っているかどうかの整合性をチェックできます。

例) 開始タグと終了タグの数が正しい

<p>
  <span style="color: red;">あいうえお</span>
</p>

例) 開始タグと終了タグの数が不整合

<p>
  <span style="color: red;">あいうえお
</p>

注意点

html5では終了タグ省略可能なものがいくつかあります。
li要素についてはカウントしないように調整してくださっていますが、その他 </p> </tr> </td> など、文法的には省略が正しくともエラーの指摘を受けてしまいます。
html初心者の自覚がある方は 省略可能であっても終了タグを書く ことをおすすめします。

W3C validation

javascript:var a%3d'https://validator.w3.org/nu/%3Fshowsource%3dyes%26doc%3d';var b%3dencodeURIComponent(window.location.href);var w%3dwindow.open(a+b,'_blank','width%3d800,height%3d500');void(0);

以前は掲載したリンク部位をドラッグ&ドロップでブックマークバーに持っていくだけで登録できたのですが、あるバージョンからは無効になっている方もいらっしゃると思います。
セキュリティの関係だと思いますので、新規ブックマーク作成から適切な名称をつけ、URLの部位にコピペで登録してください。

htmlタグチェッカーは開始タグと終了タグの「数」をチェックするツールです。
こちらのW3C validatorはページ全体のhtmlの正当性を検査しますので、開始及び終了タグの「数合わせ」だけではなく「位置」についても検証できます。
検証内容の説明は以下のリンク先でざっと説明しています。

W3C validatorのエラーの説明

html構文をチェックすることができる W3C validator W3Cというのはweb技術の標準化を制定する非営利団体で、日本では慶應義塾大学がホストを担っています。その団体が提供しているのがW3C validatorというツールです。 構文チェックは他にもLintなどがありますが、個人的にLintは信用していませんのでここでは紹介しません(笑) 実際に検証を行ってみると様々な指摘を受けることがあります。...

ページスピード測定ツール系

ページ表示スピード改善の提案などを調べるツールです。

GTmetrixに即アクセス

javascript:(function()%7Bwindow.open(%27https://gtmetrix.com%3Furl%3D%27%2BencodeURIComponent(location.href))%7D)()

検証したいページを開き、ブックマークをクリック。別タブでGTmetrixの検証ページが開かれ、対象アドレスが既に記入されている状態になっているはずですのでそのまま Enter/ Return キーを押下すると検証が始まります。
つまりURL入力の手間を省きます。

Page Speed Insightsに即アクセス

javascript:(function()%7Bwindow.open(%27https://developers.google.com/speed/pagespeed/insights/%3Fhl%3Dja%26url%3D%27%2BencodeURIComponent(location.href))%7D)()

使い方はGTmetrixと同じですが、ブックマークレットをクリック後別タブで表示されると同時に解析が始まります。

まとめ

記事内のhtml記述ミスは常に気をつけるに越したことはないのですが、特に全文表示タイプテンプレートを利用している 方は注意が必要です。
要約タイプと違い全文タイプはトップページに表示される内容も個々の記事内容に依存します。
ですから個々のページ単位で見れば少々のミステイクだとしても、トップページでは複数件掲載されるのですからレイアウトが大きく狂ってしまうこともありますし、JSが動かない、CSSが狂うなどの害も考えられます。
ですから本当なら初心者さんは要約タイプを選ぶのが賢明なんですけどね (´・ω・`)

記事内でhtmlをよく利用する、という方は毎回バリデートにかけるぐらいの意気込みは必要です。
もう毎回です。記事を一つ書いたらプレビュー画面なり投稿済みページなりで必ずW3Cのバリデータにかける。そしてミスがあれば即修正。
面倒ではありますが、例えば過去記事から内容をコピペして使いまわした場合でもその元内容自体が間違っていると後の修正がかなり困難になります。
ですからマメにチェックをするのが自身にとっても最も合理的なんですね。

検証自体がめんどうでもURL入力の手間ぐらいは省けますので是非ご活用ください。

最後に「プレビュー画面」で検証される場合にはtime要素(記事投稿日や記事修正日に関する情報)は以下のようなエラーになります。
Bad value --T::+09:00 for attribute datetime on element time: The literal did not satisfy the time-datetime format.
が、投稿(保存)を済ませた時点でちゃんと日付が入りますので大丈夫です。

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 10

There are no comments yet.

オカンチ  

2019/03/29 (Fri) 12:04

W3C validation の
新規ブックマーク作成から適切な名称をつけ、URLの部位にコピペで登録してください

登録の仕方が解りません 新規ブックマーク作成? ブックマークに追加の事ですか?

Akira  

2019/03/29 (Fri) 17:16
vanillaice (Akira)

To オカンチさん

そうです。ブックマーク追加のことです。
ご利用のブラウザはGoogle Chromeでしたよね。ドラッグ&ドロップでブックマークバーへの登録をまず試してみて、それでできなければ以下の手順を試してください。

このページを開いている状態で、検索窓の右にある☆マークをクリックすると「ブックマークを追加しました」というポップアップが出ます。フォルダは「ブックマークバー」にしておいてください。名称は「バリデート」「W3C」などわかりやすいものに変更してください

バーに登録できているはずなので、そのブクマ上で右クリックすると「編集」の項目があります。クリックすると編集ポップアップが出てきます。
URLの内容を一旦消去し、そこへJSコードをコピペしてください。そして「保存」です。

オカンチ  

2019/03/29 (Fri) 23:02

ありがとうございます
編集で保存したら ホップアップマークが出て
パスワード管理のマーク横に 「このページのホップアップはブロックされました」と出て
左クリックしたら 「ホップアップとリダイレクトを常に許可する」「引き続きブロックする」
どちらにチェックを入れたら宜しいのでしょうか

Akira  

2019/03/31 (Sun) 16:53
vanillaice (Akira)

To オカンチさん

わわわー。オカンチさんは「ポップアップ無効」の個人設定をされているってことなのかしら。
それではFC2での画像の掲載も容易ではなかったのではないかと。
ポップアップを無効化するとアップロード画面も別窓で開けないですし(タブを言ったり来たりすることになります)、ブックマークレットも動作しません。
なのでセキュリティ面と天秤にかけ、ご自身で判断をお願いします。
「ポップアップとリダイレクトを常に許可する」に変更すると使えるようになります。

オカンチ  

2019/03/31 (Sun) 20:06

ホップアップ無効の設定はしていないと思いますが・・・

右上のボタンから
ホップアップとリダイレクトリダイレクトを常に許可するに設定しました

Akira  

2019/04/01 (Mon) 14:44
vanillaice (Akira)

To オカンチさん

オカンチさんのブラウザ個人設定がどうなっているかまではわかりませんが、ポップアップ警告が出たのであれば拡張機能か個人設定によるものではないかと思います。

いずれにしろ使えるようになった、ということで大丈夫ですかね ^^;

オカンチ  

2019/04/03 (Wed) 09:53

HTMLチェックに

エラー:ほぼ標準モードのDoctypeです。期待してい<!DOCTYPE html>ます。
ラインから1、列1 ; 1行目、121桁目に
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">↩<html


?列目 ?桁目 ページ全体がチェックされるのですか?
自分の記事部分を調べるのに 時間が掛かります~

Akira  

2019/04/03 (Wed) 17:00
vanillaice (Akira)

To オカンチさん

こんにちは ('0')/

どのページで検証したのか教えて頂かないことにはわかりませんので、該当ページのURLをください。
ページ全体のチェックです。自身で書いた記事のミスをチェックしたい時は投稿済みページで行うのではなく、記事編集画面を開き、プレビューをクリックし、そのプレビュー画面で行うのが確実です。

参考記事: FC2ブログで気をつけた方が良いシステムいろいろ
https://vanillaice000.blog.fc2.com/blog-entry-845.html

今オカンチさんが古いhtmlのdocument typeに関するhtmlをここに書きましたので、このページでバリデートすると
Bad value 〜省略 for attribute
というエラーが出ます。FC2ブログのコメント欄に書かれたhtml内容は変換はされずともバリデート対象ですから注意してください。

オカンチ  

2019/04/03 (Wed) 19:52

記事の部分には 黄色が入ってないので
どうにか 1ページの修正は終わった… と 思います
記事編集画面でなく チェックしていたかも

お手数掛けましたー

Akira  

2019/04/04 (Thu) 22:56
vanillaice (Akira)

To オカンチさん(終了のご報告)

了解です。お疲れ様でした :)

コメント投稿

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

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