Dreamweaverのテンプレート機能について

突然何を！？

とお思いになられるかもしれませんが、お昼休みに画面に向かいお弁当を食べながら書き連ねてみましょう。

Adobe Dreamweaver はウェブサイト制作用のソフト。どうやらウィークックナビさんでもご使用になられている模様です。DW、その便利な機能をお昼休みに書ける範囲でご紹介したい。すでにご存知で、事情があって利用されていないなら読み飛ばしてください。

ウィークックの特徴は１週間まとめづくりですが、普通の人なら「美味しそうなメニューをちょっと試してみてから、、、」というパターンが多いかと思われます。ゆえに単独レシピページの訴求効果は大きいので活用しない手はない。ですが現在、単独レシピページまで十分なメンテナンスの手が回っていない状況とお見受けしました。そこで毎週の更新の手間が少しでも軽くなるDWのテンプレート機能を最大限につかってみましょう。

とりあえず昼休みも少ないので簡単にいうと、

テンプレート（例えばTemplates/recipe2.dwt）のhead内に

<!-- TemplateParam name="recipe_Title" type="text" value="" -- >

と一行入れ、43行目〜

<div class="header2">
<!-- InstanceBeginEditable name="recipe_title" -->
    <h1>ほうれん草と牡蠣のグラタン</h1>
<!-- InstanceEndEditable -->  
    <div class="btn_area">

と記載されているような、recipe_Titleのオプション領域をやめて、
＠＠(recipe_Title)＠＠とします。こうです。

<div class="header2">
<h1>＠＠(recipe_Title)＠＠</h1>
    <div class="btn_area">

＠＠(recipe_Title)＠＠と記述するところが、全部同じ文字が入ることになりますので、meta title、meta kieywords、metaDscription、写真のaltにも使えます。同様に、写真のファイル名もテンプレートで管理しておくと良いと思います。私がよく使うのは、短ページのID番号をページファイル名と画像ファイル名を共通にして管理し、

等にして、ページ内の表示画像だけではなくてヘッダーのpropertyにも設定します。

<title>@@(recipe_Title)@@｜1週間の献立はウィークックナビ</title>
<meta name="Description" content="ウィークックナビの@@(recipe_Title)@@のレシピ">
<meta name="Keywords" content="@@(recipe_Title)@@,段取り上手,美味しい,簡単,使い切り,1週間,献立,レシピ">
<meta name="author" content="ウィークックナビ">

<meta property="og:site_name" content="1週間の献立はウィークックナビ" >
<meta property="og:title" content="@@(recipe_Title)@@" >
<meta property="og:image" id="metaOpenGraphImage" content="http://www.---.com/recipe/img/@@(recipe_ID)@@.jpg" >
<meta property="og:url" content="http://www.-----.com/recipe/@@(recipe_ID)@@.html" >

こんな感じでしょうか。

ページ作成の際は　挿入→テンプレートプロパティで設定します。
現在はレシピのページ番号と写真のファイル名が違うようですので、パラメーターは画像のphoto_IDと、保存フォルダのrecipe_ID等にしておくとよいかと思います。こうすると更新ミスもないので一石二鳥。

ということで、３７行目の</head> のうえに以下３行。

オプション領域、「doctitle」から全部出して、

<title>@@(recipe_Title)@@｜1週間の献立はウィークックナビ</title>
<meta name="Description" content="ウィークックナビの@@(recipe_Title)@@のレシピ">
<meta name="Keywords" content="@@(recipe_Title)@@,段取り上手,美味しい,簡単,使い切り,1週間,献立,レシピ">
<meta name="author" content="ウィークックナビ">

<meta property="og:site_name" content="1週間の献立はウィークックナビ" >
<meta property="og:title" content="@@(recipe_Title)@@" >
<meta property="og:image" id="metaOpenGraphImage" content="../../picture/@@(photo_ID)@@.jpg" >
<meta property="og:url" content="http://www.weekcook.jp/recipe/@@(recipe_ID)@@/index.html" >

43行目〜は

<div class="header2">
<h1>＠＠(recipe_Title)＠＠</h1>
    <div class="btn_area">

51行目〜は

<div class="photo"><img src="../../picture/@@(photo_ID)@@.jpg" alt="@@(recipe_Title)@@" /></div>

@@(〜〜)@@で表示させる部分は、当然ですがオプション領域からは外さないといけませんので、自由度は下がります。使用する場面は注意するといいと思います。

うぜえ奴と思われてるでしょう。だがしかし、老婆心で書き留めました。

簡単すぎる説明で失礼いたしました。休憩終了10分前。お弁当箱洗って午後がんばりましょうぜ。

----------------------------2/6追記---
ついでと言ってはなんですが、  のしたの行に、

<footer style="text-align:center;">
  <a href="../../"><img src="../../../images/page_logo.png"></a>
</footer>

も入れておくと、いいと思います。Tenplatesからのリンクは適宜変更なさってください。

おいしく日記

ウィークックナビさんを実践してほぼ毎日体験レポート。一週間の献立をまとめ作って時短炊事！

Dreamweaverのテンプレート機能について