サンプルサイト – pâtisserie la palette

先月の concrete5 関西ユーザーグループ 第21回勉強会で、デザインカスタマイズについてお話させていただきました。
その時のおさらい記事や使用したスライドは『concrete5 のデザインカスタマイズについて関西ユーザーグループ 第21回勉強会でお話しましたよー』にアップしておりますので、ご覧くださいませ。

昨年は、はじめての concrete5 というシリーズ記事で、和菓子屋さんのサイトを作りました。
で、今年はケーキ屋さんです 😀

concrete5 関西ユーザーグループ 第21回勉強会用に制作したサンプルサイトをベースに、「とりあえず、これくらいのボリュームのサイトなら私でも作れるかな？」と思ってもらえるような記事を書けたらいいかなと考えておりますが、記事の投稿は不定期になると思いますのでお許しを。
気がつけば、『ケーキ屋さんのサイトを作ってみよう！』というシリーズになっているかも知れませんが、その場合でも前回よりも短くまとめてみたいなぁと、思っております。
前回は、ナンダカンダ書いてるうちに10回のシリーズになってしまいましたが…

私の場合、concrete5を学ぶ上で『ページタイプ』を理解するのが一番難しかった気がします。
といっても、あくまでデザイナーの視点ですのでプログラム的なことは、除外しております 🙂
勉強会当日もやはり『ページタイプ』がわかりづらいという雰囲気がありました。
ということで、もう一度『テーマのテンプレート』と『ページタイプ』のおさらいから…

テーマのテンプレートを理解する

まず、テンプレートに関しては『ケーキ屋さんのサイト』ではなく、できるだけシンプルな HTML の方がいいと思いましたので、Initializr – Start an HTML5 Boilerplate project in 15 seconds! を使って説明します。
実際に『ケーキ屋さんのサイト』でも Initializr をベースにサイトを構築しています。
Initializr については、HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則 | ゆっくりと…が、わかりやすく解説されてると思います。

HTML5 Boilerplate, Initializr | シンプルな設定にしています。

この設定をダウンロードしてブラウザで表示したのが、下の画像。

Initializr のサンプルサイト

HTML のコードは、

[html]

[/html]

上記の HTML ファイルを concrete5のテーマ・テンプレートにするには、まず『エリア』をどのように設定するかを考えます。
この『エリア』というのは、

concrete5の基本知識 :: concrete5 Japan 日本語公式サイト

エリアとは、ページの中の特定の編集可能な領域のことを言います。例えば、標準でインストールされたconcrete5のテーマには、「ヘッダーナビ」「ヘッダー」「メイン」「サイドバー」という5つのエリアが存在しています。

また、エリアごとに権限を個々に設定する事も可能で、ユーザーによって、特定のブロックのみの追加や、ユーザーごとに閲覧や編集の権限を許可する事が出来ます。

現在のバージョンのデフォルトテーマである『Greek Yogurt』では、ちょっとエリア名が変っているようで『Site Name』、『Header Nav』、『Header Image』、『Main』、『Sidebar』となってます。

つまり、『エリア』の設定というのは、実際のページを作成するときの編集可能な領域である『枠組み』を設定するということ。
先ほどの『Initializr のサンプルサイト』だと、『h1.title』というサイトの名前、ヘッダー部分のナビゲーション、『article』の記述がある『左のカラム』、『aside』の記述がある『サイドカラム』、そして『フッター』を編集可能な領域である『エリア』に設定すればいいことがわかります。

エリアを設定してみる

これを先ほどの HTML のコードに設定してみると、このようになります。
[html highlight="25,27,36,40,48"]

[/html]

これを concrete5のテンプレート（default.php）にすると...
[html highlight="27,28,29,30,32,33,34,35,44,45,46,47,51,52,53,54,62,63,64,65"]

[/html]

上記の『エリア』のうち、『Site Name』、『Header Nav』、『Footer』が『グローバルエリア』、『Main』、『Sidebar』を『エリア』に設定しています。
『グローバルエリア』というのは、通常の『エリア』と同じように管理画面から編集が可能ですが、すべてのページに表示されます。
つまり、個々のページや『ページタイプ』ではなくテンプレートに依存しますので、修正をするとすべてのページに影響します。
ですので、サイトのロゴやナビゲーション等は、『グローバルエリア』に設定するのが一般的ではないでしょうか。

1行目の
[php]

[/php]
は、おまじないだと思って必ず記述してください。
10行目と71行目の
[php num=10]

[/php]
[php num=71]

[/php]
も忘れずに！
メインのスタイルシートは、
[html num=16]
[/html]
というように、その他のスタイルシートや JavaScript などは、
[html num=69]

[/html]
のようにパスを指定します。
ただし、jQuery は読み込まないようにしてください。
すでに concrete5が使用していますので、2重に読み込んでしまうと正しく動作しなくなります。

また、デフォルトテーマの『Greek Yogurt』のように、ヘッダー部分とフッター部分を切り分けて別ファイルにすることもできます。

header.php
[html]

[/html]

WordPress のテーマ制作をしたことがある方であれば、このように別ファイルを読み込む方法はご存知ではないかと...
また、WordPress のように『Sidebar』部分を別ファイルにする方法もあると思います。
このように編集可能にしたい領域を『グローバルエリア』または『エリア』として設定したファイルが、concrete5の基本的なテーマ・テンプレートです。
必要であれば、各ページのヘッダーに画像を表示する『Header Image エリア』を設定したり、『メインエリア』を『Main Upper エリア』、『Main Lower エリア』というように上下の2段組にすることもあるかも知れません。
先ほども書きましたが、concrete5のテーマ・テンプレートは『枠組み』を設定するだけです。
デザイン・コーディングができ上がっている前提ですが、よほど複雑なデザイン・コーディングでない限り制作時間は30分〜1時間くらいで完成すると思います。

ということで、テーマのテンプレートの作成方法は理解できましたでしょうか？
テンプレートの作成自体は難しくないと思いますので、是非作ってみてください。
あと、テーマのつくり方 :: concrete5 Japan 日本語公式サイトに、ディレクトリやテーマファイルについて詳しく書いてありますので、こちらも是非！！

ページタイプを理解する

ここからが、今回のポイント！
確かに『ページタイプ』って、ややこしい...
でも、『ページタイプ』がわかると、一気に concrete5のテーマ作成やデザインカスタマイズの理解が深まると思います。

ということで、まずはテーマファイルの最小構成。

最小構成ファイル

この他にテキストエディター用の『typography.css』や『header.php』、『footer.php』などのファイルを必要に応じて追加します。
詳しくは、簡単なテーマの作り方・クイックリファレンス（動画付き） :: concrete5 Japan 日本語公式サイトをご覧ください。

この構成のテーマでは、『default.php』がテンプレートファイルになります。（『view.php』もテンプレートファイルですが、『ログイン画面』や『ユーザー登録ページ』などのシングルページ用なのでここでは無視してください）
先ほど作った『header.php』にヘッダー画像を表示できるように『エリア』を追加します。
[html highlight="38,39,40,41,42,43"]

[/html]
ここでは、『ページ A』〜『ページ E』のわずか5ページの小規模サイトを想定してみます。
ヘッダー部分とフッター部分を『グローバルエリア』に設定していますので、各ページ共通の表示です。
その他を『エリア』に設定しています。
当然、『メイン』にはそれぞれのページのコンテンツが入るわけですが、『ヘッダー画像』と『サイド』も共通のコンテンツを想定しています。

ページとページタイプ、テンプレートの関係-01

ここで、「ヘッダー画像やサイドのコンテンツが共通なら『グローバルエリア』に設定すればいいのでは？」と疑問に思う方がおられると思います。
確かに、共通のコンテンツであれば『グローバルエリア』として設定すれば、すべてのページに反映されます。
でも、例えば「ページ A のヘッダー画像だけ変更したい」、「ページ E だけ、サイドにバナーを追加したい」という要望があった場合、『グローバルエリア』では対応できません。

グローバルエリアでは対応できない

トップバーの『編集』から『新規ページ』を選択・作成すると、下記のようなグローバルエリア以外は何も記入されていない空の状態の入力画面になります。
5ページほどしかないのであれば各ページにヘッダー画像を画像ブロックを使って追加すれば OK なのですが、やっぱりページを追加する度にヘッダー画像を追加するのも面倒です。

ページ数が少なければ各ページで追加してもかまわないけどやっぱり面倒！

そこで、重宝するのが『ページタイプ』の『デフォルト』設定。
トップバーの『管理画面』から『ページタイプ』を選択して、『デフォルト』をクリック。

ページタイプのデフォルトをクリック

ページタイプを編集モードにして、『Header Image エリア』に画像ブロックを使って画像を追加。

ページタイプの『Header Image エリア』に画像を追加

これで、『ページタイプ』の『右サイドバー』を選択して新規ページを作成すると、最初からヘッダー画像が設置された状態になります。
また、『グローバルエリア』ではありませんので、先ほどの例のように『ページ A』だけヘッダー画像を変更したい場合は、『ページ A』のヘッダー画像を変更すれば OK です。

この例では、ページは5ページありますが『ヘッダー画像』と『ページタイプ』、『テンプレートファイル（default.php）』の関係は、1対1対1です。
では、各ページそれぞれに違うヘッダー画像を設定したい場合はどうすればいいのでしょう？

各ページ違うヘッダー画像を設定したい

先ほどは、『右サイドバー』という『ページタイプ』の『デフォルト』でヘッダー画像を設定したので、今回は『ページ A』〜『ページ E』の5種類の『ページタイプ』を作って、それぞれの『デフォルト』にヘッダー画像を設定すればいい。
それほど難しくないですよね 🙂
ただし、ここでよく勘違いするのが、『ページタイプ』の数だけ『テンプレートファイル』も必要だと思ってしまうことです。
すべてのページのレイアウトが同じであれば、いくつ『ページタイプ』を作っても『右サイドバー』と同じテンプレートファイルの『default.php』だけで OK です。
新たにテンプレートファイルを作る必要はありません。

『エリア』のレイアウトが同じであれば基本的にはテンプレートファイルはひとつ

また、『ページタイプ』の『デフォルト』機能を使って、新規ページ作成時の『入力フォーマット』としても設定することが出来ます。

商品詳細ページの『メインエリア』に『画像ブロック』と『記事ブロック』を設定しておく

例えば、このようなサイトの場合では『商品詳細ページ』の『ページタイプ』の編集モードで『メイン・エリア』に商品写真用の『画像ブロック』と商品スペック用の『記事ブロック』を設定しておけば、ページの追加作業がスムーズにおこなえるのではないでしょうか。
この場合でも、『エリア』のレイアウトは他のページと同じですので、テンプレートファイルは『default.php』で対応できます。

しかし、ページ数が少ないこのような構成はちょっと現実的ではありません。
もう少し現実的な場合を考えてみましょう。

現実的な構成のページとページタイプ、テンプレートファイルの関係

テンプレートファイルが、3つになっています。
ホーム（トップページ）は、『ホーム』という『ページタイプ』で、『ハンドル』が『home』、テンプレートファイルが『home.php』。
商品ページは、『商品ページ』という『ページタイプ』で、『ハンドル』が『products』、テンプレートファイルが『products.php』。
ニュースページは、『ニュース』という『ページタイプ』で、『ハンドル』が『news』、テンプレートファイルは『default.php』。
会社概要などその他のページは、『右サイドバー』という『ページタイプ』でハンドルが『right_sidebar』、テンプレートファイルが『default.php』。

ページタイプが3種類

すでにお気付きの方もおられると思いますが、『ホーム』と『商品ページ』は『ページタイプ』のハンドル名と『テンプレート』のファイル名が同じになっています。
つまり、『ページタイプ』にその『ページタイプ専用のテンプレートファイル』を適用させたい場合は『ページタイプのハンドル名』+『.php』というテンプレートファイルを作成すれば OK です。
例えば、ニュースのページではページタイトルを自動的にメインカラム上部に表示させたいときは、『news.php』というファイルを作り該当箇所に下記のコードを記述します。
[php gutter="false"]
getCollectionName(); ?>
[/php]
そうすれば、『ニュース』という『ページタイプ』を選択すれば『news.php』が適用されますので、タイトルが自動的に入るようになります。

『ページタイプ』の『ニュース』用に『news.php』を適用させる

テーマのつくり方 :: concrete5 Japan 日本語公式サイトにも『構成ファイル』として『ページタイプ』と『テンプレートファイル』の説明がありますので、一度ご覧ください。

『ページ』と『ページタイプ』、『テンプレート』の関係が理解できましたでしょうか？
『ページ』を作成するときは必ず『ページタイプ』を選択しないといけませんが、『ページタイプ』と『テンプレートファイル』の関係は、必ず1対1になっているわけではありません。
『default.php』で複数の『ページタイプ』に対応することもあれば、『ページタイプのハンドル名』と『ページタイプのハンドル名.php』で専用のテンプレートファイルを適用させることもできます。

このように『ページタイプ』と『テンプレートファイル』の関係や『ページタイプ』の『デフォルト』機能を理解することが、concrete5のテーマ作成やカスタマイズの第一歩だと思っていますので、是非とも頑張って覚えてくださいね。
そういう私も最初はよくわからなかったんですけどね... 😉

いやぁ〜、長文になってしまいましたね。
申し訳ない。
まぁ、コードや画像もあるので文字量としては「それほどでもないかなぁ〜」と思ったりしているのですが、やっぱり多いかな... 😀

というわけで、『テーマのテンプレートとページタイプのおさらい』でした。
次回は、サンプルサイトを使って解説したいと思います。

ではでは。

concrete5 公式活用ガイドブック (Web Designing BOOKS)

posted with amazlet at 14.05.06
猪上 博史 Katz Ueno 榊 友哉 佐々木 多生 中根 紳一 菱川 拓郎 吉川 智久
マイナビ (2010-08-05)
Amazon.co.jp で詳細を見る