[Dreamweaver] オプション領域を極める!テンプレート上級編

公開日: : 最終更新日:2014/08/20 Dreamweaver, Web制作

オプション領域は、難しい!

これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹介してきました。

今回は、さらに上級編といえるオプション領域をマスターしましょう。

オプション領域とは?

オプション領域は、テンプレートから作成されたドキュメントで、ユーザーが表示または非表示を設定できるテンプレート内の領域です。ドキュメントにコンテンツを表示するための条件を設定する場合、オプション領域を使用します。

オプション領域を挿入する際には、テンプレートパラメーターに特定の値を設定するか、テンプレート領域に “If…else” の条件ステートメントを定義できます。ここでは、簡単な true/false 演算を使用するか、複雑な条件ステートメントや式を定義します。オプション領域は、必要に応じて後で修正できます。定義した条件に基づいて、テンプレートユーザーは、テンプレートから作成されたドキュメント内のパラメーターを編集し、そのオプション領域を表示するかどうかを制御することができます。

複数のオプション領域を 1 つの指定パラメーターにリンクさせることができます。テンプレートから作成されたドキュメントでは、両領域は一単位として表示または非表示になります。例えば、”閉店大売出し” のイメージと販売価格テキスト領域を 1 つの販売商品として表示することができます。

Adobeで上記のように説明されていますが、よくわかりませんねw
実際に見ていきましょう。

普通に挿入した場合

20140804_img01

パネル上から普通に挿入した場合、ソースは下記のようになります。

head内に

<!-- TemplateParam name="OptionalRegion1" type="boolean" value="true" -->

そして、オプション領域としたところに

<li><!-- TemplateBeginIf cond="OptionalRegion1" -->グロナビ1<!-- TemplateEndIf --></li>

このようなソースになり、テンプレートタグが使いされます。

これだけでは、何がなんだかわかりませんね。
これは、上のhead内の方が重要で、name=”OptionalRegion1″がvalue=”true”なら表示するという事です。
このvalueがfalseなら、グロナビ1という文字は表示されません。
そして、trueやfalseの値は、テンプレートを適用したhtmlファイルを開いた状態で上のメニューから「修正 > テンプレートプロパティ」を選択すると開かれるウィンドウで選択出来ます。

20140804_img02

上の画像のようにチェックが入っている状態、値が「真」になっている状態がtrueです。
falseの場合は、値が「偽」になります。

表示する内容を細かく設定する

例えば、グローバルナビゲーションが画像だった場合、そのカテゴリにいる時はオン表示でそれ以外はオフ表示にするということは普通にあることです。
そういう場合、僕自身もオプション領域に慣れていなかった頃は編集可能領域にして、リンクだけは編集可能領域の外に出して画像のみ変えるということをしていましたが、オプション領域では条件分岐ができますのでテンプレートとして管理出来てしまうんです。

<!-- TemplateParam name="gnavi01" type="boolean" value="false" -->
<!-- TemplateParam name="gnavi02" type="boolean" value="false" -->
<!-- TemplateParam name="gnavi03" type="boolean" value="false" -->
<!-- TemplateParam name="gnavi04" type="boolean" value="false" -->
<!-- TemplateParam name="gnavi05" type="boolean" value="false" -->

こうやって、まずはオプション領域のベースをhead内に記入します。
そして、html側ですが、下記のようになります。

<ul id="gnavi">
<li><a href="#"><img src="@@((gnavi01 == true) ? 'images/gnavi01_o.gif' : 'images/gnavi01.gif')@@" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="@@((gnavi02 == true) ? 'images/gnavi02_o.gif' : 'images/gnavi02.gif')@@" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="@@((gnavi03 == true) ? 'images/gnavi03_o.gif' : 'images/gnavi03.gif')@@" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="@@((gnavi04 == true) ? 'images/gnavi04_o.gif' : 'images/gnavi04.gif')@@" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="@@((gnavi05 == true) ? 'images/gnavi05_o.gif' : 'images/gnavi05.gif')@@" alt="" width="198" height="61" /></a></li>
</ul>

上記の@@()@@の中がオプション領域の条件分岐になります。
(gnavi01 == true) gnavi01の値が真ならば、?の後に来る’A’ : ‘B’が条件先の答えで、Aが真、Bが偽の時になります。

ですので、上記のオプション領域が適用されているhtmlでは下記のようになっています。

<ul id="gnavi">
<li><a href="#"><img src="images/gnavi01.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi02.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi03.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi04.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi05.gif" alt="" width="198" height="61" /></a></li>
</ul>

条件の基準がfalseなので(valueが全てfalseになっているから)全てBにあたる部分のみが入っています。
試しに、gnavi01をtrueにしてみましょう。

<ul id="gnavi">
<li><a href="#"><img src="images/gnavi01_o.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi02.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi03.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi04.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi05.gif" alt="" width="198" height="61" /></a></li>
</ul>

ちゃんとAにあたる部分に変化しました。
これがオプション領域です。

もうちょっと踏み込んでみよう!

実はこのオプション領域、指定できるものが一個だけではないんです。
例えば、gnavi01がtrueならこことここを変えて!みたいなことも出来るんです。
試しにやってみましょう。

画像がマウスオーバーした時にオン画像と変わるようにclassを挿入したいと思います。

<ul id="gnavi">
<li><a href="#"><img src="@@((gnavi01 == true) ? 'images/gnavi01_o.gif' : 'images/gnavi01.gif')@@" alt="" width="198" height="61"@@((gnavi01 == true) ? '' : ' class="hover"')@@ /></a></li>
<li><a href="#"><img src="@@((gnavi02 == true) ? 'images/gnavi02_o.gif' : 'images/gnavi02.gif')@@" alt="" width="198" height="61"@@((gnavi02 == true) ? '' : ' class="hover"')@@ /></a></li>
<li><a href="#"><img src="@@((gnavi03 == true) ? 'images/gnavi03_o.gif' : 'images/gnavi03.gif')@@" alt="" width="198" height="61"@@((gnavi03 == true) ? '' : ' class="hover"')@@ /></a></li>
<li><a href="#"><img src="@@((gnavi04 == true) ? 'images/gnavi04_o.gif' : 'images/gnavi04.gif')@@" alt="" width="198" height="61"@@((gnavi04 == true) ? '' : ' class="hover"')@@ /></a></li>
<li><a href="#"><img src="@@((gnavi05 == true) ? 'images/gnavi05_o.gif' : 'images/gnavi05.gif')@@" alt="" width="198" height="61"@@((gnavi05 == true) ? '' : ' class="hover"')@@ /></a></li>
</ul>

この後ろの方の条件文がクラスを追加するかしないかというものです。
?のあとの ‘ ‘ は何もしないということになります。
以上を踏まえて、先ほどのhtmlに適用するとこうなります。

<ul id="gnavi">
<li><a href="#"><img src="images/gnavi01_o.gif" alt="" width="198" height="61" /></a></li>
<li><a href="#"><img src="images/gnavi02.gif" alt="" width="198" height="61" class="hover" /></a></li>
<li><a href="#"><img src="images/gnavi03.gif" alt="" width="198" height="61" class="hover" /></a></li>
<li><a href="#"><img src="images/gnavi04.gif" alt="" width="198" height="61" class="hover" /></a></li>
<li><a href="#"><img src="images/gnavi05.gif" alt="" width="198" height="61" class="hover" /></a></li>
</ul>

一番上はtrueなのでクラスが追加されていません。
それ以外はfalseなので、ちゃんとクラスが追加されています。

まとめ

いかがでしたでしょうか?
多少難しいとは思いますが、是非チャレンジしていただきたい機能です。
細かい条件分岐をするには、テンプレートタグを手で入れなければいけませんが、テンプレートをしっかり作り込む事で後からの修正が楽になったり、管理がしやすくなったりしますのでめげずに頑張りましょう!

条件分岐が失敗していたり、タグの変更によってテンプレートを適用しているhtmlファイルが壊れる事があります。
ですので、本当に最初の段階でしっかり作り込む事が大切です。

ad

関連記事

[HTML] 初心者を脱却するためのHTMLの心構え!

デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[Dreamweaver] 不要な_notesを作成させない方法

みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[CSS] 複数のbackground-imageの設定方法

マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]

完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。

記事を読む

[CSS] animationを使ってみる!

色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑