WordPressウェブサイトメーカーにとって最も便利な5つのGoogleChrome拡張機能

公開: 2017-07-13

プロジェクトを成功させるには、ワークフローを最適化することが重要です。時間とお金を節約し、同僚やクライアントとのコミュニケーションを改善し、完成したWordPressサイトの品質を向上させます。

現在、アプリケーション、プラグイン、またはアドオンが常に存在し、タスクをより効率的に実行するのに役立ちます。この記事では、ProteusThemesのブラウザ（具体的にはGoogle Chrome）で、さまざまな種類のコンテンツの通信、編集、分析に使用する拡張機能の種類を紹介したいと思います。

私が使用している5つのChrome拡張機能はすべて無料で利用でき、数分で設定できます。それらを見てみましょう：

– ワットフォント

– ページルーラー

– ColorZilla

– 素晴らしいスクリーンショット

– Stylebot

Chromeウェブストアからすべての拡張機能をインストールできます。拡張機能をインストールすると、そのアイコンがブラウザのツールバーの右上隅のURLフィールドの横に表示されます。拡張機能を実行するか、アイコンをクリックしてすべてのオプションを表示します。

URLフィールドの最後にあるメニューをクリックして[その他のツール]を選択するか、拡張機能のアイコンを右クリックして必要なオプションを選択すると、インストールされているすべての拡張機能を表示、変更、アクティブ化、または非アクティブ化できます。

各拡張機能の詳細を詳しく見ていきましょう。

ワットフォント

WhatFont拡張機能を入手する

Webサイトにアクセスして、同じフォントを使用したいと思ったことはありますか？コード内のフォントを検索するのは難しいかもしれませんし、WhatFontを使うこともできます。この拡張機能は、テキストをクリックすることにより、さまざまなWebページで使用されているフォントを識別します。ポップアップウィンドウには、フォントに関するすべての情報が表示されます。テキストにカーソルを合わせると、使用されているフォントの名前を取得することもできます。

このツールは、次のプロジェクトのインスピレーションを探しているときや、公開する前にWordPressWebサイトの最終バージョンを確認するときに使用します。これは、さまざまなブラウザ解像度でフォントをテストするときに、Webデザイナーや開発者によってよく使用されます。

展開は、フォントの次の特性を示しています。

フォントの太さとスタイル（選択範囲の太さとスタイルを表示します）。

フォントファミリー（フォントの元となる書体の完全なコレクションを表示するため、フォントを追跡できます）。

フォントサイズ（現在表示されている解像度で使用されているフォントのサイズです。2つの異なるフォントが同じサイズに設定されている場合、違いがあるため、一方が他方より大きく見えることがよくあります。サイズはピクセル単位で表示され、残念ながら拡張子は他の活版印刷の測定値はありません）。

フォントの高さ（大文字の上部から最下位のディセンダーの下部までの高さと、小さなバッファースペース）。

フォントの色（フォントのHEXカラーモデル。リンクのテキストの色を読むときは注意してください。選択すると、ホバーモードでリンクの色が表示される場合があります）。

Google Fonts、 Font Squirrel、またはTypeKitリンク（場合によっては、フォントはインタラクティブなアプリケーションプログラミングインターフェイスのコレクションに接続されており、WebサイトからWebフォントを参照して使用できます。同じフォントを探すか、タイプフェイス全体を取得してください）。
文字（大文字と小文字のサンプルが選択したフォントで表示されます）。

また、WhatFontを使用している間は、Webページを操作できず、ページのスクロールのみがアクティブになることに注意してください。以前のポップアップを失うことなく、複数のフォントをクリックして比較できます。

ページルーラー

ページルーラー拡張機能を取得する

ページルーラーを使用すると、任意のページにルーラーを描画し、要素の幅と高さ、およびWebページ上のその位置を表示できます。コードを表示したり、スクリーンショットを作成してPhotoshopで測定したりする必要はもうありません。このツールは、Webページ上の大きな要素のサイズと位置を確認するときに役立ちます。たとえば、すべてのパディングとマージンを確認できます。より小さな要素や詳細も測定できます。

ページルーラーの使用方法

ブラウザのツールバーの右上にあるアイコンをクリックするか、 Alt + Pを押して、ルーラーツールの使用を開始します。青い定規バーがポップアップし、選択範囲の幅、高さ、位置（左、上、右、下）が表示されます。

選択するには、クリック、ドラッグ、リリースするだけです。選択データは青いツールバーにすぐに表示されます。ルーラーの側面と角をクリックして移動することにより、ルーラーの選択範囲のサイズを変更します。青い定規バーのフィールドに、目的のサイズまたは位置を手動で入力することもできます。別のオプションは、フィールドの小さな矢印をクリックして、選択範囲のサイズを変更したり移動したりすることです。これにより、正確な変更を加えることができます。選択範囲を中央からドラッグして移動することもできます。

より小さな詳細を測定したい場合は、Webページを拡大します。このツールの最大の利点は、拡大したときにルーラーが選択範囲に余分なピクセルを追加しないことです。

ルーラーの色を変更して、ルーラーの選択とページ要素で使用される色のコントラストを向上させることができるため、より正確な測定を行うことができます。

離れている2つの要素間のスペースを測定するには、[ガイドを表示]オプションをオンにして、定規の端から伸びるガイドラインを表示します。

気になる場合は、測定中にツールバーをWebページの下部にドッキングできます。

「要素モード」（ツールバーの左側にある水色の矢印をクリック）を有効にして、マウスを要素の上に移動しながら、ページ上の要素の輪郭を描きます。要素をクリックすると、安定した選択が得られます。拡張機能も表示され、Webサイトコードに従って要素間を移動できます。

要素モードでの要素の検索と移動

プラグインの唯一の欠点：モバイルビューで要素のサイズを取得する必要がある場合は、ページルーラーが機能しないため、別のサイズ変更Chromeプラグイン（ウィンドウリサイザーなど）と同時にページルーラーを使用する必要があります。開発者モードのWebページ。

ColorZilla

ColorZilla拡張機能を入手する

ColorZillaは拡張機能であり、Web開発者やグラフィックデザイナーが色に関連するタスクを実行できるように支援します。これは通常、カラーパレットの作成、色の組み合わせからのインスピレーション、または特定の要素の色の確認に使用されます。別のアプリケーションを開かなくても、Webページの任意の部分から色を読み取り、その色を調整して別のプログラムに貼り付けることができます。

このツールは、RGBおよび16進形式で色の読み取りを提供します。 ColorZillaのスポイトアイコンをクリックすると、多くのオプションのメニューが開きます。

ColorZillaの使い方

ColorZillaの最も一般的な使用法は、要素の色を読み取ることです。「ページから色を選択」をクリックすると、現在表示されているページから任意の色を選択できます。 Webページの上部にツールバーが開き、色のサンプル、RGBおよびHEXの色形式、および色付きの要素のサイズとコードが表示されます。ツールバーには、平均色を計算するために、色のより大きなパッチを選択するオプションもあります。

色のHEX形式を選択してコピーします。 CTRL + VまたはCMD + Vボタンを使用してHEXカラーコードを貼り付けます。別の形式で1回コピーする場合は、ドロップダウンメニューを開き、[クリップボードにコピー]を選択して、目的の形式を選択できます。

オプションで次に選択するすべての色の形式を変更できます。そこで、＃形式（66CAA6）を無効にし、HEXコードを小文字（66caa6）にすることができます。変更を保存することを忘れないでください。

最後に選択した色は、ColorZillaアイコンのドロップダウンメニューの[カラーピッカー]の下に保存されます。カラーピッカーは、選択した色の履歴を保存し、色を編集するオプションがあり、ここからコピーできます。

「WebpageColorAnalyser」は、現在のWebページで使用されているすべてのCSSカラーを読み取ります。色をクリックすると、この色の各要素が強調表示され、色のRGBおよびHEX形式が表示されます。

組み込みのパレットブラウザを使用すると、既存のカラーセットから色を選択できます。色に関連するオプションの1つは、グラデーションを作成するための高度なオプションである「CSSGradientGenerator」でもあります。

素晴らしいスクリーンショット

素晴らしいスクリーンショット拡張機能を入手

この拡張機能により、Webページのスクリーンショットと記録が簡単になります。ローカル画像をインポート、編集、エクスポートすることもできます。 ProteusThemesでは、社内でのコミュニケーションや、提供しているWordPressサポートのために毎日使用しています。リモートで作業している場合、このツールは非常に便利です。はい、同じ作業を実行できる拡張機能は他にもたくさんありますが、シンプルで強力なAwesomeScreenshotが気に入っています。

素晴らしいスクリーンショットの使い方

この拡張により、次のことが可能になります。

– Webページの表示部分をキャプチャするには（遅延キャプションのオプション）、

– 選択した領域をキャプチャするには（画像として必要な領域を選択します）、

– Webページ全体をキャプチャするには、

– デスクトップのスクリーンショットを撮るには、

– ローカル画像をインポートして編集し、

– 画面のビデオを録画します。

Webページのスクリーンショットを撮る方法の1つを選択するには、ブラウザのツールバーにあるカメラレンズアイコンをクリックします。素晴らしいスクリーンショットの遅延キャプチャを除くすべてのアクションは、即座に実行されることに注意してください。作成したスクリーンショットは、PNGまたはJPEG画像として保存されます。画像の希望する形式は、拡張機能のオプションで選択できます。このオプションでは、遅延キャプチャの時間、ショートコード、画像を自動的に保存するフォルダなど、他の設定もあります。

Webページのモバイルビューが必要な場合、またはWordPress Webページのスクリーンショットを別の解像度で作成する場合は、開発者モードで変更するか、他のサイズ変更拡張機能（Webサイトリサイザーなど）を最初にアクティブ化できます。

スクリーンショットを保存する前に、編集してコメントする機会があります。キャプチャをスクロールしてトリミングし、プライベートデータを含む部分を簡単にぼかします。強調と明確さのために、画像にさまざまな色のテキスト、円、矢印、線で注釈を付けることができます。保存する前に、拡大鏡アイコンでズームインおよびズームアウトして画像を表示します。

素晴らしいスクリーンショットを使用したツールバーとスクリーンショットの編集オプション

結果に満足したら、画像をコンピューター、クラウドに保存、共有、または印刷します。

この拡張機能には、30秒のスクリーンビデオを無料で録画するオプションもあります。タブまたはウィンドウビデオを作成できます。ビデオはWebM形式で保存したり、Googleドライブに転送したり、YouTubeに直接アップロードしたりできます。録音は、[マイ録音]の下の[素晴らしいスクリーンショット]ドロップダウンメニューにあります。

拡張機能の唯一の2つの欠点は、ブラウザを拡大すると、選択した領域のキャプチャが機能せず、多くのユーザーが粘着性のある要素を含むWebサイトのスクリーンショットを取得できないことです。

おもしろい雑学クイズ：この記事で見ているスクリーンショットとビデオのほとんどは、素晴らしいスクリーンショットで作成されています。

Stylebot

Stylebot拡張機能を入手する

Stylebotを使用すると、表示専用のWebサイトのCSSを編集および操作できます。 WebサイトのCSSを正確かつ長期的に変更するには、 CSSに関する知識が必要です。 WordPressページの変更をすばやくプレビューするためだけに必要な場合は、CSSに関する高度な知識は必要ありません。このツールは、すべての可能な要素を変更し、新しい要素を追加し、それらを削除し、Webサイトの異なるレイアウトを作成するために使用されます。これにより、完璧なスクリーンショットを作成したり、不要な間違いを修正したり、WebサイトのCSSを保存したりできます。次の訪問で見られます。作成したWebサイトのスタイルは、インポートまたはエクスポートして、他のユーザーと共有できます。

より高度な編集のために、Stylebotを開発者モードと組み合わせて使用してページ上の要素を識別します。

Stylebotの使い方

Stylebotを開くには、ブラウザのツールバーのCSSアイコンをクリックするか、 Alt + Mを押します。プログラミングのスキルがあまりない場合は、新しく開いた列の下部にある基本モードを選択することをお勧めします。

詳細モードでは、選択した要素のCSSコードを入力するテキストフィールドが開きます。ここでは、開発者モードと組み合わせて、ネストされた要素から変更する要素の名前を見つけて、Stylebotで編集を続ける方が簡単です。同時に多くの編集モードを使用したい場合は、それが可能です。簡単な編集はコードに変換され、AdvanceまたはEditCSSモードで表示されます。

CSSの編集モードで、「WordPressテーマを作成する」フォントをHelveticaフォントに変更しました

「CSSの編集」オプションは、CSSコードのフィールドを開きます。このフィールドは、Webサイト全体に適用され、次にWebサイトにアクセスしたときに保存、共有、および使用できます。行ったすべての変更が表示されます。 Webサイトを更新しても、行ったすべての変更はそのまま残ることに注意してください。スタイリングを削除するには、Stylebotアイコンをクリックして、[スタイリングの削除]を選択します。
基本モードには、Webサイトをすばやく簡単に編集するためのシンプルなセクションがあります。クイックプレビューツールとして使用することもあります（たとえば、大きな見出しがどのように見えるかをテストしたり、背景の色を変更したりするためなど）。初心者でも簡単に使えます。

ここで変更できます：

– 文章、

– 色、背景、

– ボーダーズ、

– レイアウトと可視性。

Webサイト上の要素（緑色の境界線で強調表示されている）をカーソルで手動で選択します。要素の名前は、Stylebot列の上部に表示されます。新しい選択については、列の左上のアイコンをクリックするだけです。要素のタイトルにあるドロップダウン矢印は、以前に選択したセクションを提供します。適切な要素を選択すると、値を入力し、事前にスタイル設定されたオプションを選択することで、Webサイトの変更を開始できます。基本モードでの編集オプションは制限されています。フォントサイズ、テキストの色、パディングとマージンなどを変更できます。

Stylebotの編集または表示エクスペリエンスをより快適にするには、Stylebotアイコンをクリックして、[オプション]を選択します。ここでは、パーソナライズされたショートカットの作成、好みの編集モードの選択、さまざまなWebサイトに適用されるスタイルの有効化と無効化、スタイルのインポートとエクスポートなどを行うことができます。

したがって、ここでは5つだけ、最も重要で強力な拡張機能を紹介します。これらはProteusThemesで日常的に使用されており、ワークフローも簡単になります。あなたはそうではないと思いますか？より良い代替案をお勧めしますか？コメントを残す。