<4D F736F F D208CF68EAE838C A982E F08DEC90AC82B782E9>

Transcription

1 [ 日付 ] JIMDO 操作マニュアル 有限会社 BIZ ASSIST

2 2

3 目次 STEP0 事前準備... 1 STEP1 公式レイアウトからHP を作成する... 2 STEP2 レイアウトの変更... 5 STEP3 ログイン ログアウト... 6 STEP4 トップイメージの変更... 7 STEP5 パーツの名称... 9 STEP6 ヘッダーの編集 STEP7 ページタイトルの入力 STEP8 サイドバーを編集する STEP9 フッターを編集する コンテンツ部を編集する STEP10 見出しを編集する STEP11 文章を編集する STEP12 水平線を挿入する STEP13 コンテンツを移動する STEP14 既存ナビゲーションメニューの削除 STEP15 ナビゲーションメニューの新規作成 STEP16 サブメニューの作成 参考ナビゲーションの編集ボタン STEP17 プレビューで確認する STEP18 新しいページの作成 STEP19 写真付き文章を追加する STEP20 文字にリンクする STEP21 地図を挿入する STEP22 フォトギャラリー機能を使って商品一覧を作成する STEP23 フォトギャラリーの画像にリンクを設定する STEP24 コンテンツ作成の復習商品詳細ページを作成する STEP25 お問い合わせフォームを作成する STEP26 注文フォームを作成する 参考 : フォーム作成時の各種機能 STEP27 ボタンを作成する 付録 1 画像のサイズを変更する ファイルサイズを調べるには? 付録 2 写真に文字を入れる

4 STEP0 事前準備 本教材で学習するにあたり 写真や文章が保存された素材ファイルを 学習用 PC にダウンロー ドする必要があります 素材ファイルを入手するには 以下のアドレスにアクセスしてくださ い 1. サンプルサイトが表示されます メニューから ご利用ガイド をクリ ックします ご利用ガイドページが表示されます 2. 演習用素材のダウンロードボタン をクリックします 3. デスクトップにダウンロードしま す 4. デスクトップを選択し 保存ボタ ンをクリックします 面が異なる場合があります PC の使用環境によって 本書と画 5. 素材データは Zip 形式で圧縮されているので 解凍してご利用ください Windows の場合 は 右クリック すべて展開 を選択して解凍できます 1

5 STEP1 公式レイアウトから HP を作成する 1. へアクセスし ます 2. 無料でホームページ作成 をクリ ック 2 3. レイアウトが表示されます 画面左 上のデザインをクリックします 3 デザインは後から変更できます 4. 希望のホームページアドレスを入力します ここで指定したものが ホームページのアドレスになります メモしておいてください メールアドレスを入力します 携帯やスマホなど すぐメールが受け取れるアドレスにしてください 6. パスワードを入力します パスワードは メモ用紙等に控え なくさないようにし管理してください 7. 利用規約を確認し します 8 8. 無料ホームページを登録! をクリ ックします 2

6 9. 画面に表示される文字を入力します 9 ここに出た文字を入力する 10. 無料ホームページを登録! をク リックします ホームページを作成中のメッセー ジが表示されるのでしばらく待ちます ホームページが作成されます 13. をクリックして 一旦ブ ラウザーを終了します 3

7 メールを確認します 登録時に指定したメールアドレスに Jimdo からメールが届きます メールを開き メールアドレスを確定 をクリックします 15. あなたのメールアドレスが確定さ れました の画面が表示されます 16. さあホームページを編集しましょ う をクリックします Jimdo の編集画面が表示されます 4

8 STEP2 レイアウトの変更 1. 管理メニューの レイアウト をク リックします 管理メニューのデザインが異なる場 合があります 2. レイアウトが表示されます 3. をクリックするとレイアウトがス クロールします 4. 今回は Helsinki というレイアウトを使用します レイアウトは アルファベット順に並んでいますので Helsinki を見つけて プリセッ ト をクリックします 5. レイアウトパターンが表示されます プレビューをクリックすると レイアウトが反映されます 反映されたレイアウトのサムネイルには 現在のプレビューと表示されます ここでは 左端の青色でサイドバーのあるレイアウトを選択します 他のレイアウトを選択すると今後テキストと異なる操作となる場合があります 6. 保存ボタンをクリックします 7. レイアウトの変更が確定します 5

9 8. ボタンをクリックして レイア ウトの表示を終了します 9. レイアウトが変更されました STEP3 ログイン ログアウト 1. 画面を一番下までスクロールしま す 2.Jimdo ログアウトをクリックしま す 6

10 3. ログアウトしました ログアウトすると ログイン時に表示されていた右側の管理メニューが消えます 4. ログインするには 画面最下部までスクロールし ログイ ン をクリックします 5. パスワード入力画面が表示されるので 登録時に指定したパスワードを入力し ログイン ボタンをクリックします デザインが異なる場合があります STEP4 トップイメージの変更 ホームページの顔となる トップイメージを変更します 1. トップページの画像のうえにカー ソルを移動します すると 佐須のよう に画面が変化します 2. 画像をクリックします 7

11 3. 画像をアップロード をクリック します 4. 挿入する画像が保存されたフォル ダを指定します 5. 画像が挿入されるので + ボタンを クリックして 画像を枠いっぱいにまで拡 大します 画像右下の をドラッグしても拡大 縮 小ができます 6. 画像が拡大されました 7. 保存をクリックするとトップイメージ が確定します 8

12 8. 画面が変更されました STEP5 パーツの名称 ホームページの編集を行う前に 主なパーツの名称を確認しておきましょう 9

13 STEP6 ヘッダーの編集 All Rights Reserved Copyright Biz Assist Corporation 2015 このステップでは ヘッダー部のロゴを削除 追加し ページタイトルを挿入します 1. ヘッダーのロゴ部分にマウスポインタ ーを合わせます ポインターが合わさると 編集用の枠が 自動的に表示されます 2. 編集枠の左上の バケツマーク をク リックします 3. このコンテンツを削除してもよろしい ですか? と表示されるので はい 削除 します をクリックします 4. ロゴが削除されました つづけて新しいロゴを挿入します 5. ロゴエリアの部分をクリックします 6. 画像をアップロードする をクリ ックし 挿入するロゴを選択します 10

14 7. 右下の保存ボタンをクリックします ボタンで ロゴ のサイズや表示位置を調整できます 8. ロゴが変更されました STEP7 ページタイトルの入力 つづけて ページタイトルの入力を行います 1. ページタイトルの部分をクリックしま す 2. タイトル文を入力し 保存 ボタン をクリックします 3. タイトル文が表示されました 11

15 STEP8 サイドバーを編集する All Rights Reserved Copyright Biz Assist Corporation 2015 ホームページ右側サイドバー部分を編集します サイドバーは ヘッダーと同様 どのページでも常に表示される部分です ここでは 会社名と住所 連絡先を指定します 1. 会社名の書かれた部分をクリックします 2. 内容を書き換えます 3. 保存ボタンをクリックします 削除する 4. ページ概要 ( 見出し ) 文章 シェアボタンのパーツは削除しておきましょう 削除方法は STEP6 を参照してください 12

16 5. サイドバーの編集が終了しました サイドバーは自由に編集できます 操作 に慣れてきたら いろいろな情報を追加し ましょう STEP9 フッターを編集するホームページ下部フッター部分を編集します フッターは ヘッダーと同様 どのページでも常に表示される部分です ここでは 著作権表示を追加します 1. 管理メニューの 設定 をクリック します 2. フッター編集 をクリックします 3. コピーライト表記の部分に Copyright Jimdo 農ぶどう園 2015 と入力します 4. フッターに配送と支払いに関するリン クを設定のチェックを外します 5. 保存ボタンをクリックします 6. 画面左上の ボタンか 下部の 閉じ る をクリックします 7. 著作権表示の設定ができました 13

17 コンテンツ部を編集するコンテンツ部は 一番更新頻度の高い部分です いろいろな機能がありますので ひとつひとつ学習していきましょう す 1. コンテンツ部の見出しの上部にマ ウスポインターを移動させると + コンテ ンツを追加 というアイコンが表示されま Jimdo は ホームページを 部品を組み合わせて完成させていきます + コンテンツを追加 と いうアイコンをクリックすると上図のようなメニュー画面が表示されます このメニュー画面から どの部品を追加するかを決定し 作成していきます 以下に概要を表示します 参考標準で表示されるコンテンツ追加メニュー 見出し ページの見出しを作成します 大 中 小のサイズの見出しを作成できます 文章 ページの説明文を作成します 文字サイズや 色なども自由に変更できます 写真 あらかじめパソコンに用意しておいた画像を張りつけることができます 写真付き文章写真と 文章を組み合わせて表示させる際に使用します フォトキ ャラリー 複数の写真を表示させます スライドショー的な表示も簡単にできます 水平線 ページの区切りを入れます 余白 コンテンツの間に空白を入れます 14

18 カラム 画面を 2 列 3 列と分割して表示できる機能です Youtube 等 ホームページに動画を貼り付けます ボタン リンク用のボタンを作成できます 商品 オンラインショップ機能利用時に 商品詳細を作成します シェアボタン Facebook や twitter など SNS とシェアします その他のコンテンツをクリックすると追加で表示されるメニュー Google マップ Google マップを利用して地図を表示させます ファイルタ ウンロート 別途作成したファイルをダウンロードさせます ゲストブックホームページ訪問者がコメントを投稿できる機能です 商品カタログオンラインショップで販売する商品を一覧で表示することができます ウィジット HTML コード JavaScript コードの挿入ができます フォーム お問い合わせや予約などに利用できるメールフォームを挿入できます 表 表 ( テーブル ) を挿入できます Facebook Facebook の いいね! ボタン いいね! ボックス を設置できます twitter Twitter アカウントの投稿内容を表示することができます Google+ Google+ の +1 ボタン 共有ボタン バッジ を設置できます RSS フィード RSS フィードとはホームページの更新情報を配信するための機能です Flash Flash ムービーを挿入することができます Jimdo Jimdo への登録ボックスを挿入することができます 15

19 STEP10 見出しを編集する 1. 見出し部分にマウスポインターを合わせます すると 編集モードになります 2. そのままクリックします 3. 見出しを Jimdo ぶどう園へようこ そ に修正し 保存ボタンをクリックし ます 4. 見出しが変更されました 保存ボタンをクリックする前に 見出 しの 大 中 小 ボタンをクリックす ると見出しの大きさが変更されます 5. 同様に トップ画像下の見出しを 大人気のピオーネとシャインマスカッ ト に修正します つづいて 文章の編集を行います まず 既存の文章を削除します 6. 既存の文章をクリックし 編集モード にします 7. 画面左側のバケツアイコンを選択し 削除しましょう 16

20 STEP11 文章を編集する 1. 見出しの下部にマウスポインターを 移動し コンテンツを追加 を表示させ クリックします 2. メニューから文章を選択し ( 青く反 転 ) クリックします 3. 文章を入力し 保存ボタンをクリック します 文章は 適当に入力いただいて結構で す 4. 文字の書式設定を行います 色や文字の大きさなど 付属するボタンを利用して修飾してくだ さい 修飾は自由に行っていただいて結構です ほぼワープロと同じ操作で文字の修飾が可能です 17

21 以下に 主なボタンの説明を記載します 文字を太字にします All Rights Reserved Copyright Biz Assist Corporation 2015 文字を斜体にします 文章を番号付きのリストにして表示します 文章をリスト化して表示します 選択した範囲にリンクを貼ることができます 選択した範囲のリンクを解除することができます おこなった編集の一つ前に戻ることができます 編集を一つ前に戻る前の状態に戻すことができます 文章を左揃えで表示します 文章を中央揃えで表示します 文章を右揃えで表示します 文章を均等割付で表示します フォントサイズを変更します インデント ( 字下げ ) を挿入します インデント ( 字下げ ) を解除します 文字の色を変更します 装飾の設定を解除します HTML ソースを編集することができます 18

22 STEP12 水平線を挿入する 1. 文章の下部にマウスポインターを配置し て コンテンツを追加 ボタンをクリック します 2. メニューから水平線をクリックします 3. 水平線が追加されました 余白も同様に追加できます 文章が読みや すいように 水平線や余白を上手に活用しま しょう STEP13 コンテンツを移動する つづいて 水平線を見出しと文章の間に移動して ページを見やすくしましょう 1. 水平線の上に マウスポインターを移動 させクリックし 編集モードにします 2. 画面左上のボタンをクリック し 水平線を一つ上に移動させます 19

23 3. 最下部にあった水平線が 見出しと本文の間に移動します 移動を確認し 保存ボタンをクリックします 4. 水平線が移動しまし た コンテンツは とボタンにより いつでも自由に移動が可能です STEP14 既存ナビゲーションメニューの削除 ナビゲーション部の編集を行い メニュー を作成します 1. ナビゲーション部にマウスポインタ ーを移動させます 2. ナビゲーションの編集ボタン が表 示されるので クリックします ニューを削除します まず サービス と お問い合わせ メ 3. サービスの部分の バケツア イコンをクリックします 20

24 4. このページサービスを本当に削除しますか? とメッセージが表示されるので はい削除します ボタンをクリックします 5. 同様にお問い合わせメニューも削除 します 6. ホーム以外のページが削除されたら 保存ボタンをクリックします 7. ナビゲーションメニューが変更されま した 21

25 STEP15 ナビゲーションメニューの新規作成続けて 新たにナビゲーションメニューを追加します ページ構成図に基づいて ナビゲーションメニューを作成していきます 1. ナビゲーション部にマウスポインタ ーを移動させます 2. ナビゲーションの編集ボタン が表 示されるので クリックします 3. + 新規ページを追加 ボタンをクリ ックします 4. 新しいメニュー項目が追加されまし た 22

26 5. 項目を 直売所 に修正します さらにメニュー項目を追加するために + 新規ページを追加 ボタンをクリックします 6. 手順を繰り返し 第 1 階層をすべて 作成します 続けてサブメニュー ( 第 2 階層 ) の作成 を行います 7. サブメニュー ( 第 2 階層 ) は 商品 の下に作成されますので メニューの 商 品 をクリックします 8. 商品メニュー横のボタンをク リックし 新規ページを追加します 23

27 9. 商品下に 新メニューが挿入されるので メニュー名を ピオーネ に変更し ボタンをクリックして 同様に次のページを挿入します 10. 詰め合わせ まで作成できたら 保存 ボタンをクリックします 11. ナビゲーションメニューが追加されました 24

28 STEP16 サブメニューの作成 ナビゲーションメニューは作成されましたが 本来商品メニューのサブメニューとして作成される べき ピオーネ シャインマスカット 詰め合わせ が他のメニューと同レベル ( 第 1 階層と して ) 表示されています これらを サブメニューとして表示されるよう 修正します 1. ナビゲーションの編集 から 編集画 面を表示させます 2. ピオーネメニューの右側のボタ ンをクリックします 3. すると 階層が 1 階層下がります 同様に シャインマスカット と 詰め 合わせ も階層を下げましょう 4. 階層が下がったら 保存ボタンをクリ ックします 25

29 5. サブメニューの項目が消えて表示され ました 参考ナビゲーションの編集ボタン ナビゲーションの編集ボタンについて 各ボタンの機能を以下に説明します メニューの並びを1つ上げます メニューの並びを1つ下げます メニューの階層を1つ上げます メニューの階層を1つ下げます ただし 3 階層までです 新規ページを追加します ページを削除します ページを非表示にします 作成中のページを公開したくないときなどに使用します STEP17 プレビューで確認する Jimdo は編集中に プレビュー機能を使って実際に表示と同じ形式で画面を確認できます プレビ ュー機能を使うことで いちいちログオフ ログイン操作をせずに簡単に動作確認ができます 1. 画面下のメニューから プレビュー をクリックし ます 26

30 2. プレビューモードで 商品メニューを見てみましょう マウスポインターを商品メニューの上に置いてみましょう 先ほど階層を下げたメニューがサブメニューとして表示されています 編集モードに戻しましょう 画面先下部のメニューから 編集 をクリックし ます 3. 編集画面に復帰します 27