- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
ドキュメントにコンテンツを表示するための条件を設定する場合、Dreamweaver のオプション領域を使用します。
オプション領域は、テンプレートから作成されたドキュメントで、ユーザーが表示または非表示を設定できるテンプレート内の領域です。ドキュメントにコンテンツを表示するための条件を設定する場合、オプション領域を使用します。
オプション領域を挿入する際には、テンプレートパラメーターに特定の値を設定するか、テンプレート領域に "If...else" の条件ステートメントを定義できます。ここでは、簡単な true/false 演算を使用するか、複雑な条件ステートメントや式を定義します。オプション領域は、必要に応じて後で修正できます。定義した条件に基づいて、テンプレートユーザーは、テンプレートから作成されたドキュメント内のパラメーターを編集し、そのオプション領域を表示するかどうかを制御することができます。
複数のオプション領域を 1 つの指定パラメーターにリンクさせることができます。テンプレートから作成されたドキュメントでは、両領域は一単位として表示または非表示になります。例えば、"閉店大売出し" のイメージと販売価格テキスト領域を 1 つの販売商品として表示することができます。
オプション領域の挿入
オプション領域を使用して、テンプレートから作成したドキュメントにコンテンツを表示するかどうかを制御することができます。オプション領域には、次の 2 つのタイプがあります。
- 編集不能オプション領域では、テンプレートユーザーは特別にマークされた領域を表示または非表示にすることができます。ただし、コンテンツを編集することはできません。
オプション領域のテンプレートタブは、ifの後ろに続きます。テンプレートの条件セットに基づいて、テンプレートユーザーは各自が作成するページにその領域を表示するかどうかを定義します。
- 編集可能オプション領域では、テンプレートユーザーはその領域を表示または非表示に設定でき、さらに領域内のコンテンツも編集できます。
例えば、オプション領域にイメージまたはテキストが含まれる場合、ユーザーはそれを表示するかどうかを設定できるだけでなく、必要に応じてそれを編集することができます。編集可能領域は、条件ステートメントで制御されます。
編集不能オプション領域の挿入
-
ドキュメントウィンドウで、オプション領域として設定するエレメントを選択します。
-
次のいずれかの操作を実行します。
挿入/テンプレート/オプション領域を選択します。
挿入パネルの「一般」カテゴリーで、ドロップダウンリストからテンプレートを選択した後、「オプション領域」を選択します。
-
オプション領域の名前を入力します。オプション領域の値を設定する場合は「詳細設定」タブをクリックします。次に、「OK」をクリックします。
編集可能オプション領域の挿入
-
ドキュメントウィンドウで、オプション領域を挿入する位置に挿入ポイントを置きます。注意:
編集可能なオプション領域は、範囲を選択することによっては作成できません。領域を挿入した後で、その領域にコンテンツを挿入します。
-
次のいずれかの操作を実行します。
挿入/テンプレート/編集可能オプション領域を選択します。
挿入パネルの「テンプレート」カテゴリーで、「編集可能リピート領域」を選択します。
-
オプション領域の名前を入力します。オプション領域の値を設定する場合は「詳細設定」タブをクリックします。次に、「OK」をクリックします。
オプション領域の値の設定
オプション領域をテンプレートに挿入した後に、領域の設定を編集することができます。例えば、コンテンツの表示/非表示を決定する初期設定の変更、既存のオプション領域へのパラメーターのリンク、テンプレート式の修正などを行うことができます。
テンプレートパラメーターを作成し、テンプレート領域の If...else 条件ステートメントを定義します。ここでは、簡単な true/false 演算を使用したり、複雑な条件ステートメントや式を定義することができます。
「詳細設定」タブでは、複数のオプション領域を 1 つの指定パラメーターにリンクさせることができます。テンプレートから作成されたドキュメントでは、両領域は一単位として表示または非表示になります。例えば、"閉店大売出し" のイメージと販売価格テキスト領域を 1 つの販売商品として表示することができます。
また、「詳細設定」タブを使用して、オプション領域の値を評価するテンプレート式を記述し、その値に基づいてオプション領域の表示/非表示を切り替えることもできます。
-
ドキュメントウィンドウで、次のいずれかの操作を行います。
デザインビューで、修正するオプション領域のテンプレートタブをクリックします。
デザインビューのテンプレート領域に挿入ポイントを置き、ドキュメントウィンドウの下部にあるタグセレクターで <mmtemplate:if> というテンプレートタグを選択します。
コードビューで、修正するテンプレート領域のコメントタブをクリックします。
-
プロパティインスペクター(ウィンドウ/プロパティ)の「編集」をクリックします。
-
「基本」タブで、「名前」ボックスにパラメーターの名前を入力します。
-
「初期設定では表示」チェックボックスをオンにして、選択した領域がドキュメントで表示されるように設定します。このチェックボックスをオフにすると、初期設定値が false に設定されます。
注意:パラメーターに別の値を設定するには、コードビューでドキュメントの選択したセクションからそのパラメーターを検索し値を編集します。
-
(オプション)「詳細設定」タブをクリックし、以下のオプションを設定します。
オプション領域のパラメーターをリンクする場合は、「詳細設定」タブをクリックして「パラメーターの使用」を選択し、ポップアップメニューから、選択したコンテンツのリンク先となる既存のパラメーターを選択します。
テンプレート式を記述してオプション領域の表示を制御する場合は、「詳細設定」タブをクリックして「式を入力」を選択し、ボックスに式を入力します。
注意:入力したテキストの周囲に二重引用符が挿入されます。
-
「OK」をクリックします。
「オプション領域」テンプレートオブジェクトを使用すると、テンプレートのコメントがコードに自動的に挿入されます。テンプレートパラメーターは、head セクションで以下の例のように定義されます。<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
オプション領域が挿入される位置に、以下のようなコードが表示されます。
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
<!-- TemplateBeginIf cond="departmentImage" --> <p><img src="/images/airfare_on.gif" width="85" height="22"> </p> <!-- TemplateEndIf -->
これにより、テンプレートから作成されたドキュメントでテンプレートパラメーターを編集できるようになります。