技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

HOME > 花のやブログ > Dreamweaverのテンプレート作成方法2
2014/09/25HTML/CSS

Dreamweaverのテンプレート作成方法2

こんにちは、高橋です。
前回のDreamweaverのテンプレート作成方法の続きになります。

if文を使ってみる

dreamweaverでは、if文(条件分岐)が使えます。たとえば、どういったときに使うかというと・・・
トップページは1カラムで下層ページは2カラムのときなど、ページごとに多少デザイン等を変えたい場合です。

1.head内にパラメータを定義します

以下の画像の赤枠内のように記述します。

20140924_01

<!-- TemplateParam name="何か名前" type="boolean" value="false" -->
name type value
任意 text 文字列(日本語可)
number 数値
URL ファイル名・パス名・URL
color 色(名前および16進数のカラーコード)
boolean 真偽値(true/false)

実は、上の表のようにいろいろ定義できるのですが、今回はtype=booleanでの記述になります。

2.条件式を記述していきます

te02

たとえば、以下のように記述すると、パラメータ名「何か名前」でvalueが「true」の場合にIfの中身が記述されます。
以下のコードの場合だと「内容」が記述されるわけです。
パラメータがvalue=”false”の場合は何も起こりません。

<!-- TemplateBeginIf cond="何か名前" -->内容<!-- TemplateEndIf -->

|| や &&、 ! などの演算子や、JavaScriptのtest()メソッドやreplace()メソッドで正規表現を利用することが可能です。

3.elseも使えます

2ではifのみの使用でしたが、elseも使用できます。
でもelseとは書かないんですね・・・。

<!-- TemplateBeginMultipleIf -->
        <!-- TemplateBeginIfClause cond="条件式1" -->
        条件式1がマッチしたときの内容
        <!-- TemplateEndIfClause -->
        <!-- TemplateBeginIfClause cond="条件式2" -->
        条件式2がマッチしたときの内容
        <!-- TemplateEndIfClause -->
        <!-- TemplateBeginIfClause cond="true" -->
        どれにも当てはまらなかったときの内容
        <!-- TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->

こちらも先ほどと同じように、
|| や &&、 ! などの演算子や、JavaScriptのtest()メソッドやreplace()メソッドで正規表現を利用することが可能です。

実は私はelse文使ったことがないです。今後、試していこうと思っています。

終わりに

dreamweaverでテンプレートでif文も使えるようになると、大分コーディングが楽になります。
次回はテンプレート化されたbodyにページ毎にクラスを付ける方法をご紹介します!

DSC_0214

書いた人:takahashi

パート、主にコーディング担当しています。
ポ段・十段・師範です。剛力羅はできません。
2015.3 結婚しました。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ