ブログのカスタマイズを行う上で、全体のデザインに統一感を持たせることは非常に重要です。
そして、ブログデザインの統一感に最も関係するのがバナー画像や文字装飾の配色。
自分のブログに使用する「色」にこだわり、その色の組み合わせに違和感がないよう心がけることで、デザイン全体に統一感が生まれて読者に深く興味を持ってもらえるんですよね。
ブログデザインの統一感を生む文字色の選び方｜背景やヘッダーの色味に合わせる方法とは。
自分のブログデザインの色味について迷っているのであれば、他人のWebサイトや画像・写真を参考にすればよく、そんなときに便利なのがカラーコードを抽出してくれる拡張機能。
例えば、こちらの記事で紹介しているColorPick Eyedropperを使えば、Webページ上で気に入った色のカラーコードをすぐに調べることが出来ます。
ブログや画像のカラーコードが知りたい？配色デザインに便利な拡張機能とは。
簡単かつ迅速にカラーコードが取得できてめちゃくちゃ便利ですね。
ただ、このColorPick Eyedropperにも弱点はあって。。
なんてことになると、無駄に作業時間を費やすことになってしまいます。
そこで本記事では、過去に取得したカラーコードを保存しておくことが可能な拡張機能『色ピGoogle Chrome』を紹介します。
色ピGoogle Chromeは、ColorPick Eyedropperよりも簡単な操作でカラーコードを取得できる上に、カラーコードの取得から保存までひととおりの機能が付いているんですよ。
拡張機能「色ピGoogle Chrome」をChromeに追加する
まずは、「色ピGoogle Chrome」をchromeウェブストアから追加しましょう。
なお、ワードプレスブログの運営やネットビジネス全般に取り組むなら、ブラウザはGoogle chromeを使うべきですので普段別のブラウザしか使っていない人はぜひインストールしてくださいね。
chromeブラウザを開いたら、chromeウェブストアを開いて検索窓に「色ピGoogle Chrome」と入力します。
参考 Chromeウェブストアchrome.google.com/
検索すると、拡張機能一覧表示に「色ピGoogle Chrome」が出てくるので、「Chromeに追加」ボタンをクリックします。
「追加しますか？」というポップアップが表示されたら、「拡張機能を追加」をクリック。
すると下画像のように、ブラウザ上方の右側に色ピGoogle Chromeのアイコンが表示されます。
これにて色ピGoogle Chromeの導入は完了です。
色ピの機能をより便利に使う設定を行う
さて、色ピGoogle Chromeの導入が完了したら、さっそくこれを使っていきたいところですが、最初に設定をイジっておきましょう。
デフォルト設定でも問題ないんですけど、ちょっと設定変更するだけで劇的に使いやすくなるので、以下にしたがってさらっと済ませちゃうといいですね。
まずは、ブラウザ右上の色ピアイコンをクリックして、項目一覧の中から「Option」を選択します。
すると下画像のような画面が表示されますので、Auto-copyの「Automatically copy picked color to clipboard」というチェック項目にチェックマークをいれましょう。
これにより、Webページ中のカラーコードを取得したい箇所をクリックするだけで自動的にそのカラーコードをコピーすることが出来るようになります。
また、その下の「Auto-copy color format」の選択ボックスでは、コピーするカラーコードの種類を選択することができます。
ブログのカスタマイズを行うワードプレス上では、HTMLを利用することが多いため、「#RRGGBB」か「RRGGBB」のどちらかを選択しておくといいですね。
次に、同じ設定ページ内にあるKeyboard Shortcutsの設定を行います。
「Enable color picked…」のチェックボックスにチェックマークを入れることで、色ピカーソルを呼び出すショートカットキーを使うことが出来るようになります。
ショートカットキーは以下のとおりです。
色ピショートカットキーCtrlキー＋Altキー＋選択したアルファベットキー
選択するアルファベットは、自分にとって分かりやすいものなら何でもOKです。
僕の場合、色ピはカラーコードを抜き出すツールなので、Colorの頭文字の『C』を選択しました。
以上で必要な設定が完了しましたので、最後に「Save」ボタンをクリックしましょう。
色ピGoogle Chromeの基本的な使い方
それではいよいよ、色ピGoogle Chromeの具体的な使い方を解説します。
といっても、操作は非常に簡単で、Webページ上で「この色味使いたいな」と思ったときに、色ピの十字カーソルを呼び出し、その十字カーソルの中心を目的の色味箇所に合わせるだけ。
例えば上画像のWebページを見て、「サーチマークのピンク色を自分も使いたい！」と思ったとき、色ピの十字カーソルを呼び出します。
呼び出し方は、上記で設定したショートカットキーを使って呼び出してもいいし、ブラウザ右上の色ピアイコンから「Page Color Picker Active」を選択してクリックしてもOKです。
ショートカットキーが使えるんだから、わざわざ色ピアイコンからカーソルを呼び出す必要はないんですけどね。
そして、十字カーソルを呼び出したら、そのカーソルの中心をカラーコードを抽出したいサーチマーク部分に合わせましょう。
色ピの十字カーソルを呼び出すと上画像のようにWebページ上方にバーが表示され、そこに「現在カーソルが合っている箇所のカラーコード」が表示されます。
この状態でマウスをクリック。
上述した設定が完了していれば、クリック一発でカラーコードをコピーすることができちゃいますね。
ちなみに、上述した設定を行っていない場合は、ブラウザ右上の色ピアイコンから「Coppy to Clipboard」を選択。
すると、各種形式のカラーコードが表示されますので、この中から使用するスタイルのコードを選択してコピー完了となります。
一々この作業を行うのも面倒ですので、必ず上述した設定は完了させておくべきですね。
以上が色ピの基本的な使い方になります。
ブラウザ上部のバーの中にある「Point sample」を選択すると、十字カーソルポインタの縦横幅をいくつかの候補から選択できます。
例えば、「11×11 average」を選択して、カーソルポインタを適当な箇所にあわせてみると…。
黄色囲い線で示した11×11の四角領域周囲の色味を平均して、カラーコードを抽出することができるんです。
上画像のように、グラデーション画像の中間色を抽出したいときなどに使うことができますね。
過去に抽出したカラーコードをヒストリーから呼び出す
カラーコードの抽出ツールとして色ピGoogle Chromeを使う一番のメリットは、やはり「過去にコピーしたカラーコード履歴を残しておくことができる」という点だと思いますね。
目的とする色のカラーコードをコピー（クリック）すると、このように「クリップボードにカラーをコピーしました」と表示されます。
そして、このコピーした色は全て、「Color history」として残り続けます。
いくつかの色のカラーコードを立て続けにコピー（クリック）して、色ピアイコンから「Color Picker」もしくは「Picked Color History」をクリックしてみましょう。
すると下画像のように、過去にコピーしたことがある色たちが「color history」として一覧表示されるんですよ。
この中から必要な色を選択すれば、その色のカラーコードを再取得することが可能です。
この機能が本当に便利！
このように、色ピを使えば自分の好きな色や必要な色だけで構成されたパレットのようなカラーヒストリーを残すことができ、ブログデザインの際に大いに役立ちます。
終わりに
色ピGoogle Chromeの導入方法から実際の使い方まで、一連の流れを説明してきました。
同じカラーコード抽出拡張機能のColorPick Eyedropperに比べると、使える機能が多く、設定次第で操作も簡略化でき、しかも過去履歴を残しておくこともできるという点で、より便利なツールと言えますね。
ぼくも前まではColorPick Eyedropperを使っていたんですが、色ピGoogle Chromeの存在を知ってからはこれに乗り換えました。
最初に少し触れましたが、読者さんに違和感を与えないよう、ブログデザインに統一感を持たせるためには、色味の選択がとても重要です。
そんな色味を正確に抽出することができる色ピGoogle Chromeは、ブログデザイン・カスタマイズに必須の拡張機能と言えるでしょう。
ぜひ導入してみてくださいね。
