Chromeのタグの色変えるのは、めっちゃ簡単!!

もう2月も半ばになってしまった…時間が経つのが早いっす

アルスです。

今日は題名にもあるとおり、ちょっとオシャレ心を湧き立たせてChromeタグの色を変えてみました。

SEO的にもデザイン的にもそこまで重要ではないですけど、細かいところにも奥ゆかしさを行き渡らせることこそ匠(たくみ)ってもんじゃないですか?

じい

ワシはiPhoneジャから関係ないし興味ないのう

アルス

いや、興味を持て!!
そして、じいもiPhone持ちの人もこのデザインを見よ!!
Androidはこんな工夫もできるのだ!!

とまあ、こんな感じで書きました。(笑)

では、どのように変わったのか見ていきましょーう。

そもそもタブって何??

タブとは、コンピュータのディスプレイ上に表示されている1つのウインドウ内で、複数の画面を切り替えて使用する際の、それぞれの画面の見出しのこと。

出典：OCN

PCでいえば、インターネットを開いたときの上にある個々のWindowのこと。

<タップ/クリックで拡大>

スマホではこちら。

<タップ/クリックで拡大>

タブの色が白じゃないサイトって意外とある。

普通、タブの色は白が多いですが、それ以外もたまにあります。

例えば、Buzzfeedやディズニーストアが挙げられます。

BuzzFeedを見てみる

【公式】ディズニーストアを見てみる

タブの色をこんな感じに変えてみた!!

【デフォルト】まず、元々の状態から。

<タップ/クリックで拡大>

多くのサイトはこのように白で統一されています。

一般的に白がよく使われるため、タブがたくさん並んでいる時、目立つことができません。

じい

普通すぎて全然目立たないのう

赤(MONZA,#CF000F)

<タップ/クリックで拡大>

 

タブというわずかな領域でも、自己主張が激しい赤で色を付けることで、小さくてもかなり目立つようになりました。

赤という色はすぐに目に入る色なので、注目を集めるためには最適な色ですね。

じい

目立つ赤は溢れんばかりの情熱を感じるのう。
松岡修造のようじゃ。

紫(REBECCAPURPLE,#663399)

<タップ/クリックで拡大>

紫は妖艶またはスピリチュアルな雰囲気を醸し出します。

古来から、紫というのは最上位の者が纏う衣服の色として尊ばれてきました。

また、非日常的な雰囲気を醸し出す効果もあるので、現在では占い師やセラピストが好む色でもあります。

じい

高貴な雰囲気を出しておるのう。おしゃれじゃ。

青(SAN MARINO,#446CB3)

<タップ/クリックで拡大>

青は見るものを安心させ、落ち着かせる効果があります。

相手への理解・誠実さや自身の才能を示唆する色でもあります。

また、統計によれば日本人の好きな色第１位が青であることもあり、誠実さのイメージも併せ持つ色として、コーポレートカラーとしても大人気です。(ローソン、パナソニックなど)

じい

やはり青は落ち着くのう。ワシも昔から青が好きなんじゃ。

水色(MEDIUM TURQUOISE,#4ECDC4)

<タップ/クリックで拡大>

水色は、眼前に広がる海や空を想像させる、開放的な色として機能しています。

また、「才能」を表す青と「ハート」を表す緑が合わさった色なので、創造性と表現力を示唆する色でもあります。

じい

ワシの故郷は田舎だから、水色を見ると湖や海を思い浮かべるのう。この色もなかなかいいのう。

オレンジ(TAHITI GOLD,#E87E04)

<タップ/クリックで拡大>

オレンジは陽気で温かくなるような温和な雰囲気を醸し出します。

不安やストレスといった負の感情を払拭し、むしろ楽しい雰囲気や食欲をそそるような効果もあります。

じい

圧倒的に安心感を感じる色じゃな。ワシのような抱擁感さえ感じさせる色じゃ。

黒(BLACK,#000000)

<タップ/クリックで拡大>

黒は高級感やクールなイメージを醸し出します。

威厳や重厚感、上質といった感じを生み出す効果があります。

じい

黒は冷静や高級というイメージじゃな。クレジットのブラックカードを連想させるのう。

【WordPress対象】タグの色の変更方法 (興味がない方は飛ばしちゃってください)

header.phpの編集画面に移動

まずはWordPressの管理画面にて、左のメニューバーから「外観」>「テーマの編集」を選択。

次に、テーマファイルの中から「header.php」を選択してください。

head部分にmetaタグ【theme-color】を追加

head部分に以下のコードを追加する。

<meta name=”theme-color” content=”#●●●●●●”>
//”#●●●●●●”の部分に好きなカラーコードを入れる

私はカラーコードを一から決めるのはめんどくさいので、http://www.flatuicolorpicker.com/を利用しました。

これで終了です。早いでしょ??( ´艸｀)

対応しているブラウザ

ブラウザ
Chrome：Android 4.4以下	✕
Chrome：Android 5.0以降	◯
Chrome：iOS	✕
Safari：iOS	✕
その他のブラウザ	✕

現状（2016年3月時点）では、Android 5.0 以降の Chrome のみ対応。なお、Android内での5.0以降の割合は、2016年1月時点で約30％*1とのこと。

出典：ある大学生の気になること

対応しているブラウザはまだまだ多くはないですね～。

もっと増えてほしいなあ。

まとめ

ちょっと遊び心を交えて、タブの色を変えてみました。

この記事を書いていて見てですね、色彩が人に与える影響について私自身少し興味を持ち始めてしまいました。

ちょっと凝っちゃうかもしれない。

こういったデザイン面での遊びも勉強になるしいいもんですよ。

これからもこのブログで遊んじゃえ、そんな決心をしました。

おわり!!