[Chrome]Web開発の人にも、ブログのデザインを変えたい人にも必須！『Pendule』

こんにちは、すなふ(@sunafu35)です。

Webデザインをしている人もそうですが、ブログのデザインを変更したいと思ったり、色々カスタマイズするのが好きな人に役立ちそうなChrome拡張機能があったのでご紹介です！

Chrome ウェブストア - Pendule

Penduleは、Chromeの標準デペロッパー機能にプラスして使うと、かなり便利に使い分けが出来そうな機能が満載でした。

インストール

Chromeウェブストアからインストールを行うと、ツールバーに

アイコンが追加されます。

メニュー

アイコンをクリックすると様々な機能が使用可能。

クリックメニュー

順番にどんな機能が使えるか見てみますね。

STYLE SHEETS

まず、一番上のメニュー「STYLE SHEETS」からは、CSSの確認メニューが充実。

View CSS

View CSSで、CSSを確認・・・外部ファイルになっているCSSも確認出来ますし、「Beautify CSS」をクリックすると、改行などを抜いたCSSでも見やすい形に改行して表示してくれます。
折りたたみながらCSS毎に確認したりも出来ますし使いやすいです。

これがあれば、気兼ねなく【CSS Compressor】や【SASSIENCE ～ 世界が嫉妬するCSSへ】などを使って、CSSを軽量化出来ますね。

Disable All Styles

CSSを全て無くしてページを表示したり、一部だけ使わず表示したり。

Show used color

ページに使われているカラーをR.G.Bと16進数で表示してくれたりもします。
これは、デザインを考えたり色の組み合わせを考えたりで重宝します。

FORMS

FORMSタブでは、「***」のように非表示で現されるパスワードを表示したり。hidden設定のオブジェクトを表示したり。

IMAGES

IMAGESタブでは、画像関係の確認メニューがまとまっています。

View images infomation

「View images infmation」では、使われている画像の一覧表示。
URLに、大きさ、ファイルサイズ、種類などがぜ～んぶ一覧。背景設定だから右クリックで調べられない画像とか関係ありません。

Show paths

「Show paths」では、画像のリンク先を画像上に表示させてみたり。

他には、画像を非表示にする、背景だけ非表示などの機能があります。

MISCELLANEOUS

MISCELLANEOUSタブでは、JavaScriptを参照したり、ルーラーを表示させたり、カラーピッカーを表示したり。個別の拡張機能はありますが、1つにまとまっているのがいいですね。
ページのcookiesを削除する機能なんかもあります。

RESIZE BROWSER

RESIZE BROWSERは名前の通り、ブラウザサイズをワンクリックで変えられるもの。
使ってるブラウザって、マルチタブブラウザが殆どだと思いますが、ブラウザウィンドウのサイズが変わるので少し使いづらいかも？
でも、指定のサイズに一発で変わるのは、確認にはいいですね。

ACCESSIBILITY

ACCESSIBILITYでは、HTMLや、CSSの表記確認を行えます。表記の間違いがないかのチェックですね。bloggerでは、テンプレート標準時点でエラーは出るので、絞り込みが難しいですが・・・。

オプション画面

オプションで、表記確認用のサイトを設定することも出来ます。

オプション画面「キーボードショートカット」

その他、オプションでは、キーボードショートカットの設定も。
ルーラーやカラーピッカーは、はじめからショートカットに設定されているので、覚えておくと随分違います。


Webデザインを仕事とする人にはもちろんの事。
趣味でブログを書いている人などにも必須だと思いました。特に、デザインを変えたい人には。

お気に入りのサイトのCSSや使っているカラーを確認したり、サイトパーツの大きさを見てみたりしながら整理していくと、自分の好きなデザインは、こういう設定なんだと理解がしやすいですね。
そういったときにも力を発揮する拡張機能です。

まだインストールしてなかった人は要チェックです。
機能が集約出来るのっていいものですよ。

ではまた！