今回はちょっと実践的なBLOGです。
目次
habakiri
habakiriはWordPressのテーマです。
特徴として
- 柔軟なカスタマイズ性
- Bootstrapを使っていてレスポンシブ対応（スマートフォン対応）
- その他もろもろ
のステキなテーマです。
このテーマを使って以下のホームページを構築してみます。
サンプル要件
制作の例として
- 建築デザイン会社 「ヨキデザイン」
- ホームページが古くなったので今風にしたい
- ブログはしないけど制作物件を追加していきたい
- 明るい感じにしてほしい。緑ベースで。
という要件にします。
追加条件として
- ロゴはすでにある（データで大きいサイズがある）
- 会社案内等は古いものの内容で
- 制作物件は写真あり
とします。
これらは第一回目の打ち合わせで聞き取りが済んだものとします。
制作工程１ 構成
それでは制作に入ります。まずはサイトマップ。
基本的な構成として
- Topページ（ホームページ）
- 会社案内
- 事業案内
- お問い合わせ
- ブログ（物件紹介）
の５ページ、ブログはどんどん追加できるものとします。
制作工程２ 枠を決める
ホームページの大体の枠を決めます。
A.サイドバーなし
サイドバーなしです。
今回のように内容が少ない場合はこのパターンが適しています。
B.サイドバーあり（右側、左側）
EC（通販サイト）などに多い形です。
店舗様で、商品を多数掲載したい場合にも使います。
今回はA.サイドバーなしを採用します。
製作工程３ サンプルの作成
第二回目の打ち合わせまでに、サンプルを作成します。habakiriは色調も変えられるので大活躍します。
とは言ってもカスタマイズ項目にないような変更ももちろん出るので、とりあえず子テーマを作成します。
habakiri-child 子テーマの作成
WordPressにテーマhabakiriをインストールその後、FTPでテーマのフォルダに子テーマをアップロードします。
子テーマは一応habakiri-childにします。（この規則は今はちがってもOKみたいです）
必要ファイルはとりあえずstyle.cssのみ
内容は
/*
Theme Name: habakiri-child ヨキデザイン用
Description: Habakiri の子テーマです ( テーマの説明 )
Author: ヨキワークス
Author URI: https://joki-works.com ( 作者のURL )
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: habakiri
*/
これでOK。本来functions.phpにスタイルの継承を記述しなくてはいけませんが、habakiriはなくてOKなのです。
style.cssを記述したら先程のフォルダにアップロードします。
子テーマに切り替え
忘れずに子テーマにまず切り替えます。そうしないと泣きを見ます。
ロゴをアップロード
ロゴとホームページの色調を合わすため、まずロゴをアップロードします。
依頼側がロゴの色等にこだわりがない場合、変更もします。
今回このようなロゴを用意していただきました。とりあえずはめ込みます。
それなりに見えますね。
ページを作成
とはいったもののやはりB.グローバルメニューがとTOPページがないとイメージが湧きません。
作りましょう。WordPressでは固定ページで各ページを作ります。
固定ページのレイアウトはPageBuilderでゴリゴリカスタマイズできます。
今回作るページは
- Topページ（ホームページ）
- 会社案内
- 事業案内
- お問い合わせ
の４ページ。ブログ（物件紹介）は一旦忘れておきます。
ちょっとレイアウト崩れてますが、こんな感じになります。メニューの字ちっさ。
全体調整
では調整していきましょう、
TOPの黒帯
habakiriの機能で各ページにヘッダー画像や帯を出すことができません。今回は使わないので切ります。
カスタマイズ、設定からページヘッダーを表示 いいえ！
ヘッダーとグローバルナビを２行に
レイアウト、ヘッダーを２行に！
グローバルナビの字を大きく！
レイアウト、グローバルナビで変更します。
色調の調整
http://paletton.com/ こういうツールで作ります。
今回明るい緑なのでグリーっと回して、
こんな感じに決定
これをもとに配色を調整します。
なかなか整ってきました。
この後各ページの調整を行ってサンプル作成終了
２回めの打ち合わせに臨みます。
