はるなぴログ

WEBサイト作成技術研究

Chrome拡張機能で是非お勧めしたいもの10選

Chromeブラウザの拡張機能を使っていますか?

とても便利でお勧めしたいChrome拡張を紹介します。

Web開発する場合にお役立ちのものやSEO対策用など10個の拡張機能をリストアップしてみました。

はてなブログを運用する方に便利なものも最後にご紹介します!

f:id:hal7pi:20181224085614j:plain

Hover Zoom+

まず最初にご紹介するお勧めのChrome拡張はHover Zoom+です。

chrome.google.com

これには随分とお世話になっています。

WEBサイトで表示されている画像にカーソルを当てることで拡大したものを見ることが可能になります。

小さくて見にくい画像もこの拡張機能のおかげで大助かり。 老眼の進んだ方には特にお勧めです。これでハズキルーペも不要に?

Roomy Bookmarks Toolbar

Roomy Bookmarks ToolbarはChrome拡張を小さなアイコンにしてツールバーに表示してくれる拡張機能です。

chrome.google.com

はるなぴのChromeブラウザのツールバーにはずらっとアイコンが並んでいます。どの拡張機能もすぐに使えるようにするためです。

これは便利ですよ。これから紹介していくChrome拡張もこれのおかげでいつでもすぐに使えるようになっています。

CSSViewer

CSSViewerは自分が見たWEBサイトのCSSを調べるときに大変便利なChrome拡張機能です。

chrome.google.com

CSSViewerをオンにして調べたい箇所にカーソルを当てるとその部分に適用されているCSSを表示してくれます。

使用されているCSSを調査する方法にはChromeブラウザのデベロッパーツールがよく紹介されていると思います。

しかしデベロッパーツールはいちいち開くのが大変。 CSSViewerなら簡単に使われているCSSを調べることが可能です。

WhatFont

WhatFontは使われているFontを簡単に表示してくれるChrome拡張です。

chrome.google.com

必ずしもうまく表示されるとは限りませんがCSSViewerと同じくカーソルを当てるだけで使用されているFontの情報を表示してくれます。

ColorZilla

ColorZillaは使われている色情報を簡単に教えてくれるChrome拡張です。

chrome.google.com

このChrome拡張は有名なので使っている方も多いかと思います。

どのような色の設定をしているのかなと思った時に非常に便利です。

ただし文字のように色を使っている部分の範囲が狭い場合には色情報を決めるのに難しい場合もあります。

HTML5 Outliner

HTML5 OutlinerはHTML文書のアウトライン構造を表示してくれる拡張機能です。

chrome.google.com

SEO効果をきちんと上げるためにもアウトライン構造がまともなものになっているかどうかを確認しましょう。

headingsMap

headingsMapはHTML5 Outliner同様にHTML文書のアウトライン構造とヘッダ(見出し)構造を表示してくれるChrome拡張です。

chrome.google.com

headingsMapではアウトライン構造だけでなくヘッダの構造も見ることができます。

HTML5 Outlinerで確認するときはいつも一緒に使っています。

HTMLエラーチェッカー

HTMLエラーチェッカーはHTML文法に違反した箇所がないかどうかチェックしてくれるツールです。

chrome.google.com

はるなぴは、はてなブログをマークダウン記法で書いて、そのマークダウンファイルをPandocを組み込んだ秀丸マクロでHTMLファイルに変換しています。

そのHTMLをそのままはてなブログの編集欄にコピペしていますので、エラーチェッカーがあると便利です。

Wappalyzer

WappalyzerはWEBサイトの情報を整理して表示してくれるChrome拡張です。

chrome.google.com

Webサイトで使用されているWeb ServerやSNS Wiget、更にはJavaScript Librariesのバージョンまで分かってしまいます。

はてなブログはNginxを使っているようですね。

Hatena Bookmark

Hatena Bookmarkは、はてなブックマークを簡単に使えるようにしてくれる拡張機能です。

chrome.google.com

これは、はてなブログ利用の方はほとんど入れていると思います。まだの方は是非この機会に入れてみて下さいね。

Google検索結果にもブックマーク数が表示され便利です。また簡単に、はてなブックマークを付けられるようになります。

はてなのお知らせ

はてなのお知らせは、はてなブログについた「はてなブックマーク」や「いいね」をリアルタイムにお知らせしてくれるChrome拡張です。

chrome.google.com

これはとても便利ですよ。

はるなぴがブログ記事を更新した後にブックマークをつけてくださった方がすぐに分かります。

まとめ

いかがでしたでしょうか。

まだ他にも便利なChrome拡張はありますので機会をみつけてまた紹介していきたいと思います。お楽しみに!