終了ページまとめ
終了ページ
タカシマヤ特集の終了ページ
※サイトマップ＞タカシマヤの母の日 などを参照のこと
※関連特集のメニューがあるものも対応
[end_page]について
shopping以下にend_pageというフォルダがあります。
| [end_page] | →終了ページの共通CSSや画像置き場 |
| ├─common | →共通して使えるもの |
| │ ├css(end_base.css) | →基本的に必要なCSS |
| │ └img | →基本的に必要な画像 |
| └─sample.html | →終了ページのコーディングサンプル |
使用する画像やCSSが変われば更新してください。
作成方法
1≫end_page\img を参照し、新しい画像はスライスしておくこと。
※カテの画像など、もし今後常用する画像が変われば[img]に入れておいてください。
2≫/shopping/end_page/common/css/end_base.css が終了ページの共通CSSになるので、読み込みます。
<head> <link rel="stylesheet" type="text/css" href="/shopping/common/css/default.css"> <link rel="stylesheet" type="text/css" href="/shopping/common/css/contents_base.css"> <link rel="stylesheet" type="text/css" href="/shopping/end_page/common/css/end_base.css"> <script type="text/javascript" src="/js/default.js"></script> <script type="text/javascript" src="/common/script.js"></script> </head>
終了ページに必要なCSS/JSは揃っているので、以上で良いと思います。もし必要があれば適宜調整のこと。
3≫必要な部分はsample.htmlを参照すると楽かもしれないです。
各クラスにpaddingやmarginがついているので、とりあえずpaddingやmarginは指定しないで作ってみたほうが良いかもしれません。
<!-- top-img --> <p class="txt-end"><em>～クリスマス終了のお知らせ～</em></p> <h2>＜メインイメージ＞</h2> <!--/ top-img /-->
emタグで囲まれたところは赤文字です。end_base.cssを読み込んでいる時ににtxt-endを指定すると#fcb1b1;の5px実線で囲まれます。
4≫母の日などと一緒の形なら、ギフトやフードのカテリンクだと思います。
複数段になる場合でも、クラス：cate-wrapにmargin-top:15px;があるのでそのまま積みます。
5≫たまに関連特集というのがあります。
バナーのところは文言とバナーが更新になると思います。
他にもリンク先など変更あれば適宜修正してください。
6≫オンラインショッピング会員登録 クラス：banner
最近のものは特についてます。
バナー自体が変わることもありえるので、その時は同じ名前で更新してください
7≫左下の関連リンク クラス：each
父の日⇔母の日、お中元⇔お歳暮 など対になるものはリンクします。
特に指定の無い場合はいりません。
定型のものについては以上です