アーティクル（オンラインショッピング）

アーティクル（オンラインショッピング）（アーティクル（オンラインショッピング））は、オンラインショッピングの動的ページの上部にある画像べた貼りなどで作られたやつのこと。タカシマヤ通信販売のアーティクルとは作り方が違うので注意。

概要

オンラインショッピングの動的サーバはPHPで動いており、HTMLのソースを貼り付けたarticle.txtという名前で保存したテキストファイルを読み込ませて表示させる。
技術的にはPHPのSmarty（スマーティ）というテンプレートエンジンを用いて、article.txtをSmartyのテンプレートとして画面表示させている。

実際の仮アップの手順

1.article.txtを作る。
2.WinSCP(SSH)で動的サーバにアップする。
3.本サーバに画像をアップしてもらう。
4.テストサーバ上で確認

article.txtの実例

画像ベタ貼り系

hタグなどで囲います。alt,titleを忘れずに。

{literal}
<div>
<h2><img src="画像のパス" width="548" height="251" alt="altの内容" title=""></h2>
</div>
{/literal}

コーディング系

CSSを使用。IDはエリアによって違います（bottomArticleAreaなど）

{literal}
<style tyle="text/css">
<!--
#article-area {
	border:3px solid #dcbc9e;
}
#article-area .desc-area {
	padding:10px 12px;
}
#article-area .desc-area .logo {
	float:right;
	margin:0 0 10px 10px;
	display:inline;/*ie bugfix*/
}
-->
</style>
<h2><img src="画像のパス" width="" height="" alt="ピックアップブランド ロイスダール" title=""></h2>
<div class="desc-area clearfix">
<p class="logo"><img src="画像のパス" width="180" height="108" alt="ロイスダール ロゴ画像" title=""></p>
<div class="lead">
<h3><img src="画像のパス" width="325" height="60" alt="親しみ易い食感を追求した、愛のこもった洋菓子" title=""></h3>
<p>1923年創業。ヨーロッパの伝統ある製法を守りながら親しみ易い食感を追求しております。</p>
<p>17世紀のヨーロッパを代表する風景画家“サロモン・ファン・ロイスダール”の名にちなみ、愛のこもった洋菓子をお届けいたします。</p>
<p>ロングセラーの<a href="リンク">アマンドリーフ</a>は、生地を丹念に丁寧に練り上げ、じっくりと焼き上げるロイスダール独自の製法を守り続けています。</p>
</div>
</div>
{/literal}

注意点

画像名について

新規のものについてはなんでもよい。
一度本アップが完了している場合は、後ろに_YYMMDD（例：_070713）のように日付をつけてやること。
画像が本サーバ上にあり、テストサーバのアーティクルも本番のテストサーバ上のアーティクルも同じ画像を読み込んでいるため。

CSSやJavaScriptの記述をする際の注意点

Smartyのテンプレートでは、タグをくくるために{}を使用している（例：{$smarty})。
この括弧はCSSやJavaScriptなどでも使用するため、そのままではCSSやJavaScriptをテンプレート上に記述することができない。
そのため全体を{literal}{/literal}で括ってやる。Smartyの仕様上、このタグで括ってある範囲はSmartyのタグがないものとみなされるため、CSSやJavaScriptの記述をすることが可能となる。