アークスグループ事業会社各社

Webサイト編集マニュアル

株式会社東光ストア様http://www.arcs-g.co.jp/group/toukou_store/

◆Ｃｏｎｔｅｎｔｓ（目次） …1

◆ 【重要】編集の際の注意事項 …2

◆編集可能なページ・部分 …3

○トップページ …4

○トップFlashの内容変更（画像変更） …5

○トップFlashの内容変更（設定変更） …6

○おすすめ情報（カタログギフト等） …7

○サイドバー・バナー部分 …8

○サイドバー・バナー部分 事業会社レイアウト用 …9

○サイドバー・バナー部分 店舗レイアウト用 …10

○店舗情報Flashの内容変更（画像変更） …11

○店舗情報Flashの内容変更（設定変更） …12

○採用情報・各社独自ページ …13

Contents

CSS Javascript等について（上級者向け注意事項）

htmlファイルに直接javascriptを記述すると、システム障害の原因となります。

新たなjavascriptを追加する場合は、スクリプト記述を外部ファイルとして読み込むようにしてください。

■Javascriptについて

CSSを追加したい場合は、module_2.css、module_3.css に記述なさってください。

それ以外のcssファイルには、変更を加えないようにお願いいたします。

■CSSについて

【重要】編集の際の注意事項

■編集の際の注意事項

本サイトは「店舗情報」「キャンペーン情報」「チラシ情報」「 新情報」「RARAレシピ」等々、CMS (Content Management System)を導入し、リアルタイム編集を可能にしています。

そのため、このシステムに必要な記述を破壊してしまったり、システムの障害となるサーバーサイドスクリプト（Javascript、php等）を書き加えてしまうと、システムが正常に作動しなくなる（サイトのページが表示されなくなる等）の障害が起きる可能性があります。

お客様（あるいは依頼を受けた業者様）がページの編集・更新を行う際は、上記の点に十分注意してください。

ページ編集の際には、以下のソフトウエアを推奨いたします。

・ADOBE DREAMWEAVER

・文字コード指定のできる（utf-8で編集できる）テキストエディタ

注意

一般の方を対象にしたホームページ編集ソフトの中には、必要のない独自タグ（記述）を勝手に挿入するものがあります。

（例） IBMのホームページ・ビルダー等

これらの独自タグが原因でシステムに障害の起きる可能性がございますので、ご利用はご遠慮ください。

■編集の際の推奨ソフトウエア

サイトの文字コードは【utf-8】で作成されています。

それ以外の文字コードで編集すると、システム障害、文字化け等を引き起こしますので

編集の際は、必ず、 【utf-8】で編集できるソフトウエアをご利用ください。

■サイトの文字コード

編集可能なページ、部分につきましては、次ページ以降でご説明いたします。

またお客様の編集によってシステムの不具合が起きてしまった場合、その保障はいたしかねますのでご了承ください。

万一の事態に備え、更新の際は必ずバックアップを取ってから行うよう、徹底することをお勧めいたします。

編集可能なページ・部分

キャンペーン（campaign）

チラシ情報（flyer）

会社案内（about）

採用情報（recruit）

店舗情報一覧（map)

店舗情報TOP（shop)

店舗情報詳細（shop/information)

レシピページ(shop/rara)

トップページ

_tpl_list.html

…4～7

サイドバーバナー会社用・店舗用

(inc)

サイドバー下部 バナー部分inc/_tpl_side_global.htmlinc/_tpl_side_shop.html

採用情報

recruit/_tpl_list.html …13

各社独自ページ各社独自ページ※採用情報の編集方法と同じです

…8～10

システム領域により編集不可

※サイドバー下部バナーのみ可能

トップページ

RARAカード（raracard)

店舗情報Flash

…11～12

トップページ （ _tpl_list.html )

■トップFlashの内容変更

編集方法はP5～6をご参照ください。

■おすすめ情報（カタログギフト等）

編集方法はP7をご参照ください。

■サイドバー下部バナー部分

編集方法はP8～9をご参照ください。

トップFlash （ 画像：フォルダ「_img」)

■メイン画像部分

初期画像+スライド画像3枚

合計4枚を表示できます。

フォルダ「_img」の中の画像を差し替えます。

サイズは

横662px×縦253pxで固定。

■メイン画像部分/バナー部分共通

初期の画像を残しておきたい場合は、m4.jpgやthum4.jpgなどファイル名を変えて、フォルダ「_img」にアップしてください。

その場合、設定ファイルを変更します。（次ページ参照）

■バナー部分

バナー画像3枚を表示させることができます。上部のメイン画像部分と連動しています。

変更の際はフォルダ「_img」の中の画像を差し替えます。サイズは横218px×縦81pxで固定。

■フォルダ「_img」の初期内容

}{

重要なパーツなので変更しないでください

■メイン画像

m0.jpg： 初に表示される画像

m1.jpg～m3.jpg：スライド表示される画像3枚

■バナー画像

thum1.jpg～thum3.jpg

トップFlash （ 設定：フォルダ「_xml」のmainswf.xml)

画像ファイル名を変える、クリックした際のリンク先を変えるなど、設定を変更する場合はフォルダ「_xml」のmainswf.xmlを編集します。

編集の際は、必ず、 【utf-8】で編集できるソフトウエアをご利用ください。

初に表示されるメイン画像名

バナー画像名

スライド表示されるメイン画像名

■設定ファイルの編集

リンク先のファイル（http/pdf等）

ターゲットウインドウ今開いているウインドウでアクセスする場合は【_self】新しいウインドウを開いてアクセスする場合は【_blank】

<?xml version="1.0" encoding="UTF-8"?><data>

<items defscr="_img/m0.jpg">

<item src="_img/m1.jpg" href="./_images/common/imotama.pdf" target="_blank" naviimgsrc="_img/thum1.jpg"></item><item src="_img/m2.jpg" href="./_images/common/sanma.pdf" target="_blank" naviimgsrc="_img/thum2.jpg"></item><item src="_img/m3.jpg" href="./raracard/" target="_self" naviimgsrc="_img/thum3.jpg"></item>

</items></data>

おすすめ情報 （ _tpl_list.html )

おすすめ情報の部分は、記事が1つのバージョンと２つのバージョンを入れられるよう、タグをご用意しています。

■おすすめ情報（カタログギフト等）の変更

記事が1つのバージョン 記事が2つのバージョン

以下は【記事2つバージョン】を表示させている場合のタグ記述例です。【記事1つバージョン（青の部分）】を表示させたい場合は、コメントアウト（赤い部分）の記述を削除し、その代わりに【記事2つバージョン（黄色の部分）】をコメントアウトで囲みます。編集の際は、必ず、 【utf-8】で編集できるソフトウエアをご利用ください。

<h2 class="clearfix index"><img src="_images/index/h2_02.jpg" alt="旬をお届け、東光ストアのカタログギフト" width="680" height="41" class="fi_left" /></h2>

<div class="index_box">

<!--記事1個バージョン<div id="gift_box_01"> <img src="_images/index/gift_ttl_01.gif" alt="" /> <div class="gift_img"><imgsrc="_images/index/gift_img_01.jpg" alt="ララカードポイントプレゼント！" /></div> <div class="gift_path"><a href="_images/index/rara_point.pdf" target="_blank">今ならポイントが付いちゃう♪ララカードポイントプレゼント！</a></div> </div>-->

<div id="gift_box" class="clearfix"><div class="gift_item fi_left"><div class="gift_title"><img src="_images/index/gift_ttl_01.jpg" alt="ギフトをみる" /></div><div class="gift_img"><img src="_images/index/gift_img_01.jpg" alt="秋の味覚ギフト" width="283" height="213" /></div> <div class="gift_path"><a href="_images/common/imotama.pdf" target="_blank">秋の味覚ギフト</a></div></div>

<div class="gift_item fi_right"><div class="gift_title"><img src="_images/index/gift_ttl_01.jpg" alt="ギフトをみる" /></div><div class="gift_img"><img src="_images/index/gift_img_02.jpg" alt="北海道の旬魚ギフト" width="283" height="213" /></div><div class="gift_path"><a href="_images/common/sanma.pdf" target="_blank">北海道の旬魚ギフト</a></div></div>

</div>

サイドバー下部 バナー部分 （ inc/_tpl_side_global.html inc/_tpl_side_shop.html)

サイト内のサイドバー下部は、事業会社レイアウト（トップページや会社案内等）と、店舗レイアウトで、それぞれのバナー部分を読み込んでいます。各ファイルを編集することで、サイト内すべてのページのバナー部分が変更されます。

■サイドバー下部 バナー部分の変更

事業会社用レイアウトのバナー部分 店舗用レイアウトのバナー部分

フォルダ「inc」の_tpl_side_global.htmlを編集します。※次ページ参照

フォルダ「inc」の_tpl_side_shop.htmlを編集します。※次ページ参照

サイドバー下部 バナー部分 （ inc/_tpl_side_global.html)

■事業会社レイアウト用バナー部分の変更

フォルダ「inc」の_tpl_side_global.htmlを編集します。

編集の際は、必ず、 【utf-8】で編集できるソフトウエアをご利用ください。

<!-- side 【事業会社用サイドバナー】 :st --><div class="mb_10">

<a href="http://tokoushop.com/" target="_blank"><img src="/group/toukou_store/_images/common/side_webshop.jpg"

alt="{literal}東光ストア特選！！東光ストア厳選ギフト{/literal}“class="roll_alpha" /></a>

</div>

<div class="mb_10"><a href="/group/toukou_store/e-toku"><img src="/group/toukou_store/_images/common/side_coupon.jpg“alt="{literal}今月のクーポン 豊平店・南郷13丁目店・平岡店・円山店{/literal}“class="roll_alpha" /></a>

</div>

<div class="mb_10"><a href="/group/toukou_store/_images/common/fighters.pdf" target="_blank"><img

src="/group/toukou_store/_images/common/side_fighters.gif" alt="{literal}北海道日本ハムファイターズ札幌ドーム観戦チケット販売中！{/literal}" width="200" class="roll_alpha" /></a></div>

<div class="mb_10"><a href="http://www.cgcjapan.co.jp/" target="_blank"><img

src="/group/toukou_store/_images/common/side_cgc_fukkou.jpg" alt="{literal}CGCグループ大震災復興応援企画{/literal}" class="roll_alpha" /></a></div>

<div class="mb_10"><a href="/group/toukou_store/usikotai"><img

src="/group/toukou_store/_images/common/side_usikotai.gif" alt="{literal}牛個体識別情報サービス{/literal}" class="roll_alpha mb_10" /></a></div>

<div class="mb_10"><a href="/group/toukou_store/himawari"><img

src="/group/toukou_store/_images/common/side_himawari.gif" alt="{literal}焼たてメロンパン{/literal}" class="roll_alpha mb_10" /></a></div>

<!-- 以下の画像は編集できません。画像の変更する場合は新たに画像を作成し、アップロード先のパスを指定してください。 ：st --><div class="mb_10">

<a href="/group/toukou_store/shop/rara/one"><img src="/group/_images/side_resepi_bnr.gif" alt="{literal}RARAレシピ 詳しくはこちら{/literal}" width="200" height="132" class="roll_alpha" /></a>

</div><!-- 編集NG ：end -->

<!-- side :ed -->

青い部分が編集可能領域、黄色い部分が編集不可の領域です。

画像へのパスは絶対パス（ルート相対またはhttp://から始まるパス）で指定して

ください。

alt（画像説明文）に日本語を使う際は、{literal}焼たてメロンパン{/literal}

のように、文節を{literal} ～{/literal} で囲んでくさい。

サイドバー下部 バナー部分 （ inc/_tpl_side_shop.html)

■店舗レイアウト用バナー部分の変更

フォルダ「inc」の_tpl_side_shop.htmlを編集します。

編集の際は、必ず、 【utf-8】で編集できるソフトウエアをご利用ください。

青い部分が編集可能領域、黄色い部分が編集不可の領域です。

画像へのパスは絶対パス（ルート相対またはhttp://から始まるパス）で指定してください。

alt（画像説明文）に日本語を使う際は、{literal} さんま・生秋鮭{/literal} のように、文節を

{literal} ～{/literal} で囲んでくさい。

緑の部分は「今月のクーポン」のバナーで、特定の店舗のみ表示するようになっています。

<!-- side 【店舗用サイドバナー】 :st --><div class="mb_10"><a href="/group/toukou_store/_images/common/imotama.pdf" target="_blank"><img src="/group/toukou_store/_images/common/side_bnr06.jpg“alt="{literal}じゃがいも・玉ねぎ・かぼちゃ 秋の味覚ギフト{/literal}“width="200" height="60" class="roll_alpha" /></a>

</div>

<div class="mb_10"><a href="/group/toukou_store/_images/common/sanma.pdf" target="_blank">

<img src="/group/toukou_store/_images/common/side_bnr05.jpg“alt="{literal}さんま・生秋鮭{/literal}" width="200" height="60“class="roll_alpha" /></a></div>

<!-- 以下の画像は編集できません。画像の変更する場合は新たに画像を作成し、アップロード先のパスを指定してください。 ：st --><div class="mb_10">

<a href="/group/toukou_store/raracard/?id={$shop_id}"><img src="/group/_images/side_bnr04.jpg" alt="{literal}RARAカード 会員募集中{/literal}" class="mb_10 roll_alpha" /></a></div><!-- 編集NG ：end -->

<!-- 以下if文はシステム制御に必要ですので削除しないでください。バナーの編集・削除はOKです。 -->{if $shop_indivi_icon6==1}<div class="mb_10"><a href="/group/toukou_store/e-toku/?id={$shop_id}"><imgsrc="/group/toukou_store/_images/common/side_coupon.jpg" alt="{literal}今月のクーポン{/literal}" class="mb_10 roll_alpha" /></a></div>{/if}

<div class="mb_10"><a href="/group/toukou_store/_images/common/fighters.pdf" target="_blank"><imgsrc="/group/toukou_store/_images/common/side_fighters.gif" alt="{literal}北海道日本ハムファイターズ札幌ドーム観戦チケット販売中！{/literal}" width="200" class="mb_10 roll_alpha" /></a></div>

<!-- 以下の画像は編集できません。画像の変更する場合は新たに画像を作成し、アップロード先のパスを指定してください。 ：st --><div class="mb_10"><a href="/group/toukou_store/shop/rara/one/?id={$shop_id}"><imgsrc="/group/_images/side_resepi_bnr.gif" alt="{literal}RARAレシピ 詳しくはこちら{/literal}" width="200" height="132" class="roll_alpha" /></a></div><!-- 編集NG ：end -->

<!-- side :ed -->

店舗情報Flash （ 画像：フォルダ「shop/_img」)

■メイン画像部分

スライド画像3枚を表示できます。

フォルダ「shop/_img」の中の画像を差し替えます。

サイズは横474px×縦248pxで固定。

■メイン画像部分/バナー部分共通

初期の画像を残しておきたい場合は、m4.jpgやthum4.jpgなどファイル名を変えて、フォルダ「shop/_img」にアップしてください。

その場合、設定ファイルを変更します。（次ページ参照）

■バナー部分

バナー画像3枚を表示させることができます。左部のメイン画像部分と連動しています。

変更の際はフォルダ「shop/_img」の中の画像を差し替えます。

サイズは横191px×縦80pxで固定。

■フォルダ「shop/_img」の初期内容

}{

■メイン画像

m1.jpg～m3.jpg：スライド表示される画像3枚

■バナー画像

thum1.jpg～thum3.jpg

店舗情報トップは

Flashの内容のみ、

変更可能です。

店舗情報Flash （ 設定：フォルダ「shop/_xml」のmainswf.xml)

画像ファイル名を変える、クリックした際のリンク先を変えるなど、設定を変更する場合はフォルダ「shop/_xml」のmainswf.xmlを編集します。

編集の際は、必ず、 【utf-8】で編集できるソフトウエアをご利用ください。

バナー画像名

スライド表示されるメイン画像名

■設定ファイルの編集

リンク先のファイル（http/pdf等）

ターゲットウインドウ今開いているウインドウでアクセスする場合は【_self】新しいウインドウを開いてアクセスする場合は【_blank】

<?xml version="1.0" encoding="UTF-8"?><data><items><item src="_img/m1.jpg" href="../_images/common/imotama.pdf" target="_blank" naviimgsrc="_img/thum1.jpg"

useVars="" ></item><item src="_img/m2.jpg" href="../_images/common/sanma.pdf" target="_blank" naviimgsrc="_img/thum2.jpg"

useVars=""></item><item src="_img/m3.jpg" href="../raracard/" target="_self" naviimgsrc="_img/thum3.jpg"

useVars="shopID"></item></items>

</data>

■採用情報・各社独自ページの変更

編集可能領域

ページ内のタグで

で囲まれている部分のみ、編集いただけます。

<!-- 編集可能領域 ここから-->～～～

<!-- 編集可能領域 ここまで-->

採用情報（recruit/_tpl_list.html) ・その他 各社独自ページ

採用情報(recruite/_tpl_list.html） ・あるいは各社独自ページは、通常のhtml編集に近

いものです。

ただし、編集するのはファイルの【編集可能領域】に限定してください。

また、編集の際は、必ず、 【utf-8】で編集できるソフトウエアをご利用ください。