アークスグループ事業会社各社
Webサイト編集マニュアル
株式会社 ライフポート 様
◆Ｃｏｎｔｅｎｔｓ（目次） …1 ◆ 【重要】編集の際の注意事項 …2 ◆編集可能なページ・部分 …3 ○トップページ …4 ○トップFlashの内容変更 …5 ○おすすめ情報（カタログギフト等） …6 ○サイドバー・バナー部分 …7 ○サイドバー・バナー部分 事業会社レイアウト用 …8 ○サイドバー・バナー部分 店舗レイアウト用 …9 ○採用情報・各社独自ページ …10
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.html inc/_tpl_side_shop.html 各社独自ページ 各社独自ページ ※採用情報の編集方法と同じです …8～10 システム領域により 編集不可 ※サイドバー下部 バナーのみ可能 トップページ RARAカード（raracard) 採用情報 recruit/_tpl_list.html …13トップページ （ _tpl_list.html )
■トップFlashの内容変更 編集方法は P5をご参照ください。 ■おすすめ情報 （カタログギフト等） 編集方法は P6をご参照ください。 ■サイドバー下部 バナー部分 編集方法は P7-9をご参照ください。トップFlash （ 画像：フォルダ「photo」)
■
メイン画像部分
画像4枚までをアニメーション で表示できます。 フォルダ「photo」の中の画像 を差し替えます。 サイズは 横662px×縦338pxで固定。■
メイン画像部分/バナー部分共通
現在は2枚の画像を交互に表示しています。 photo01.jpg＝photo03.jpg、 photo02.jpg＝photo04.jpg。 初期の画像を残しておきたい場合は、photo05.jpgなどファイル名を変えて、フォル ダ「photo」にアップしてください。 その場合、設定ファイルを変更します。 角丸の枠は画像に含まれません。トップFlash （ 設定：フォルダ「_xml」のmainswf.xml)
画像ファイル名を変える、クリックした際のリンク先を変えるなど、設定を変更する場合は フォルダ「_xml」のmainswf.xmlを編集します。 編集の際は、必ず、【utf-8】で編集できるソフトウエアをご利用ください。 アニメーション表示されるメイン画像名■
設定ファイルの編集
<?xml version="1.0" encoding="utf-8"?> <feed> <entry> <entryPhoto ImgPhoto="photo/photo01.jpg" /> <entryPhoto ImgPhoto="photo/photo02.jpg" /> <entryPhoto ImgPhoto="photo/photo03.jpg" /> <entryPhoto ImgPhoto="photo/photo04.jpg" /> </entry> </feed>おすすめ情報 （ _tpl_list.html )
おすすめ情報の部分は、記事が1つのバージョンと２つのバージョンを入れられるよう、タグを ご用意しています。■
おすすめ情報（カタログギフト等）の変更
以下は【記事1つバージョン】を表示させている場合のタグ記述例です。 【記事2つバージョン（黄色の部分）】を表示させたい場合は、コメントアウト（赤い部分）の記述 を削除し、その代わりに【記事1つバージョン（青の部分） 】をコメントアウトで囲みます。 編集の際は、必ず、【utf-8】で編集できるソフトウエアをご利用ください。 記事が1つのバージョン 記事が2つのバージョン<h2 class="index clear_both"><img src="_images/index/h2_02.gif" alt="おすすめ情報" width="680" height="41" /></h2>
<div class="index_box"> <div id="recommended_box">
<img src="_images/index/recommended_ttl_01.gif" alt="ビッグドラッグ 今月の1品" width="628" height="33" />
<div class="recommended_img"><img src="_images/index/recommended_img_01.gif" alt="こんなお悩みあり ませんか？コンドロイチンZS錠" width="588" height="144" /></div>
<div class="recommended_path"><a href="info_chondroitin/">詳しくはこちら</a></div> </div>
<!-- 記事2コバージョン
<div id="recommended_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> --> </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】で編集できるソフトウエアをご利用ください。 黄色い部分が編集不可の領域です。 青い部分が編集可能領域ですので、新たなバナーを追加していただくことができます。 その場合、バナーの幅は200px以下にしてください。 画像へのパスは絶対パス（ルート相対またはhttp://から始まるパス）で指定してください。 alt（画像説明文）に日本語を使う際は、{literal} RARAレシピ 詳しくはこちら{/literal}のよ うに、 文節を{literal} ～{/literal}で囲んでくさい。 <!-- side 【会社用サイドバナー】 :st --> <!-- 以下の画像は編集できません。画像の変更する場合は新たに画像を作成し、アップロード先のパ スを指定してください。 ：st --> <div class="mb_10"><a href="http://www.cgcjapan.co.jp/" target="_blank"><img src="/group/_images/side_cgc_bnr.jpg" alt="{literal}CGC GROUP{/literal}" width="200" height="50" class="roll_alpha" /></a>
</div>
<!-- 編集NG ：end --> <!-- side :ed -->
サイドバー下部 バナー部分 （ inc/_tpl_side_shop.html)
■
店舗レイアウト用バナー部分の変更
フォルダ「inc」の_tpl_side_shop.htmlを編集します。現在は空白です。 編集の際は、必ず、【utf-8】で編集できるソフトウエアをご利用ください。 黄色い部分が編集不可の領域です。 青い部分が編集可能領域ですので、新たなバナーを追加していただくことができます。 その場合、バナーの幅は200px以下にしてください。 画像へのパスは絶対パス（ルート相対またはhttp://から始まるパス）で指定してください。 alt（画像説明文）に日本語を使う際は、{literal} RARAレシピ 詳しくはこちら{/literal}のよ うに、 文節を{literal}～{/literal} で囲んでくさい。 ※入れないと文字化けする可能性があります。 【 class=“mb_10“】をつけると、下に10pxの余白があきます。 【 class=“roll_alpha” 】をつけると、ロールオーバー（画像の上にカーソルを置く）時に画像 を半透明にします。 <!-- side 【店舗用サイドバナー】 :st --> <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}" class="roll_alpha" width="200"></a>
</div> <div>
<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>
<!-- side :ed -->
