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

投稿 2018年10月01日
0
カスタマイズ
EducationBookmarklet初心者向け

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.
が、投稿(保存)を済ませた時点でちゃんと日付が入りますので大丈夫です。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

0 COMMENTS

There are no comments yet.

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)