WordPressのテーマTwenty Twelveを使い、必要部分をカスタムしました。
元のテーマからそれほど大きなカスタムはしてないので、ほぼTwenty Twelveにデザインをくっつけた程度です。
１）テーマTwenty Twelveを適用した状態
これは、固定ページに表紙用の記事を入力し、設定で表紙に表示されるページをその固定ページに指定し、Twenty Twelveを適用させただけの状態です。
Twenty Twelveは、このようなシンプルなデザインなのでとてもカスタマイズしやすくて助かります。
２）管理画面の外観 ⇒ヘッダー で、ヘッダー画像を指定する
カスタムヘッダーを使わなくてもいいんですが、スマホ表示にも楽に対応するために使うことにしました。
左右が小さくなってしまいますが、デザイン重視で妥協しています。
もちろん、丁寧にやるなら、スマホ表示のプラグインなどをいれ、そちらにスマホ用のヘッダー画像を設定したほうがベストだと思います。
３）外観 ⇒メニュー で、グローバルナビを作っています
グローバルナビは、テキストにすることで、納品後お客様が自分でナビの順番を変えることができたり、固定ページが増えた場合でも対応できます。
図のように、外観 ⇒メニュー から位置を細かく設定すれば、好きな順番に設定することが出来て、子メニューも作れます。
また、画像ではなくテキストにすることでスマホでも変換しやすくしています。
４）テーマTwentyTwelveを複製して、一部変更し、有効化します
WordPressのテーマを作った方は分かると思いますが、
wp-content/tehmesの中に、twentytwelveというフォルダがあるので、
フォルダごとコピーし、名前を変更（半角英数）
そして、screenshot.pngを書き換えて、style.cssの頭にあるテキスト（テーマの名前）を変更し、
フォルダごと、wp-content/tehmesの中にアップします。
するとこの画面に新しいテーマが出てくるのでそれを有効化します。
その後、スタイルシートを修正していきます。
５）出来たのがこのトップページです 実際のサイトはこちら
グローバルナビは画像でなく、HTML5で作られています。
cssを変更するだけでこのくらいに変更することは可能です。
css3になってから、背景を角丸にできるようになったのでずいぶんデザインに幅が広がりました。
以前はこれをやりたかったら１つずつ画像を作らないとだめでした。
６）固定ページは、投稿と違い、時系列では並ばないので場所を固定することができます
WordPressを知らない方に、このサイトはブログで出来てるんですよというと、びっくりされますが、どうやらブログ=アメブロとかの無料ブログ という印象があるようで、
WordPressを使って独自にブログを設置すれば、固定ページが作れます。
ブログの記事は、いわゆる日付順に並んでいて、新しい記事が上にきて、古い記事はどんどん過去のページへ押し出されていきます。
でも固定ページは、普通にホームページビルダーなどでサイトを作るのと同じで、位置を固定させた静的なページが作れます。
ブログで作ったページでも、SEO対策上も不利ということはまったくなく、逆にブログツールのメリットをたくさんうけることができます。
７）ランディングページ風のながーいページもOK！
これも固定ページで作成しています。ブログツールでここまで出来ちゃうんですよ。
末尾にはちゃんと問い合わせフォーム（プラグインを利用）をおいて、クロージングのための仕掛けも。
アメブロやエキサイトなど太刀打ちできない最強ブログということがわかっていただけるかと思います。
末尾にはちゃんと問い合わせフォーム（プラグインを利用）をおいて、クロージングのための仕掛けも。
アメブロやエキサイトなど太刀打ちできない最強ブログということがわかっていただけるかと思います。
８）これはブログ（投稿）です
こちらは固定ページではなく、ブログ（投稿）です。
メニューの設定で、投稿の中のカテゴリ「お知らせ」だけがここに表示されるようにしています。
themeのファイルにWordPressのテンプレートタグをちまちまと埋め込みしなくても、これくらいのことは、簡単に管理画面からできるのでありがたいですね！
９）レスポンシブデザイン（スマホやタブレット対応）
レスポンシブデザインというのは簡単に言うと、１つのデータをいろんな端末で見ても誰でも平等に情報を伝えることができるデザインのことですが、Twenty Twelveはそれに対応しているので、
ご覧のように、ブラウザの幅によって、表示が変わっていきます。
iPadなどのサイズになると、メニューが段々に折り返しされ、
さらにiPhoneのサイズになると、ひとまとめにされた「メニュー」というボタンに切り替わり、
「メニュー」をタップすると、ナビが登場します。
サイドバーは記事の末尾に移動し、上下の移動にストレスを感じないスマホでは、とても読みやすいかと思います。
事例に使わせていただいたもりたけ布団店さんの紹介
お布団をどこで買いますか？イマドキの日本人は、ホームセンターか通販などで購入するかもしれませんね。
わたしもそうだったのですが、もりたけさんのサイトを作成するにあたって、取材していく中で
「考えてみたら一生の３分の１を過ごす布団を軽くみてはいけない！」
もしかしたら自分に合ってない布団やまくらを選んでしまって、肩こりや不眠の原因になってるかもしれないと思ったら安いのでいいかって思って適当に通販やホームセンターなどで買うのは、コワイことだなぁと思いました。
皆さん、安心・信頼の実績がある地元の布団屋さんを利用しましょう。
ふとん屋さんには、資格をもったアドバイザーの方がいて、
体に良い眠りのこととか、体調管理のこととか、かなり詳しく相談にのってくれます。
寝ている間に体調が良くなったら、たとえば枕が倍の価格したって、全然安いと思います。
自分にあった枕や布団、敷きマットを選んでもらうのってすごくいいですよ！
布団や枕やマットなどの常識も昔からどんどん進化していて知識はかなり変わっているそうです。
いつまでも「布団は真綿、打ち直しをして使うのが一番」って思っているおばあちゃんの気持ちは大事にしたいですが、
おばあちゃんの体がもっと体調良くなるんだったら、最新の良いおふとんを紹介してあげたいです。
ということで、飯田近辺にお住まいの方は、もりたけ布団店さんにぜひ行ってみてください。
長野県以外の皆さんは（＾＾）、お近くでまじめに良いお布団を提供している信頼のおけるふとん店に行ってみることをおすすめします
取材中のヒトコマより
羽布団の中の羽を入れ替えています
取材中のヒトコマより
まくらの中の詰め物をグラム単位で調整しています
わたしが作ってもらったオーダー枕を紹介します(^-^;)
0 件のコメント:
コメントを投稿