「やまと商店会どっとこむ」 店舗ホームページ更新方法について

Transcription

1 やまと商店会どっとこむ ホームページ更新のしかた 店舗ホームページ編 2010/10/21 初版 2017/05/15 v.4.0 株式会社ヨシ ウェブ サービス

2

3 目次 2 I. 店舗ホームページを見る Ⅱ. 店舗へのお知らせを見る ( 管理画面を利用 ) Ⅲ. 商品 店舗情報などを更新する ( 管理画面を利用 ) Ⅳ. その他情報の更新について ( 管理画面を利用 ) Ⅴ. かんたんナビ Ⅵ. 写真を掲載する際の注意事項 Ⅶ. Twitterボタン の設置の仕方 Ⅷ. いいね! ボタンの設置の仕方 Ⅸ. よくある質問 3ページ 4ページ 5ページ 7ページ 14ページ 15ページ 16ページ 18ページ 20ページ

4 Ⅰ. 店舗ホームページを見る 3 自店舗のホームページを見てみましょう 1 インターネットブラウザを起動して 店舗のページにアクセスして下さい 自店舗アドレス例 : 上記アドレスは * の部分が店舗ごとに異なります 配布しているアドレスを正しく入力して下さい やまと商店会どっとこむ の TOP ページからもアクセス出来ます 画面 I-1:InternetExplorer の画面 2 店舗ページが表示されます ( 画面 I-2) 画面 I-2: 店舗ページ 画面は イメージです 店舗ごとに異なります

5 Ⅱ. 店舗へのお知らせを見る ( 管理画面を利用 ) 4 自店舗へのお知らせを見てみましょう 1 下記アドレスを入力してください アドレス : 2 ログイン画面 (Ⅱ-1) が表示されます ID パスワードの欄に自店舗管理画面用の ID パスワードを入力し ログイン を押して下さい 画面 Ⅱ-1: ログイン画面! 大文字 小文字は区別されますので正しく入力してください 3 ログインが成功すると管理画面が表示されます ( 画面 Ⅱ-2) 太枠内の表示が自店舗へのお知らせです 内容を確認しましょう 画面 Ⅱ-2: 管理画面トップ 次は 商品 店舗情報の更新を行ってみましょう

6 Ⅲ. 商品 店舗情報などを更新する ( 管理画面を利用 ) 5 トップページの商品を更新してみましょう 1 管理画面の トップページ のタブを押します ( 画面 Ⅲ-1) 画面 Ⅲ-1: 管理画面 2 太枠内の 商品写真 1 と 説明文 を更新してみます まずは写真の更新です 太枠内の 参照 ボタンを押してください ( 画面 Ⅲ-2) 画面 Ⅲ-2: トップページ更新画面 3 掲載したい写真を選択して 開く を押してください ( 画面 Ⅲ-3) 写真のファイル名は 英数半角のこと 画面 Ⅲ-3: 画像選択ダイアログ

7 Ⅲ. 商品 店舗情報などを更新する ( 管理画面を利用 ) 6 4 写真のアップロード ボタンを押します 太枠内の画像がアップロードした画像に変わりましたか? ( 画面 Ⅲ-4) 続いて 商品写真 1 の説明文を修正してみましょう 画面 Ⅲ-4: 商品写真の更新 5 太枠内の文字を修正して下さい ( 画面 Ⅲ-5) 6 上記の内容で登録する を押してください店舗ホームページに修正した内容が反映されます ( 画面 Ⅲ-6) 画面 Ⅲ-5: 商品写真の更新! 更新の最後には かならず 上記の内容で登録する ボタンを押して下さい 押さないと更新が反映されません 以上で 商品 店舗情報の更新は完了です 画面 Ⅲ-6: 商品写真の更新

8 Ⅳ. その他情報の更新について ( 管理画面を利用 ) 7 トップページのその他の情報の更新方法について サブタイトル タイトル PR 文は それそれの欄にテキストを入力して更新できます トップページの商品の更新を参照 店舗タイトル右の写真を更新できます やり方は 商品写真の入れ替え方法と同じです 新着情報 お知らせを更新できます お得情報を更新できます 内容の更新を行ったあとは 必ず 上記内容で登録する を押して下さい ( 掲載する写真を WEB 用適正サイズに変更する方法は Ⅵ. 写真を掲載する際の注意事項 を参照してください )

9 Ⅳ. その他情報の更新について ( 管理画面を利用 ) 8 商品一覧ページの更新方法について 商品 3 の写真と説明文を更新できます 商品 4 の写真と説明文を更新できます 商品 5 の写真と説明文を更新できます 商品 6 の写真と説明文を更新できます 商品 7 の写真と説明文を更新できます 内容の更新を行ったあとは 必ず 上記内容で登録する を押して下さい ( 掲載する写真を WEB 用適正サイズに変更する方法は Ⅵ. 写真を掲載する際の注意事項 を参照してください )

10 Ⅳ. その他情報の更新について ( 管理画面を利用 ) 9 営業時間 地図ページの更新方法について! 地図の更新はできません お店情報の更新ができます 時間は 24 時間表記でお願いします ( 例 ) 09:00~20:00 店主 店長の写真とごあいさつ文を更新できます ( 掲載する写真を WEB 用適正サイズに変更する方法は Ⅵ. 写真を掲載する際の注意事項 を参照してください )

11 Ⅳ. その他情報の更新について ( 管理画面を利用 ) 10 お店で使えるクーポン券をいつでも発行することができます 有効期限も設定できます A. クーポン内容を更新します 1. 管理画面の トップページ のタブを押します 2. 画面右側に クーポン券の更新 枠があります 3.< 通常クーポン > 内の クーポン画像 を押します 備考 )< 記念クーポン > が表示されているときは < 記念クーポン > の下に < 通常クーポン > が表示されます 4. 別窓で クーポン作成画面 が表示されます 5. クーポン内容を記入します 例 ) クーポン持参の方にドリンク 1 杯プレゼント! ご注文時にご提示ください 6. 必要に応じ 利用条件を記入します 7. 有効期限を指定します 8. 登録 ボタンを押します 9. 登録完了画面が表示されますので 閉じる ボタンを押します クーポンの作成が完了しましたので 次に クーポン券 をホームページに表示します ( クーポン券を作成しただけでは お客様からクーポン券は見えません ) B. ホームページにクーポン画像ボタンを表示します 1. 管理画面の < 通常クーポン > の下にある 表示する ボタンを押して マークを付けます 2. 画面一番下にある 上記内容で登録する ボタンを押します 3. 画面上部に トップページの変更を完了しました が表示されます 4. 自店舗のホームページを表示しますと 右上の方にクーポン画像ボタンが表示されています 表示されないときは 画面の 更新 ボタンを押すか F5 キーを押してください 5. クーポン画像ボタンを押すと別窓でクーポンページが表示されます

12 Ⅳ. その他情報の更新について ( 管理画面を利用 ) 11 クーポン券を更新してみましょう 1 管理画面の トップページ のタブを押します ( 右図参照 ) 2 画面右側に クーポン券の更新 枠があります < 通常クーポン > 内の クーポン画像 を押します ( 右図参照 - 点線枠 ) 備考 )< 記念クーポン > が表示されているときは < 記念クーポン > の下に < 通常クーポン > が表示されます 3 別窓で クーポン作成画面 が表示されます ( 右図参照 ) 4 クーポン内容を記入します 例 ) クーポン持参の方にドリンク 1 杯プレゼント! ご注文時にご提示ください ( 右図参照 - 点線枠 ) 5 必要に応じ 利用条件を記入します 6 有効期限を指定します 7 登録 ボタンを押します 8 登録完了画面が表示されますので 閉じる ボタンを押します クーポンの作成が完了しましたので 次に クーポン券 をホームページに表示します ( クーポン券を作成しただけでは お客様からクーポン券は見えません )

13 Ⅳ. その他情報の更新について ( 管理画面を利用 ) 12 クーポン券を更新してみましょう クーポン券をホームページに表示します ( クーポン券を作成しただけでは お客様からクーポン券は見えません ) 1< 通常クーポン > の下にある 表示する ボタンを押して マークを付けます ( 右図参照 - 点線枠 ) 2 画面一番下にある 上記内容で登録する ボタンを押します 3 画面上部に トップページの変更を完了しました が表示されます 4 自店舗のホームページを表示しますと 右上の方にクーポン画像ボタンが表示されています ( 右図参照 ) 表示されないときは 画面の 更新 ボタンを押すか F5 キーを押してください 5 クーポン画像ボタンを押すと別窓でクーポンページが表示されます

14 Ⅳ. その他情報の更新について ( 管理画面を利用 ) 13 カレンダーの設定について カレンダーを初めて設定するとき (1) まず 前月を指定します ( カレンダーが表示されます ) (2) 次に 当月または 次月を指定します (3) カレンダーの画面の 色を付けたい日付上 でクリック ( 一回目でピンク 二回目で黄色 三回目で白に戻ります ) 定休日等は ピンクで (4) 日付部分の登録 を押します (5) 最後に 上部の 表示する を選択して 下部の 上記内容で登録する を押します (6) 次回の更新からは 日付部分の登録 だけで OK です カレンダーを更新するとき (1) カレンダーの画面の 変更したい日付上 でクリック ( 一回目でピンク 二回目で黄色 三回目で白に戻ります ) (2) 日付部分の登録 を押します (3) 上記内容で登録 を押します

15 Ⅴ. かんたんナビ 14 店舗ホームページへの追加機能の説明及び操作方法等は かんた んナビ をご覧ください

16 Ⅵ. 写真を掲載する際の注意事項 15 写真を WEB 用適正サイズに変更する方法 掲載する写真のサイズが大きいと ホームページ上に写真が表示されないことがあります マークとなります ( 現行のデジカメで撮った写真は比較的サイズが大きいため そのままの状態では 表示されません ) ホームページに写真を掲載するためには 写真のサイズを WEB 適正サイズにしなければなりません サイズを小さくする方法は いくつかありますので紹介します 例 1) マイクロソフトのペイントを使用する方法 1. 写真を表示する 2. 写真の上で右クリックをする 3. プログラムから開くを選択 4. ペイントを選択 5. 変形 ( 上部 ) を選択 6. サイズ変更を選択 7. サイズ変更の 水平方向 と 垂直方向 の % を下げる 例 2) マイクロソフトのピクチャーマネージャーを使用する方法 1. 写真を表示する 2. 写真の上で右クリックをする 3. プログラムから開くを選択 4.Microsoft Office Picture Manager を選択 5. 画像 ( 上部 ) を選択 6. 画像のサイズ変更を選択 7. 定義済みのサイズを選択し プールダウンさせて WEB 大 又は WEB 小 を選択する または拡大または縮小率 ( 右部 ) を選択し 適正なサイズになるようにサイズを下げる サイズは下記に表示されます 適正サイズ 180KB 以下 ( ピクセル以下 ) [ 写真と記事を変更するときの注意 ] 写真と記事を変更するときは 写真を先にアップロードしてください 写真をアップロードすると 未登録の記事は削除されます 写真のファイル名の付け方 写真のファイル名は 英数半角とします ( 日本語は使えません )

17 Ⅶ. Twitter ボタン の設置の仕方 トップページに Twitter ボタンを追加できるようになりました 配置例 トップページの写真の横に配置したボタン (A) 前提条件 : Twitter のアカウントを持っていること (B) 設置手順 : 1.Twitter 公式サイトを開き Twitter ボタンを作成する ページ右側の コードのプリビューを見る に表示されているコードをコピーします Twitter:Twitter ボタンページ画面 Twitter とは? 等の説明はここでは致しておりません あらかじめご了承ください リンクを共有する ボタンが選択されている事を確認します この枠内のコードをコピーします

18 Ⅶ. Twitter ボタン の設置の仕方 管理画面 にログインして ボタンを貼り付けたい記事の編集画面を表示します ( トップページ のみ 設置可能です ) 管理画面 : トップページ編集画面 1 トップページの商品説明欄に設置します 1 編集メニューの ソース ボタンをクリックします 2 2 記事の最後に 前頁でコピーしたコードを貼り付けます 3 3 上記内容で登録する をクリックして登録します ( 表示画面を見ると ツイート と文字表示されています ) 3. ご自分のホームページを見ると ツイート のボタンが貼りついているのがわかります 公開しているご自分のページのトップページ

19 Ⅷ. いいね! ボタンの設置の仕方 トップページに Facebook のいいね! ボタンを追加できるようになりました 配置例 トップページの写真の横に配置したボタン (A) 前提条件 : Facebook のアカウントを持っていること (B) 設置手順 : Facebook とは? 等の説明はここでは致しておりません あらかじめご了承ください Facebook にログインした状態で下記を行ってください 1. 下記 URL を開き Facebook の いいね! ボタンのコードを取得します 1 URL to Like の欄に いいね! を押してもらうページの URL を入力します ( 今からボタンを配置する ご自分のホームページの URL です ) 2 Width の欄に 380 と入力します ( この数値は横幅のサイズです 380 以外でも可能です ) Facebook:Like Button 画面 1 いいね! を押してもらうページの URL を入力します と入力します 右側のチェックを入れたままにすると シェアボタン も配置されます この部分で見た目を確認出来ます 3 Get Code ボタンを押します

20 Ⅷ. いいね! ボタンの設置の仕方 Get Code ( コードを取得 ) ボタンを押すと 小窓で Your plugin code が表示されます Facebook: Your plugin code 画面 プラグインコード 1 3 このコードをコピーして管理画面の記事編集画面に貼り付けます ( 下記参照 ) プラグインコード 2 2. 管理画面 にログインして ボタンを貼り付けたい記事の編集画面を開きます 管理画面 : トップページ編集画面 1 1 編集メニューの Show Sourse( ソースコード編集 ) ボタンをクリックします プラグインコード 1 を貼り付けます プラグインコード 2 を貼り付けます 2 記事の最後に コピーしたプラグインコード 1 と 2 をそれぞれ貼り付けます 1 を貼り付けた後 改行してから 2 を貼り付けると やりやすいです 3 上記内容で登録する をクリックして 登録します ( 管理画面では貼り付けたコードが表示されます ) 3. ご自分のホームページを見て いいね! ボタンが貼りついている事を確認します 公開しているご自分のページのトップページ

21 Ⅸ. よくある質問 20 Q1. トップページの 新着お店情報 に写真を載せるには? A1. 店舗ページの写真または記事を更新しますと 自動的に やまと商店会どっとこむ および 所属商店会の 新着お店情報 に掲載されます Q2. 写真がアップロードできない A2. 下記の2つを確認してください 1. 写真のファイル名に日本語が含まれていないか? ファイル名を英数字のみにします 2. 写真のファイルサイズが大きすぎないか? デジカメで撮影した写真は一般的には非常に大きいサイズとなっていますので 適切なサイズに変換してください ( Ⅵ. 写真を掲載する際の注意事項 参照 ) 適正サイズは 180KB 以下 ( 横 640px 縦 480px 以下 ) です Q3. 管理画面で登録ボタンを押しても更新されない A3. 登録後 必ずブラウザの更新ボタンを押してください 管理画面および公開ページの両方とも更新ボタンを押してください Q4. 商品説明などの文章が見えなくなってしまい 入力ができない A4. Internet Explorer( ブラウザ ) をお使いの方は 互換表示 にしてください 互換表示 にするには ページの上のメニュー : ツール > 互換表示 (V) をクリックします Q5. 細長い写真をアップしたら表示がおかしくなった A5. A2. と同様適切なサイズに変換してください ( Ⅵ. 写真を掲載する際の注意事項 参照 ) 適正サイズ内でも縦横比が極端に異なる写真 ( 細長い画像 ) は正しく表示されない場合があります ( 縦横比がおよそ横 4: 縦 3 の写真が適しています )

22 株式会社ヨシ ウェブ サービス 神奈川県大和市南林間 電話 : FAX: info@yamato-shoutenkai.com