attention admin about comments trackbacks you may also like

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

2019年08月20日
webのあれこれ
4
初心者向け Information Browser GoogleChrome

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での掲載が多いのが正直なところです

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

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

コメント(4)

There are no comments yet.

立花家蛇足  

2019/08/21 (Wed) 11:04

ありがたい記事です

あたくしは超初心者の爺ィなので、このような紹介記事はありがたいです。
しかし⋯⋯、メインのブラウザはFireFoxなので似たような拡張機能を探してみます。
特に二番目のカラーコードの抽出はワクワクします(ミーハーです)

Akira  

2019/08/21 (Wed) 21:43
vanillaice (Akira)

To 立花家蛇足さん

こんばんは ('0')/

そうですね。Firefoxにも類似拡張機能はあるはずなので、使い勝手の良いものが見つかると良いですね :)

-  

2019/08/24 (Sat) 19:38

管理人のみ閲覧できます

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

Akira  

2019/08/26 (Mon) 14:29
vanillaice (Akira)

To お引越しの件 内緒さん

お返事遅くなりました (*_ _)

滑り出し上々のようで良かったですー。
そうですね。あまりそういう副次的なことは気にしない、という方針で行かれるのが精神衛生上も良いと思います(笑)

私もそちらのサービスについてお聞きすることがあるかもしれませんのでよろしくお願いします :)

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

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