Google Chromeのおすすめ拡張機能3選

見ている画面を画像として保存できる「Awesome Screenshot」

画面をキャプチャする(スクリーンショット)拡張機能です。見ているページをそのまま画像として保存できます。スクリーンショットは何かの説明をする時に重宝します。

ブラウザ拡張ですから デスクトップ全体のキャプチャには使えません。逆に考えれば、ブラウザに表示されている内容に限定したい場合は便利ですよね。

パソコン画面をスマホで撮影する、なんてめんどうなことも無くなります(笑)
テレビなどもそうですが、液晶画面を写真撮影すると モアレ現象 といって縞模様が現れてしまい非常に不鮮明な画像になってしまいますが、専用ソフトや専用拡張機能を利用すれば手早く美しく撮影できます。

ページ上のカラーコードをすぐに抽出「ColorZilla」

カラーピッカーです。「この色良いな」と思ったらすぐに抽出。#ffffff の16進数と rgb(255,255,255) の10進数どちらにするか設定で選べます(デフォルトは16進数)

画像情報がすぐわかる「Image Size Info」

この拡張機能で知ることができる画像情報は「URL」「原寸(Dimensions)」「表示サイズ(Displayed)」「容量(File Size)」の4つです。

特徴及び注意事項は、CSS疑似要素やabsolute指定要素などが上に被さっていると情報の抽出ができないという点。多くの場合 要約表示タイプテンプレートのトップページサムネイル などでこのパターンに出くわしますが、記事内で自身が利用した画像などよほど特殊なhtml, CSSで掲載したもの以外はすぐに調べられます。

また、img要素 として掲載されたもののみ取得可能。background-imageプロパティ での掲載は不可。

まとめ

記事作成やテンプレートカスタマイズに役立つかもしれない、という前提で選びました。特に テンプレートカスタマイズ なんですが、初心者の多くの方が最も困るのは 対象要素を特定する術を見つけられない ことではないかと思います。平たく言えば「手がかり」のことです。

例えばヘッダー画像変更。image size infoを使ってもしヘッダー画像のURLがわかれば、それをキーワードに Ctrl + F キー検索をすれば長大なソースコードのどこにそれが記してあるのか一発で特定することができ、あとはそのURLを変更すれば良し。カラーコードだって同じです。
* ただしヘッダー画像の多くはimgではなくbackground-imageでの掲載が多いのが正直なところです

要するに「手がかり情報を手に入れる」ということですね。手がかりが多ければ多いほど作業は楽になります。ただし拡張機能は導入しすぎるとブラウザの起動が遅くなる原因になりますので、よく利用するもの・使いやすいものを厳選すると良いですね。