Contents Contents( 目次 ) 1 重要 編集の際の注意事項 2 編集可能なページ 部分 3 トップページ 4 トップFlashの内容変更 5 おすすめ情報 ( カタログギフト等 ) 6 サイドバー バナー部分 7 サイドバー バナー部分事業会社レイアウト用 8 サイドバー バナー部

Transcription

1 アークスグループ事業会社各社 Web サイト編集マニュアル 株式会社ライフポート様

2 Contents Contents( 目次 ) 1 重要 編集の際の注意事項 2 編集可能なページ 部分 3 トップページ 4 トップFlashの内容変更 5 おすすめ情報 ( カタログギフト等 ) 6 サイドバー バナー部分 7 サイドバー バナー部分事業会社レイアウト用 8 サイドバー バナー部分店舗レイアウト用 9 採用情報 各社独自ページ 10 CSS Javascript 等について ( 上級者向け注意事項 ) CSS について CSS を追加したい場合は module_2.css module_3.css に記述なさってください それ以外の css ファイルには 変更を加えないようにお願いいたします Javascript について html ファイルに直接 javascript を記述すると システム障害の原因となります 新たな javascript を追加する場合は スクリプト記述を外部ファイルとして読み込むようにしてください

3 重要 編集の際の注意事項 編集の際の注意事項 本サイトは 店舗情報 キャンペーン情報 チラシ情報 最新情報 RARA レシピ 等々 CMS (Content Management System) を導入し リアルタイム編集を可能にしています そのため このシステムに必要な記述を破壊してしまったり システムの障害となるサーバーサイドスクリプト (Javascript php 等 ) を書き加えてしまうと システムが正常に作動しなくなる ( サイトのページが表示されなくなる等 ) の障害が起きる可能性があります お客様 ( あるいは依頼を受けた業者様 ) がページの編集 更新を行う際は 上記の点に十分注意してください またお客様の編集によってシステムの不具合が起きてしまった場合 その保障はいたしかねますのでご了承ください 万一の事態に備え 更新の際は必ずバックアップを取ってから行うよう 徹底することをお勧めいたします サイトの文字コードサイトの文字コードは utf-8 で作成されています それ以外の文字コードで編集すると システム障害 文字化け等を引き起こしますので編集の際は 必ず utf-8 で編集できるソフトウエアをご利用ください 編集の際の推奨ソフトウエア ページ編集の際には 以下のソフトウエアを推奨いたします ADOBE DREAMWEAVER 文字コード指定のできる (utf-8 で編集できる ) テキストエディタ 注意 一般の方を対象にしたホームページ編集ソフトの中には 必要のない独自タグ ( 記述 ) を勝手に挿入するものがあります ( 例 ) IBM のホームページ ビルダー等 これらの独自タグが原因でシステムに障害の起きる可能性がございますので ご利用はご遠慮ください 編集可能なページ 部分につきましては 次ページ以降でご説明いたします

4 編集可能なページ 部分 トップページトップページ _tpl_list.html 4~7 キャンペーン (campaign) チラシ情報 (flyer) 会社案内 (about) システム領域により編集不可 サイドバー下部バナーのみ可能 採用情報 (recruit) 採用情報 recruit/_tpl_list.html 13 店舗情報一覧 (map) 店舗情報 TOP(shop) 店舗情報詳細 (shop/information) レシピページ (shop/rara) RARA カード (raracard) サイドバーバナー会社用 店舗用 (inc) サイドバー下部バナー部分 inc/_tpl_side_global.html inc/_tpl_side_shop.html 8~10 各社独自ページ 各社独自ページ 採用情報の編集方法と同じです

5 トップページ ( _tpl_list.html ) トップ Flash の内容変更 編集方法は P5 をご参照ください おすすめ情報 ( カタログギフト等 ) 編集方法は P6 をご参照ください サイドバー下部バナー部分 編集方法は P7-9 をご参照ください

6 トップ Flash ( 画像 : フォルダ photo ) メイン画像部分 / バナー部分共通 現在は 2 枚の画像を交互に表示しています photo01.jpg=photo03.jpg photo02.jpg=photo04.jpg メイン画像部分 画像 4 枚までをアニメーションで表示できます フォルダ photo の中の画像を差し替えます サイズは 横 662px 縦 338px で固定 初期の画像を残しておきたい場合は 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> アニメーション表示されるメイン画像名

7 おすすめ情報 ( _tpl_list.html ) おすすめ情報 ( カタログギフト等 ) の変更 おすすめ情報の部分は 記事が 1 つのバージョンと 2 つのバージョンを入れられるよう タグをご用意しています 記事が 1 つのバージョン 記事が 2 つのバージョン 以下は 記事 1 つバージョン を表示させている場合のタグ記述例です 記事 2 つバージョン ( 黄色の部分 ) を表示させたい場合は コメントアウト ( 赤い部分 ) の記述を削除し その代わりに 記事 1 つバージョン ( 青の部分 ) をコメントアウトで囲みます 編集の際は 必ず utf-8 で編集できるソフトウエアをご利用ください <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 class="recommended_path"><a href="info_chondroitin/"> 詳しくはこちら </a> <!-- 記事 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 class="gift_img"><img src="_images/index/gift_img_01.jpg" alt=" 秋の味覚ギフト " width="283" height="213" /> <div class="gift_path"><a href="_images/common/imotama.pdf" target="_blank"> 秋の味覚ギフト </a> <div class="gift_item fi_right"> <div class="gift_title"><img src="_images/index/gift_ttl_01.jpg" alt=" ギフトをみる " /> <div class="gift_img"><img src="_images/index/gift_img_02.jpg" alt=" 北海道の旬魚ギフト " width="283" height="213" /> <div class="gift_path"><a href="_images/common/sanma.pdf" target="_blank"> 北海道の旬魚ギフト </a> -->

8 サイドバー下部バナー部分 ( inc/_tpl_side_global.html inc/_tpl_side_shop.html) サイドバー下部バナー部分の変更 サイト内のサイドバー下部は 事業会社レイアウト ( トップページや会社案内等 ) と 店舗レイアウトで それぞれのバナー部分を読み込んでいます 各ファイルを編集することで サイト内すべてのページのバナー部分が変更されます 事業会社用レイアウトのバナー部分 店舗用レイアウトのバナー部分 フォルダ inc の _tpl_side_shop.html を編集します 現在は空白です 次ページ参照 フォルダ inc の _tpl_side_global.html を編集します 次ページ参照

9 サイドバー下部バナー部分 ( inc/_tpl_side_global.html) 事業会社レイアウト用バナー部分の変更 フォルダ inc の_tpl_side_global.htmlを編集します 編集の際は 必ず utf-8 で編集できるソフトウエアをご利用ください <!-- side 会社用サイドバナー :st --> <!-- 以下の画像は編集できません 画像の変更する場合は新たに画像を作成し アップロード先のパスを指定してください :st --> <div class="mb_10"> <a href=" target="_blank"><img src="/group/_images/side_cgc_bnr.jpg" alt="{literal}cgc GROUP{/literal}" width="200" height="50" class="roll_alpha" /></a> <!-- 編集 NG :end --> <!-- side :ed --> 黄色い部分が編集不可の領域です 青い部分が編集可能領域ですので 新たなバナーを追加していただくことができます その場合 バナーの幅は200px 以下にしてください 画像へのパスは絶対パス ( ルート相対または から始まるパス ) で指定してください alt( 画像説明文 ) に日本語を使う際は {literal} RARAレシピ詳しくはこちら {/literal} のように 文節を {literal} ~{/literal} で囲んでくさい

10 サイドバー下部バナー部分 ( inc/_tpl_side_shop.html) 店舗レイアウト用バナー部分の変更 フォルダ inc の_tpl_side_shop.htmlを編集します 現在は空白です 編集の際は 必ず utf-8 で編集できるソフトウエアをご利用ください 他の事業会社のサイドバナー例 <!-- 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> <a href= target= _blank ><img src="/group/toukou_store/_images/common/side_cgc_fukkou.jpg" alt=" {literal} CGC グループ大震災復興応援企画 {/literal} " class="roll_alpha"></a> <!-- side :ed --> 黄色い部分が編集不可の領域です 青い部分が編集可能領域ですので 新たなバナーを追加していただくことができます その場合 バナーの幅は200px 以下にしてください 画像へのパスは絶対パス ( ルート相対または から始まるパス ) で指定してください alt( 画像説明文 ) に日本語を使う際は {literal} RARAレシピ詳しくはこちら {/literal} のように 文節を {literal} ~{/literal} で囲んでくさい 入れないと文字化けする可能性があります class= mb_10 をつけると 下に10pxの余白があきます class= roll_alpha をつけると ロールオーバー( 画像の上にカーソルを置く ) 時に画像を半透明にします

11 採用情報 (recruit/_tpl_list.html) その他各社独自ページ 採用情報 各社独自ページの変更採用情報 (recruite/_tpl_list.html) あるいはおすすめ情報 (info_chondroitin/_tpl_detail.html) などの各社独自ページは 通常のhtml 編集に近いものです ただし 編集するのはファイルの 編集可能領域 に限定してください また 編集の際は 必ず utf-8 で編集できるソフトウエアをご利用ください ページ内のタグで <!-- 編集可能領域ここから--> ~<!-- 編集可能領域ここまで--> で囲まれている部分のみ 編集いただけます それ以外の部位は極力そのままにしてください 新たなページを追加したい場合は info_chondroitin のフォルダを フォルダごと複製して任意のフォルダ名前に変更してください 中に入っている _tpl_detail.html ファイルの編集可能領域を編集 ( ファイル名は変更しないでください ) し パンくずやtitle メタ情報を編集されるといいでしょう 編集可能領域