テーマの適用 その5 ヘッダー作成と配色の巻

[`evernote` not found]
Pocket

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加


まだ先方から店舗写真を受取っていないので、出来る範囲で進めていきます。




今回は「ヘッダーの作成」と「配色」について。


といっても、前回までにカスタムメニューは終わってるので、画像を編集しただけ。

店舗ロゴは業者さんに作ってもらってたらしいので、それだけ先に送ってもらいました。
(ゆくゆくは完成したサイトを公開するつもりなので、ここで画像も公開します。)

ロゴから店舗をイメージするに、ポップで明るい雰囲気なんでしょうね。
フォントも堅苦しくならないように、変更の必要もあるかもしれません。

そこはクライアントとよく話し合ってみたいと思います。








ヘッダー作成

まずは、実際に作ってみたヘッダー部分です。

とりあえずこんな感じになりました。



以下、5つに分けてます。




► h1

このテーマでは、青帯の部分がサイトのh1です。
なので、ここに重要な文言を記述してます。

ここは管理画面の「設定」で記述します。

レスポンシブのスマホサイズなんかを考えると、長くなりすぎはNGです。





► utility

ここはカスタムメニューで作成したutilityが表示されます。
デザインのくずれが起こる可能性もあるので、3つの設定が推奨です。

また、このutilityはタブレット以下の端末では表示されないので注意。





► 店舗ロゴ

準備した店舗ロゴを、logo.png」というファイル名で/imagesフォルダに入れると反映されます。
ffftpなどを利用すると便利です。

デフォルトでは、サンプルで作成したlogo.pngが入ってるので、削除するか、上書きしてご利用下さい。



► 電話番号の画像

この画像部分も、ロゴと同じです。

準備した画像を「h-tel.png」というファイル名で、imagesフォルダに上書き保存して下さい。





► h2

ヘッダーの真ん中の部分ですね。

ここは何かに使えるかもしれないと思って、短い文章を入れれるようにしてます。
サイトのh2なので、アピールしたい文言や、ロゴの補足などが良いと思います。

設定は【テーマ編集】 ⇒ 【header.php】で。

赤枠の3つめ。
ここの<h2>~</h2>の間に記入して下さい。

デザインの関係上、長くなり過ぎないようにしてください。







色の変更

今回は色の変更も少しやりました。

変更はstyle.cssからやります。

可能な限り変更しやすくするために、前半部分に「配色カスタマイズ」を用意してます。
これは、サイト全体の「色設定のみ」を集めたものです。

サイトの各場所の色を変更する時はここで行なって下さい。
基本的にそれ以外はさわらないように。


[`evernote` not found]
Pocket

Facebookコメント

コメントを残す