一週間ほど前に、三日間くらいかけてサイトのカスタマイズに奮闘していた。それで、せっかく頑張ってやったので、備忘録も兼ねて、ブログのカスタマイズ記事を仕上げようかと思ってカタカタと書いていたのだが、どうも一つの記事にまとめると、かなりの文字数に達しそうだ。そのため、まずは項目ごとに小出しにして、細かく説明してから、そのあとでまとめ的な包括の記事を書き上げようと思っている。
それで、今回は配色と背景画像について書こうと思う。
色項目
なんと言っても、配色はサイトのデザインにおいてとっても重要である。だが、これは説明云々ではなく、サイト運営者の個性や美的センスに依るとは思っている。ここではあくまで自分の設定について書き出し、その後で拘った点などにも書かせてもらう。
なお、デフォルトとは、Simplicityデフォルトの色設定のこと。
それぞれの配色設定
まずは当ブログのそれぞれの配色設定一覧から
背景色
白 #ffffff（うちは背景画像があるため実際は関係なし）
リンク色
青 #0084b4
この「#0084b4」という色は、Twitter標準のリンク色らしい。サイドバーのTwitterと、統一感が出るかなと思い、配色した。（間違っている可能性もあり。鵜呑みにしないでください）
リンクホバー色
#cc0033（デフォルトのまま）
ヘッダー外側背景色
デフォルトのtransparent
ヘッダー内側背景色
同じくデフォルトのtransparent
うちのように、ヘッダーを画面幅いっぱいに広がる「ヘッダー外側背景画像」を設定した場合、必ず透かしにすること！ でないと、狙ってやるならともかく、以下のようになってカッコ悪い。
サイトタイトル色
デフォルト
うちはタイトルを「ロゴ」にしているため何色でも関係なし。
サイト概要色
白 #ffffff
背景画像があるため、白じゃないと見難い。
モバイル時ヘッダー背景色
ここもうちでは関係なし。
モバイルサイト概要色
白
上の「サイト概要色」参照。
グローバルナビ色
限りなく黒に近い灰色 #333333
ヘッダー画像とのバランスから。元は真っ黒にしていたのだが、どうやらWebデザインでは基本的に、真っ黒というのは使わないで、「黒に見える灰色」というのを使うらしい。以下を参考にさせて頂いた。
グローバルナビリンク色
白 #111111
グローバルナビが黒なので、文字は白じゃないと。
グローバルナビリンクホバー色
紅海老茶色 #a73836
一応、紅海老茶が当サイトのイメージカラー。こういう、隠れたところにさりげなく使うのが、粋なのだ。
メニューボタン色
#333333(デフォルト)
ここでもデフォルトで、黒に近い灰色が使われている。
メニューボタン背景色
デフォルトのままtransparent。
トップへ戻るボタン色
#333333
黒のつもり
トップへ戻るボタン背景色
灰色 #aaaaaa（デフォルト）
フッター色
紅海老茶色 #a73836
上記したように、現在の当サイトイメージカラー。
あくまでアクの強い色を目立つところに置いてしまうと、文章の印象を殺しかねないので、イメージカラーとはいえ、ヘッダー程度にさり気なく配色した。
紅海老茶が当ブログのイメージカラー
上記したように、紅海老茶が当ブログのイメージカラーだ。では、なぜ紅海老茶がイメージカラーなのかというと、大した理由ではない。最近読んでいた『吾輩は猫である』の中に海老茶式部の逸話が出ているのだ。それで、海老茶にしようかと思ったのだけど、海老茶だとあまり目立たなかったので（要するに、Web媒体に使うには暗すぎる）、それに赤みを加えた紅海老茶にした次第。まあ、なんでもきっかけが大事なのだ。
背景画像
背景画像は、薄めの木目調にした。
画像は以下のサイトのものを利用させてもらった。商用利用にも可能とのこと。
背景画像は必要にかられて設定した
実をいうと、そこまで率先して背景色や、背景画像を設定したかったわけではなく「白」のままで良かったんだが、とある理由から設定。
その理由というのは、自分の手持ちのiPhone4S(iOS7)とiPad mini2(iOS8)で当ブログを見ると、なんとヘッダー画像が表示されないのだ！
これは、完全レスポンシブデザインの設定やら、タブレットをモバイル表示に設定しても変わらないので、多分これは自分の端末側のiOSが古いからかなと睨んでいる。事実、手持ちのiPhone5(iOS10)や、Zenfone 2 Laser(Android 6.0)、そして以下のようなサイトで確認したところ、問題なくヘッダー画像は表示されている。
ただし、自分のように未だiOS7やiOS8といったOSを未だに使っている人も多いと思うので、せめて白字のブログタイトルロゴや、サイトのキャッチフレーズが見えるように、背景を設定した。（白地の背景に白字のブログタイトルと説明文が表示されたときには、文字通り真っ白だった）
とは言っても、案外設定してみると、自分が今PCを置いているIKEAの木目調の机に、なんとなく雰囲気が似ていて、これはこれでいいかなと思っている。
左が背景画像で、右がKindleと本が置かれた僕の机の写真。以下の記事のスクリーンショット。
終わりに
初めに述べたように、あくまで配色や、背景画像はサイトのカスタマイズにおいて最も基本で、かつ重要な項目だと思う。ただ、これはあまり説明云々じゃなくて、ブログ運営者の個性やセンスによってどうなるかが分かれるとも思っている。
個人的には、自分の美的センスにあまり自信がない人は（僕もだ）、奇抜な色をむやみに選ばない方が失敗しにくくていいんじゃないかなと思っている。とは言っても、配色に失敗したような、少し変な見た目のサイトというのも、それはそれで素人の愛が篭っているような気がしてアリとも言える。
何はともあれ、この記事が何かの参考になれば幸いである。
コメント