＜ZELO導入記②＞マテリアルデザインを目指して色を変えてみたはなし

Blogger ZELO カスタマイズ ブログ

自分好みの色を設定するだけで「自分のサイト」感が出る気がします。
なので今回は、「Blogger テーマデザイナーを使って色を変える」の巻。

まだHTMLやCSSそのものはいじらないので、「導入記②」としましたぁ(〃艸〃)

前回は、

  1. 「ZELO」のテンプレートをダウンロードして
  2. 適用し、
  3. 作者さんのサイトに従って初期設定
のところまで終わらせたところ。

でもこれだと、いかにも「デフォルト！」ってカンジ↓
（とてもまとまっているデザインなんですけどね）
Bloggerテーマ「ZELO」適用直後


ので、今回は「色変」ですっ。


サイトで使用する色を決める

ワードプレスで作ってたときと同じ色でもいいんだけど、今回の裏テーマは「マテリアル」。
だから、マテリアルデザインの配色にしてみようかと！


メイン、サブ、アクセントの３色を決める


マテリアルデザインとゆーのは、メイン、サブ、アクセントの３つの色で構成されているようで。ふむふむ。

とはいえ、わたくし、自慢じゃないけれど配色のセンスは皆無。
ここは便利なツールに頼りますよん。

出でよっ！便利ツール！！

⇒サルワカさんの配色見本集
⇒マテリアルデザインカラー


とうきび。の名にちなんで、メインカラーは黄色系なのは決まっているので（とうきびとゆーのは北海道弁でとうもろこしの意）、黄色っぽい色をメインカラーにしたい。

てことは、サブカラーは緑系かな。（葉っぱ）

メインカラー

500番台を使うことが推奨されているらしいです。

でも黄色の列の500の色は白文字が乗りにくかったから、アンバーの列を採用。
黄色の列の600の色と近い、300の色にしました。

そんなわけで、メインカラーは#FFD54F■に決定。

サブカラー

メインで選んだのと同じ色合いで、濃いのと薄いのだって。
  • 濃いのは#FFA000■
  • 薄いのは#FFF8E1■

アクセントカラー

メインカラーで選んだ列に入れて、くっきりする列の500の色が推奨されているみたい。

サルワカさんの配色見本集のアクセントカラーで使われているものの中からいいカンジの緑をさがし、#8BC34A■に決めました！


サルワカさんの配色見本画像をお借りして、イメージ図を作ってみました↓
このサイトのイメージカラー


うん！
いいカンジにまとまったんじゃないかな！！

（ちなみにメイン・サブの色を縦の色味にそろえないと、ちぐはぐな印象になっちゃいます。。）

テーマデザイナーで色を変える

では、実際に色を変えていきまする。


テーマ　→　［カスタマイズ］

で、テーマデザイナーを開いて、やっていきますよ～。


公式のテーマじゃないので、変更できるのは左上の「上級者向け」ってところだけみたい。
でも今使うのはここなので、全然ＯＫ。


全体の編集

  • 全体のホバーカラー（ラベルを選択したときの色など）：サブ（薄）
  • 現在のページ番号文字色：白
  • 現在のページ番号背景色：アクセント
  • *ページ番号文字色：#212121
  • *ページ番号背景色：白
  • *ページナビ文字色：#212121

上部固定バーの編集

  • pc上部メニューの幅：850（デフォルト）
  • ナビバー全体背景色：メイン
  • スマホmenuの中身文字色：#212121
  • スマホmenuの中身背景色：白
  • menuボタン文字色：メイン
  • menuボタン背景色：サブ（薄）
  • pcのナビ要素背景色：メイン
  • pcのナビ要素背景色(ホバー)：サブ（薄）
  • pcのナビ要素文字色：白
  • pcのナビ要素文字色(ホバー)：メイン

ヘッダーの編集

  • ヘッダー背景色：白
  • ヘッダー文字色：メイン
  • ヘッダー説明文字色：#757575

トップ画面の編集

  • メイン背景色：サブ（薄）
  • メイン左背景色：白
  • トップ記事の上下ボーダー：白
  • トップ記事の見出し文字色：#212121
  • トップ記事の説明#757575

サイドバーの編集

  • サイドバー背景色：白
  • サイドバー見出し：#212121
  • サイドバーボーダー：白

フッターの編集

  • フッター背景色：メイン
  • フッター上の区切り線：メイン
  • フッターウィジット背景色：メイン
  • フッターウィジット見出し：白
  • フッターウィジットボーダー：メイン

各ウィジェットの編集

  • プロフィールリンク文字色：#6495ed
  • プロフィール紹介文：#757575
  • *人気記事見出し：#757575
  • *人気記事スニペット：#212121
  • ラベル文字色：白
  • ラベル背景：サブ（濃）
  • ラベルボーダー：白
  • *注目の投稿：#757575
  • *アーカイブリスト文字色：#757575

本文の編集

  • パンくずリスト、タグ文字色：#757575
  • 周りのボーダー：白
  • h1見出しの色：#212121
  • h2見出しの色：白
  • h2見出しの背景色：メイン
  • h3見出しの色：#212121
  • h3見出しの点線色：メイン
  • h4見出しの色：#212121
  • 本文文字色：#212121

テーマデザイナーだけを使って色を変えてみた：アフター

テーマデザイナーで色を変えた後のサイト


うん！
自分のサイトっぽくなった！！

色を変えるだけでだいぶオリジナリティ出ますね！

では、今日はここまで。

0 件のコメント :

コメントを投稿

関連記事