Chrome:ブラウザ上のカラーコードを取得するカラーピッカー「ColorPick Eyedropper」

WEBサイトを構築している時にブラウザ上に表示されているコンテンツの色を調べたい場合があります。

Chrome拡張機能で「ColorPick Eyedropper」を使用すると指定した箇所のカラーコードを取得することが可能です。

今回はChromeのブラウザ上に表示されているコンテンツのを調べることができるカラーピッカーアドオンColorPick Eyedropper」をご紹介します。

ColorPick Eyedropper

ColorPick_1

ColorPick Eyedropper」のアイコンをクリックし、調べたい箇所をクリックするだけでカラーコードを取得することができます。
また、RGBの値も表示してくれます。

サイトを構築する際に結構便利なChrome拡張機能です。

下記にChrome拡張機能ColorPick Eyedropper」を追加し、使用した時の方法をメモします。


「ColorPick Eyedropper」の使用方法

1.下記URLにアクセスします。

ColorPick Eyedropper

2.「+ 無料」ボタンをクリックし、「ColorPick Eyedropper」をChromeに追加します。

ColorPick_2

3.メッセージボックスが表示されるので、「追加」をクリックします。

ColorPick_3

4.追加するとヘッダーメニューに「ColorPick Eyedropper」のアイコンが表示されます。

ColorPick_4

5.アイコンをクリックするとカーソルが「十字マーク」になり、選択できる状態になります。

ColorPick_5

6.調べたい箇所をクリックするとカラーコードが表示されます。

ColorPick_6


表示されたカラーコードはそのままコピーできます。
サイト内の色を取得したい時に便利な拡張機能なのでおすすめです。

Chrome:ブラウザ上の選択した範囲をピクセルで表示するアドオン「MeasureIt!」

Chromeブラウザ上で選択(ドラッグ)した範囲の横幅縦幅サイズ
ピクセルで表示させることができるアドオンMeasureIt!」をご紹介します。

MeasureIt!

Chrome_MeasureIt_1

WEBサイトのデザインやコーディングをしていると画像や要素のサイズがどのくらいなのか調べたい時があります。

ブラウザに表示されている画像などの大体のサイズを計測したい時に「MeasureIt!」を使用すると
範囲を選択するだけで縦・横のサイズがピクセルで表示されるのでとても便利です。

サイト制作の作業効率も上がると思います。

下記にChrome拡張機能MeasureIt!」を追加し、使用した時の方法をメモします。


「MeasureIt!」の使用方法

1.下記URLにアクセスします。

MeasureIt!

2.「+ 無料」ボタンをクリックし、「MeasureIt!」をChromeに追加します。

Chrome_MeasureIt_2

3.メッセージボックスが表示されるので、「追加」をクリックします。

Chrome_MeasureIt_3

4.追加するとヘッダーメニューに「MeasureIt!」のアイコンが表示されます。

Chrome_MeasureIt_4

5.アイコンをクリックすると選択できる状態になるので、測りたい箇所をドラッグします。

ドラッグすると右側に選択した範囲の縦幅・横幅のサイズが表示されます。

Chrome_MeasureIt_5

再度、アイコンをクリックすれば通常の画面に戻ります。


アイコンをクリックしドラックするだけで、ピクセル単位でサイズを簡単に計測できるのでオススメなアドオンです。
「ここのサイズどのくらいだろう?」
みたいな感じでざっくりと測りたい時に活用できると思います。

参考サイトを調べたりする場合なども便利ですね。

Thunderbird:アカウントの表示順を変更するアドオン

Thunderbirdにアカウントを複数設定した時に、アカウントの順番を変更したい場合があります。
主に使用するメールアドレスを一番上に持ってきたいですよね。

Thunderbirdでアカウントの表示順を変更したい場合は「Manually sort folders」アドオンを使用すれば簡単に並べ替えすることができます。

ThunderbirdアドオンManually sort folders」を使用してアカウント表示順を変更する使用方法・設定方法をメモします。


Manually sort folders 1.1

メールアカウントの表示順を並び替えることができる拡張機能です。
また、フォルダの表示順も並び替えることができます。

https://addons.mozilla.org/ja/thunderbird/addon/manually-sort-folders/


使用方法・設定方法

1.Thunderbirdのメニューから「ツール」→「アドオン」をクリックます。

manually_sort_folders1

2.右上の検索ボックスで「Manually sort folders」で検索します。

manually_sort_folders2

3.検索結果に「Manually sort folders 1.1」が表示されるので「インストール」をクリックします。

manually_sort_folders3

manually_sort_folders4

4.「インストール」ボタンをクリック後、「今すぐ再起動する」リンクをクリックします。

manually_sort_folders5

5.再起動後、アドオンのページで「Manually sort folders 1.1」の「設定」ボタンをクリックするとManually sort foldersの設定画面が表示されます。

manually_sort_folders6

6.アカウントやフォルダを選択し「上へ」「下へ」ボタンで表示順を変更し「Thunderbirdの再起動」ボタンをクリックすれば並び替えることができます。

manually_sort_folders7


Firefox:Firefoxで画面キャプチャを撮れるアドオン

Firefox画面キャプチャを撮れるアドオンPearl Crescent Page Saver Basic」をご紹介します。

firefox_pearl_1

WEB開発者だと画面キャプチャを撮ることがよくあります。
プリントスクリーンでも良いのですが、縦長のページの画面キャプチャを撮りたい時など切れてしまいます。

Firefoxのアドオン「Pearl Crescent Page Saver Basic」を使用すれば、縦長のページもクリックするだけでスクリーンショットを撮ることができます。

操作も簡単で使いやすいのでおすすめです。

Pearl Crescent Page Saver Basic 2.8


「Pearl Crescent Page Saver Basic」インストール

1.メニューの「ツール」から「アドオン」を選択します。

firefox_pearl_2

2.検索で「Pearl Crescent Page Saver Basic」を入力し検索します。

firefox_pearl_3

3.「Pearl Crescent Page Saver Basic 2.8」が表示されるので「インストール」ボタンをクリックしインストールします。

firefox_pearl_4

firefox_pearl_5

4.「インストール」クリック後、「今すぐ再起動する」をクリックします。

firefox_pearl_6

5.再起動するとアイコンが表示され、使用できるようになります。

firefox_pearl_7


アイコンをクリックするだけで表示しているページのスクリーンショットを撮ることができます。
アイコン横のメニューで「表示部分のみ画像として保存」や「ページ全体を画像として保存」なども選択できるので便利です。

また、オプションでファイル名や保存フォルダの設定、画像の形式なども設定することが可能です。

Thunderbird:メール誤送信防止アドオン(Check and Send)

メールを送信する際に間違って送信してボタンを押してしまったり、送信後に内容を再度確認して間違っていたなんてことが多々あります。
そんな時にダイアログボックスを表示し、内容を再度確認できれば誤送信を防げると思います。
ダイアログを表示するだけのシンプルな仕様ですが、私はこれで誤送信がだいぶ減りました。
※他のメーラーではダイアログを出力するものがあるらしい。

■ Check and Send
メッセージ送信前に、ダイアログボックスを表示する。
※その他の機能も存在する。
https://addons.mozilla.org/ja/thunderbird/addon/check-and-send/

Check and Send

■ 使用・設定方法
1.Thunderbirdのメニューから「ツール」→「アドオン」をクリックする。
2.アドオンマネージャーで「Check and Send」で検索する。
3.「Check and Send」が表示されたら、「インストール」をクリックする。
4.Thunderbirdを再起動させて、送信した際にダイアログボックスが表示される。