Dreamweaver記事
サッポロビールにおけるテンプレート活用事例
目次
サッポロビールWebサイトのDreamweaverテンプレートはこうなっている
デザインビュー・編集可能領域
先ほどご覧いただいたビアファインのテンプレートです。
デザインビューによって、実際のページに非常に近いレイアウトで編集できることがわかります。また編集可能領域の項目名と枠線を見れば、どんな内容をどこに入力すれば良いかがすぐにわかります。
リピート領域
この4つのボタンが表示されている部分がリピート領域です。[+]ボタンと[-]ボタンで、ソースコードを崩すことなく項目を増減することができます。Webサイトを運用していく中で増減することがわかっている部分の全てに、この領域が設定されています。
Tips
リピート領域には現在の要素の順番を返す機能があるため、これを使って連番画像を自動で表示していくことが可能です。
応用すると奇数・偶数の判定もできるので、メニューの左右によってclass属性を付け替えることもできます(*1)。
また、[▲][▼]ボタンによって、リピート領域内での順番を入れ替えが行えます。このサイトではインデックスページ上のメニュー項目をリピート領域として設定し、順番を入れ替えることでページへのユーザー流入数の調整を行っています(*2)。
リピート領域内では、後述のテンプレートオプションが使えません。この領域内で要素のオン・オフを制御するには、リピート領域を入れ子にし、0個か1個かをリピート領域の増減で操作する方法があります。ただし、要素をオン・オフする方法が2種類存在することになってしまうので、使いどころは限られてきます(*3)。
テンプレートオプション（値の一括反映）
テンプレートオプションのひとつめの使い方として、値の一括反映があります。このテンプレートでは[修正]-[テンプレートプロパティ]の 03_タイトル に「サッポロビアファイン」と入力することで
- title要素
- パンくずリストの現在地
- ページタイトル画像のalt
という複数の個所に入力したテキストが反映されます。他のページをコピーして新しくページを作るときなどに起こりやすい修正漏れを防ぐことができます。
テンプレートオプション（要素のオン・オフ・切り替え）
テンプレートオプションのもうひとつの使い方として、要素の出現をコントロールする機能があります。[修正]-[テンプレートプロパティ]の 05_販売アラートは、0を入力すると非表示となり、1を入力すると製造終了版として赤枠の注釈リスト、2を入力すると新発売版としてオレンジ枠の注釈リストがそれぞれ出現します。
Tips
- 条件分岐は入れ子にできるため、この例のように成分表ブロックと成分表の両方を表示としたときだけ出現する、という使い方もできます。
- 数値による条件分岐だけではなく、チェックボックスによる単純なオン・オフや、今回は使用していませんが「文字列の判定」「カラーピッカー」など、多彩な入力を選択できます。
- テンプレートオプションの項目名は、先頭に連番を振ることでリスト上の順番を制御できます。ページ上で出現する順番に連番を振っておくとよいでしょう。
- 項目名の中に条件文を直接書き込んでおくと、あとから作業者が使用するときの理解の補助となり、有効です。
- 項目名に日本語を書く場合は cond="_document['項目名’]” という書式にすると文字列として扱われ、エラーを回避することができます。
