ヨロン観光まちづくり支援サービス
会員登録からホームページ公開まで
会員仮登録
本登録申請
ログイン
ホームページ
作成
公開申請
ホームページ
公開
レイアウト、デザインの設定(p6)
ホームページの設定(p3)
①
②
ホームページ作成の3つのステップ
センター 承認 センター 承認トップページの個人会員ログイン情報を入力しログインします。
①
［会員ログイン］
会員登録時に入力した『希望する団体ID』を入力します。（個人会員はメールアドレ
ログイン
管理メニューについて
ログイン後、以下のサービスメニューがご利用いただけます。
サービスメニュー画面
①ホームページ情報変更
ホームページタイトル、分類、概要、公開の設定
ホームページの基本となる情報を設定する画面です。こちらでホームページのタイトルや、 ホームページの分類、概要文、公開設定の入力を行います。
①ホームページ情報変更
各記事の詳細設定
ホームページの基本となる情報を設定する画面です。こちらではホームページで公開する各機能の （例えばお知らせ一覧での表示件数など）詳細設定をすることができます。 クリック ① 「各記事の設定」をクリッ クすると、機能メニューが表 示されますので、設定したい メニューを選択します。 ② 例えば「フォト」を選択し た際は、そのメニューに表示 する「名称」、フォト画面 1 ページに表示する「件数」、画 像のタイトルの表示有無の選 択などが設定できます。 利用例：メニューに表示させ②レイアウト・デザインの設定
「デザイン変更」ボタンをクリックすると、現状のTOPイメージ画面が表示されます。 この画面で、TOPページの各種設定を行います。 （1）「デザイン選択」ボタン 数十種類あるデザインテンプレートの中からお好みのテンプレートを選択できます。 （2）「レイアウト選択」ボタン 4種類あるレイアウトパターンの中からお好みの形を選択できます。 （3）「パーツの追加」ボタン トップ画面に表示していないコンテンツを追加します。 （4）「TOP画面イメージ」エリア トップ画面の変更イメージが表示されます。直接変更も可能です。レイアウト設定画面
クリック 保存する （1）デザイン選択 （3）パーツの追加 （4）TOP画面イメージ スタイルシート、HTML の編集 （2）レイアウト選択（1）デザイン選択
「デザイン選択」ボタンをクリックすると、テンプレートが一覧表示されます。 お好みのテンプレートをクリックし、選択したテンプレートが赤い枠で囲まれるのを確認してから、 画面左上にある「適用する」ボタンをクリックしてください。（2）レイアウト選択
「レイアウト選択」ボタンをクリックすると、レイアウトパターンが表示されます。 お好みのレイアウトをクリックし、選択したレイアウトが赤い枠で囲まれるのを確認してから、 画面左上にある「適用する」ボタンをクリックしてください。②レイアウト・デザインの設定
クリック クリック 適用する（3）パーツの追加
（3）－① TOP画面に表示しているパーツの追加を行いま す。 (A)「パーツの追加」ボタンをクリックしてください。②レイアウト・デザインの設定
（3）－② TOP画面に表示していないパーツが確認できま す。 TOP画面にコンテンツを表示する場合は、チェッ クボックスにチェックを入れ、(B)「チェックした パーツを追加する」ボタンを、クリックしてください。 また(C)「フリーエリアを追加する」ボタンをクリッ クすると、自由に内容を書き込めるフリーエリア が作れます。 上画面の“クリックで文章を追加する”をクリックし てからでもフリーエリアを追加することができます。 (A) (B) (C) （3）－③ ②でチェックを入れたコンテンツがTOPイメージに、 追加され、表示されるようになります。 (C) (C) クリック（4）TOP画面イメージエリア
②レイアウト・デザインの設定
（A）ヘッダー部分の編集を行います。 ホームページのタイトルやタイトルの文字色、背景画像等の設定ができます。 （B）コンテンツ毎に配置変更ができます。 変更したいコンテンツをマウスでクリックしたまま移動（ドラッグ）して、配置したい場所で、 マウスボタンを離す（ドロップする）と、その場所に移動します。 また、各コンテンツの右上には、下記2種類のボタンがついています。 （C）「設定」ボタン ・・・ コンテンツ名や1ページ当たりの表示記事数の変更を行います （D）「削除」ボタン ・・・ TOPページへの表示をとりやめます。非表示になったコンテンツは 「パーツ追加」画面（ 前頁（3）－②）で確認できます。 （E）フッター部分の編集を行います。 必要に応じて、注意書きや、お問い合わせ先などを書き込むことができます。 （F）変更が終わったら、最後に必ず「保存する」ボタンをクリックしてください。 ※「保存する」ボタンをクリックしないと、変更した内容が反映されませんので、ご注意ください。 (F) (A) (B) (E) (C) (D) ドラッグ＆ドロップで位 置を移動できます。 クリック（５）メニューの公開設定 （利用するメニューの設定方法）
②レイアウト・デザインの設定
ホームページメニューには次ページで説明する基本メニューがありますが、それらの公開設定 （機能を利用するかしないか）や、メニューの並び順をこちらで設定することができます。 「設定」をクリック 基本メニューの表示順とそれ らの公開設定を入力します。ホームページメニュー一覧 本システムでは、ホームページ上に下記7種類のメニューを掲載することができます。 ①お知らせ ②日記 ③アルバム ④フリーページ
③記事の登録
ホームページ記事登録画面
お知らせ記事を登録・更新できます。 ブログ形式で日々の出来事やコラムなどが掲載できます。コメント受付も可能です。 写真を中心とした掲載形式です。 1ページで完結する自由なレイアウトページが作成できます。 ※フリーページは複数作成可能です。 ① ② ③ ④団体概要の登録
③記事の登録
作成したホームページと同様に会員登録された団体様を広くご紹介するために、団体概要のページを ご用意しております。 まずは、こちらの団体様の概要を詳しく登録し、公開しましょう。 団体概要（企業概要）登録画面①団体概要の入力
団体概要について、項目に沿っ
て入力します。
※入力項目については、より多く
の項目を入力された方が、検索
にて優位に表示されますので、
是非ご登録ください。
クリック②項目追加
入力項目を増やしたい場合は、
「項目を追加する」をクリックし、
追加項目数を選択してください。
地図の登録
③記事の登録
団体概要（企業概要）登録画面②位置の登録
目的の位置が地図の中心部 (
＋マークの位置)にくるように地
図を移動させます。
※地図上に位置を表示させたい
場合は、こちらの設定が必ず必
要になります。
クリック①地図情報の設定
地図情報を設定する場合は、
地図情報をクリックします。
(A)「検索」ボタン 一覧の中から、入力した文字が含まれる記事を検索します。（検索範囲は、タイトル及び本文） 「詳細検索」をクリックすると、より細かい範囲での検索が可能です。 (B)「新規記事作成」ボタン 記事の新規作成を行います。 記事タイトルを入力した後、「新規作成」ボタンをクリックすると、 詳細内容を編集する画面が表示されます。 (C)「記事一覧」エリア 登録された記事の一覧です。記事のタイトルをクリックすると編集画面が表示されます。
③記事の登録
基本編
(B)新規記事作成 (C)記事一覧記事一覧画面
(A)記事検索 (D) クイック公開機能 (D)公開設定・削除ボタン お知らせ・日記など一部のメニューには、登録した記事の「公開」、「非公開」、「削除」を 一覧画面より設定可能となります。③記事の登録
基本編
お知らせ、日記、フリーページでの編集画面タイプについて説明します。 保存する （6）公開設定編集画面（ビジュアル編集タイプ）
※お知らせ、日記、フリーページ （1）記事タイトルの入力 （4）テンプレート （段落の編集） （3）機能メニュー 文字・画像、 表の編集 プレビュー (5）写真をのせる（1）記事タイトルの入力
タイトル部分にマウスを合わせてクリックすると、直接変更できるようになります。 ※この時、半角カタカナの使用は避けてください。（2）本文の入力
入力領域に合わせて、本文を入力します。このエリアに文字を入力
③記事の登録
基本編
このエリアに文字を入力
（２） 日記設定
日記機能には、タイトル以外に、日記の日付を入力することができます。③記事の登録
基本編
このエリアにて日記日 付を設定します。 ※初期値として、当日の日 付が設定されています。（3）機能メニュー 文字・画像、表の編集
（3）-① 変更したいテキストを選択します。 （3）-② 「文字編集」ボタン をクリックし、太字にします。 （3）-③ 文字色パレットより「赤」を選択します。 ※（3）-②、 （3）-③については順不同 （3）-① テキストを選択 （3）-②「文字編集」ボタン （3）-③ 文字色パレット③記事の登録
基本編
編集ボタンの説明
③記事の登録
基本編
文字サイズ
文字のサイズを1～7まで設定できます。フォント
文字のフォントを4種類の中から選ぶことができます。文字色
表示されているカラーの中から文字色を選ぶことができます。太字
選択された文字に太字を設定します。斜体
選択された文字に斜体を設定します。下線
選択された文字にアンダーラインを設定します。左寄せ
文字を左寄せにします。中央寄せ
文字を中央揃えにします。右寄せ
文字を右寄せにします。リンク作成
文字にリンクを貼ります。リンク解除
文字に貼ってあるリンクを解除します「。編集ボタンの説明
③記事の登録
基本編
箇条書き
文章を自動で箇条書きスタイルに設定します。段落番号
文章を自動で段落番号付きの箇条書きスタイルに設定します。動画挿入
動画サイトYouTubeの動画を掲載することができます。箇条書き
段落番号
動画挿入
記事内容は、１つ以上の段落からなります。段落のレイアウトは５種類のテンプレートより選択 できます。複数の記事や、サブタイトルを登録したり、写真や添付資料の数を自由に追加するこ とができます。
（4）テンプレート（段落の編集）
テンプレート「本文+画像（左）」パターンを選 〈テンプレートのレイアウトパターン〉 ・本文のみ ・本文＋画像（右） ・本文＋画像（左） ・本文＋画像（上） ・本文＋画像（下）③記事の登録
基本編
（5）
写真をのせる (エクセルやPDF、テキスト等のファイルをのせる）
「写真をのせる」ボタンをクリックすると、アップロードする画像（ファイル）選択画面が表示され、 記事に挿入したいファイルを選択します。③記事の登録
基本編
（5－1）写真の登録方法について クリック クリック （5-1）-① “写真をのせ る” をクリック （5-1）-② “ファイルを選 択する”をクリック （5-1）-③ 登録するファイルを選択 ※複数選択することも可能です。 （5-1）-④ 登録するファイルを選択 し、“開く”をクリックすると自動でアッ プロードが開始されます。（5）
写真をのせる
③記事の登録
基本編
（5－1）写真の登録方法について 続き （5-1）-⑤ 画像が正常にアッ プロードが完了すると、画面に アップロードされた画像が一覧 で表示されます。 （5-1）- ⑥ 画像を挿入したい 個所にカーソルを合わせ、挿 入する画像をクリックすると、 編集画面に写真が挿入されま す。 写真を追加したい場合は、「写 真を追加する」をクリック（5）
写真をのせる
③記事の登録
基本編
（5－2）写真の登録方法について 以前登録した写真や素材を利用する （5-2）- ① “アップロード済 みのファイルを全て参照する” をクリック (5-1)では新規に写真を登録する方法を説明してきました。こちらでは、以前に登録した写真を利 用する方法をご紹介します。 （5-2）-② 以前に登録した画 像が一覧で表示され利用でき るようになります。③記事の登録
基本編
（6）-① 公開設定をクリックすると、公開期間だけでなく、新着表示の設定や、記事の分類選択、キーワードな ど公開における詳細設定を行えます。 （6）- ① 「 マークの表示設定」 一覧画面に マークを表示するかしないかとその表示期間の設定ができます。 （6）- ② 「 分類」 記事単位に分類を設定することができます。記事に分類を選択することで、分類ごとに記事を検索で きるようになります。（準備中） （6）- ③ 「キーワード」 一覧画面でキーワード検索を行う際の検索条件になります。 カンマ区切り（,）で複数指定できます。 （6）- ④ 「公開設定」 ホームページに掲載する準備ができたら、「公開する」にチェックを入れてください。 （6）- ⑤ 「トップへの表示」 よかBuyネットトップページに掲載したい場合、“表示する“を選択します。初期値では”表示”するにて 登録されます。（6）記事の公開設定について
（6）-② （6）-③ （6）-④ （6）-⑤ クリック記事の登録
(A)「新規登録」ボタン アルバム管理画面 アルバム機能を利用すると、以下のようなフォトギャラリーを簡単に作成することができます。 (B)アルバム一覧 公開トップ画面 (A)新規登録アルバム
記事の登録
(C) 「アルバム情報」エリア アルバムの情報を表示しています。 (D) 「写真を追加」ボタン 画像を一つずつ、タイトルや公開期間 などの詳細設定を入力したい際に利用 します。 (E) 「動画を追加」ボタン YouTubeに公開されている動画の URLを入力することで、総ガが挿入され ます。 (E)動画を追加 (F)一括登録 (D)写真を追加 (C)アルバム情報 (G)登録画像一覧 (F)「一括登録」ボタン 画像を一括登録する際に利用します。 ※詳細設定は初期値にて登録されます。 (G) 「登録画像一覧」エリア 登録されている画像をすべて一覧で 表示しています。アルバム
記事の登録
E 「動画を追加」 1. 動画ID・・・登録したいYouTube動画のIDを入力 2. タイトル・・・動画タイトルを入力 3. 説明・・・動画の説明を入力 4. ギャラリーへの公開・・・公開・非公開の選択 5. 並び順・・・・・動画の並び順を入力 動画を追加では、動画のタイトルや並び順、説明などの詳細設定を個別に入力することができます。 D 「写真を追加」 写真を追加では、画像をひとつずつ、タイトルや並び順、画像サイズなどの詳細設定を個別に入力する ことができます。 1. ファイル選択・・・登録したいファイルを選択 2. 画像サイズ選択・・・登録する画像サイズを選択 （自動でリサイズされます） 3. 画像コメント・・・画像にカーソルを乗せた際に表 示されるALT表示に利用します。 4. タイトル・・・・・画像タイトルを入力 5. 説明・・・画像の説明を入力 6. フォトギャラリーへの公開・・・公開・非公開の選 択 7. 並び順・・・・・画像の並び順を入力アルバム
記事の登録
（5－3）-B -① 登録するファイルを選択 ※複数選択することも可能です。 （5－3）-B -② 登録するファイルを選択 し、“開く”をクリックすると自動でアッ プロードが開始されます。 F 「一括登録」 一括登録では、撮りためた画像を一括で簡単に登録することができます。 ※一括登録後でも、新規登録のように詳細設定を登録することが可能です。 1. タイトル・・・・・ファイル名が自動で設定されます。 2. 並び順・・・・・自動で登録順に（1～）登録されます。 3. 画像サイズ・・・指定しない（オリジナルサイズ）で登 録されます。（※サイズが大きすぎる画像は自動で最 ※一括登録時の初期入力項目について クリックアルバム
記事の登録
フリーページを利用すると、自由にページを追加・編集することができ、個別のメニューとしてページを 作成することができます。 基本的な操作方法はこれまで述べてきた記事の登録方法と同じです。 メニューに、フリーページで作 成したページが追加されます。フリーページ
素材管理について
記事登録などに利用した素材（写真やテキスト、PDF、エクセル等のファイル）は素材として、素材管理 にて一括にて管理することができます。 過去に登録された素材が一覧 で確認することができます。 タイトルをクリックすると、素材 の編集画面が表示され、変更 または削除が行えます。 “素材管理“をクリックします。ホームページアクセス数について
作成したホームページへのアクセス数を見ることができます。 メニュー毎の総アクセス数を一 覧で表示します。 ※期間を指定して集計表示す ることができます。 お知らせ等のメニューは、さら に記事単位へのアクセス数を 閲覧することが可能です。 “全アクセス数閲覧 “をクリック します。会員情報照会・変更について
会員情報を照会・変更したい場合は、以下のサービスメニューより、会員情報照会・更新ボタンより行えま す。
退会について
会員から脱会したい場合は、以下の会員情報照会・更新画面より行います。 ※会員を一度脱会されると、再度申し込みされた場合でも復旧できませんのでご注意ください。 会員情報照会画面の下部の “退会される方はこちらから”を クリックし、退会申し込みフォー ムより行います。ヘッダー画像登録 中級操作編
ホームページの標準テンプレートで設定されているヘッダーについては、ご自身の好きな画像を登録し て、独自のヘッダーデザインを設定することができます。 クリック(1) ヘッダーに画像を挿入する
①ヘッダー編集画面にて “P21ページの写真をのせる”と 同様の操作にて挿入したい画 像をクリックします。 ※予めヘッダーに挿入したい 画像を用意しておくとスムーズ に挿入が行えます。 ②画像が挿入されますので、 挿入した画像の位置や、ヘッ ダーの幅を調整して「適用す る」ボタンをクリックします。 ③レイアウト設定画面に戻りま すので、そちらでイメージを確 認し、OKなら「保存する」ボタン で完了です。ヘッダー画像登録 中級操作編
全項では、ヘッダーに画像を挿入する操作を説明しましたが、こちらではヘッダーの背景に画像を挿入 する方法をご紹介します。 背景に画像を挿入すると、背景画像の上に重ねて、文字を入力したりする ことが可能となります。 クリック(2) ヘッダーの背景に画像を挿入する
②「背景の設定」ボタンをクリッ クして、背景の設定画面を開き ます。 ③タイトルの背景画像項目の 「ファイルを参照」をクリックす ると、登録されている素材一覧 が表示されます クリック クリックヘッダー画像登録 中級操作編
(2) ヘッダーの背景に画像を挿入する（つづき）
④画像が挿入されたことを確 認し「適用する」ボタンをクリッ クします。 ⑤レイアウト設定画面に戻り、 背景に画像が挿入されたこと を確認します。 背景上で、テキストの編集が可 能となりますので、自由に文字 の入力や、さらに画像を重ねた りすることができるようになりま す。 クリックホームページ
背景上で、テキストの編集が可能となります登録画像の加工 中級操作編
登録されている画像素材については、簡易的な画像加工編集機能が用意されています。 ヘッダー画像用にサイズを変更した画像を作りたい場合などにご利用いただけます。 ①画像一覧のそれぞれの画像に 「編集」というリンクがありますので、 そちらをクリックします。 拡大 クリック ②画像加工編集画面が開きます。 こちらでは、 １.イメージの縮小 ２ .イメージのトリミング ３ .イメージの回転 ４ .イメージのコントラスト ５ .イメージの明るさ の操作が行えます。 次項にて２．“イメージのトリミング“の 活用例についてご紹介しています。ホームページ
背景上で、テキストの編集が可能となります登録画像の加工 中級操作編
トリミング機能を利用し、ヘッダー画像用に画像を加工する事例をご紹介します。 ①編集したい画像を選択し画像加 工編集画面を開きます。 今回は、元サイズ幅950px 高さ 400pxの画像を 幅950 px 高さ200ｐxにトリミング してみます。 拡大 ②トリミングサイズ入力項目に幅950 高さ200 と入力し、 「セット」ボタンをクリックします。 ③トリミング領域（明るい部分） が画像内にセットされます。 ※上下にトリミング領域は移動可 能ですのでトリミングする位置を調 整しましょう。 位置が決定したら、「トリミング」ボ タンをクリックします。 クリック クリック ④画像がトリミングされますので、 画像を保存します。レイアウト変更
上級操作編
レイアウト設定においては、ご自身でテンプレートのHTMLおよびスタイルシートを編集し、独自のテン プレートデザインを作成することが可能です。
