【動画2本あり】後編では、サイト全体の配色と、文字のフォントの設定について説明しています。ここまでマスターすると、他の無料テーマを使う気がしなくなるはずです(笑)し、高価なページビルダープラグインを導入する必要性を感じなくなる方が多いと思います。

WR-4:テーマCustomify(カストミファイ)の使い方後編・配色と文字

◆ このサイトの配色について

 「どのような色を使うか?」気になるところだと思います。

 Customify では、選択できる色の組合せは無限大ですが、自分の好みの色ではなく「どのような雰囲気を出したいのか」で色決めをすることをお薦めします。

 このサイトでは、「落ち着き感」があるという理由でブルー系を使っています。

 でも同時に「冷たい感じ」もしますよね?。「暖かさ」を出すのであれば暖色系の色がよいでしょうし、優美さを出すならパステル系を選ぶなどなど、大切にしたいことをひとつ選ぶと良いと思います。

 文字色に関しては、「黒」ではなくグレーにしてあります。理由は、このサイトは文章中心になっていますので、見た目に真っ黒にならないようにするためです。また、黒だとどうしてもコントラストがきつめになってしまいます。

 思いをめぐらして色々と試してみるのは楽しい作業ですが、そこそこにしておきましょう。札幌Geezerは、色を組み合わせることによるデザインはできませんので、色数を少なくしているというのが正直なところですw。

◆ 配色の設定

・この動画(9分49秒)で学ぶこと

  • 背景色の設定
  • 色指定をする際の透明度の設定と注意事項
  • 使用目的別の文字色の設定
  • リンクホバーの意味と色設定

◆ 文字に関する設定

・この動画(9分39秒)で学ぶこと

  • 段落と見出しの意味とフォントサイズなどの設定
  • ベースでフォントサイズの指定の意味と他の文字サイズとの関係
  • フォントの太さの設定
  • パソコン・タブレット・スマホ別にフォントサイズを設定する方法
  • サイトタイトルのフォントサイズの設定
  • 見出しのフォントサイズの設定

◆ このレッスンの要点

  • 背景色を設定した場合には、ヘッダーとフッター部分の色の変化に注意すること
  • ベースで本文に使用する文字の大きさを指定すると他の文字が自動調整されること
  • 文字の大きさの調整は、パソコン・タブレット・スマホと別々に指定し確認すること
  • 見出しは文字の大きさを指定できるが、投稿の「章立て」の目的で使うこと