ブログを作るような簡単操作で本格的なホームページの作成・更...

14
Dream CMS 操作マニュアル ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえます。 http://dream-cms.jp 株式会社コア 山口県山口市後河原35-1 ウッズプラザ1-2F TEL:083-932-1300 FAX:083-932-1300 info@coresite.ne.jp

Upload: others

Post on 18-Oct-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

Dream CMS 操作マニュアルブログを作るような簡単操作で本格的なホームページの作成・更新が行なえます。

http://dream-cms.jp株式会社コア 山口県山口市後河原35-1 ウッズプラザ1-2F TEL:083-932-1300 FAX:083-932-1300 info@coresite.ne.jp

Page 2: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

Dream CMS 目次

DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

るツールです。

単純なデザイン設定、新着情報の掲載、カテゴリやページの編集といった必要最低限の機能

に絞っているため、HTMLやFTPなどの専門知識がなくても、インターネットにアクセスでき

るパソコンがあればサイト制作・更新管理が行なえます。

また、ブログと同程度のSEO対策も施しております。

簡単に新着情報の記事を作成したい、定期的にサイトデザインをマイナーチェンジしたい、

ページデザインに統一性を持たせたい、カテゴリやページを自由に追加してコンテンツを

充実させた、そんなご要望にお応えいたします。

1.公開サイトのトップページ

 ~設置後の基本構造と編集可能領域~

2.管理画面 - 管理画面トップ

 (1)サイト基本設定

 (1)サイト基本設定-基本設定の編集

 (2)カテゴリの新規作成と編集

 (2)カテゴリの新規作成と編集 - カテゴリオプション

 (3)ページの新規作成と編集

 (3)ページの新規作成と編集 - エディタ入力

   文字装飾

   画像の配置

   ハイパーリンクの配置

 (4)新着情報の新規作成と編集

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 1

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 2

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 3

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 4

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 5

・・・・・・・・・・・・・・・・・・・・・・・・・・・ 6

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 7

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 9

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 9

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 10

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 11

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 12

Page 3: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

1.公開サイトのトップページ ~設置後のサイト構造と編集できること~

設置後のホームページのトップページは、下画像のような状態になっています。ここでは、各ブロック単位の説明と、管理画面で編集が行える内容を説明します。なお、公開用ホームページおよび管理画面のアドレス、ログインアカウントは、別紙にてご確認ください。

全てのページに亘って表示されるヘッダ画像です。好きな画像に変更することができます(管理画面に記載された適切なサイズで画像をご用意ください)。

ヘッダ画像

管理画面からは、ヘッダおよびメイン画像の変更に加え、背景色の切り替え、メニューの左右配置切り替えによるデザインのマイナーチェンジが行えます。管理画面からこれらの簡単な編集を行うことで、左のトップページは下画像のように変わります。

サイトの名称と、サブタイトルを表示させることができます(非表示も可能)。また、ヘッダ画像にあわせて文字色の選択も行えます。

好きな画像(横幅規定サイズ)に変更することができます。表示しない設定も行えます。

メイン画像サイトの名称・サブタイトル

サイトの紹介文など自由に情報の表示が行えます。文字だけでなく画像も配置できます。

メインテキスト新着情報が新しい順に一覧表示されます。記事は簡単に編集・作成ができます。新着情報枠をメインテキスト枠の上に表示させることもできます。

新着情報全てのページに亘って表示されるフッタ情報です。Copyrightや連絡先など自由に編集が行えます。

フッタ情報

メニューは大項目としての「カテゴリ」と、その下にぶら下がる「ページ」で構成されます。管理画面では、カテゴリやページを自由に作成したり、表示順位などの設定が行えます。また、カテゴリ配下のページ数が多すぎることで、メニューが縦長になる場合、初期状態でページを表示する/しないの選択(折りたたみ設定)ができます。その他、カテゴリやページから外部サイトやデータファイルに直接リンクさせることもできます。

カテゴリとページ

カテゴリ自体にリンク設定をしたり、配下にページを作成するだけでなく、「お問い合わせ先」のようにカテゴリの下に文字や画像を配置することもできます。この機能を応用してメニューにバナー画像などを設置することができます。

1

● デザイン・レイアウトの変更

Page 4: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

2.管理画面 - 管理画面トップ

管理画面用アドレスにアクセスすると、ログイン画面が表示されますので、別紙記載のログインIDとパスワードでログインしてください。管理画面では、サイトの名称やデザインなどの初期設定をはじめ、サイトメニューの大項目としての「カテゴリ」や、カテゴリにぶら下がる「ページ」の作成・編集、新着情報の作成・編集が行えます。ログイン後の管理画面トップの各機能は以下の通りです。

作成済みのカテゴリが一覧表示されています。「カテゴリタイトル」をクリックすると配下のページが一覧表示され、「編集」を押すとカテゴリの設定画面が表示されます。(詳細後述)

(2)カテゴリの管理60分間、何の操作も行なわなければ自動的にログアウトし、ログイン画面に移行します。その際、編集中の内容は反映されませんのでご注意ください。

● 自動ログアウト機能

バナーをクリックすると、管理画面内のどのページにいても、管理画面トップ(このページ)に移動します。

操作完了後はログアウトボタンをクリックしてください。

ログアウトカテゴリの管理-Home

「カテゴリ」の順番を変更する場合、「表示順」の数字を変更したうえでクリックします。若い数字ほど上に表示されます。

表示順設定「カテゴリ」にぶら下がる「ページ」を新たに作成する場合にクリックします。(詳細後述)

ページの新規作成コンテンツの大項目としての「カテゴリ」を新たに作成する場合にクリックします。(詳細後述)

カテゴリの新規作成

サイトの名称、ヘッダおよびメイン画像、フッタ情報など基本的なサイト情報に加え、サイト自体の公開開始・修了日時の設定や、簡単なデザインカスタマイズなどを行います。(詳細後述)

(1)サイト基本設定

新着情報の新規作成・編集・削除、表示順の変更などの管理を行います。公開中の新着情報のタイトルは、公開用サイトのトップページに一覧表示されます。(詳細後述)

(3)新着情報

公開用サイトを別画面で開きます。管理画面の設定内容を確認する場合、都度クリックして最新の情報に切り替えてご覧ください。

公開用サイトの確認

画面中央と同様、作成済みのカテゴリ一覧が表示されています。タイトル後の( )内の数字は、カテゴリ配下に存在するページ数を表しています。

現在登録中のカテゴリ

2

Page 5: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

(1)サイト基本設定

サイトの名称、ヘッダおよびメイン画像、フッタ情報など基本的なサイト情報に加え、サイト自体の公開開始・修了日時の設定や、簡単なデザインカスタマイズなどを行います。また、上級者用に独自CSSによるレイアウトのカスタマイズ機能もご用意しています。

独自CSS(スタイルシート)によるレイアウトのカスタマイズ機能もご用意しておりますが、CSSに関する知識をお持ちの方による編集をおすすめします。

● 独自CSSによるカスタマイズ(エキスパート用)

3

メニューの「サイトの基本設定」をクリックすると、最初に現在の設定状態の確認画面(下画像)が表示されます。

①現在の基本設定確認基本設定を編集するには「基本設定の編集」タブをクリックします。※次ページを参照

②基本設定の編集独自CSSによるレイアウトのカスタマイズが行えます。

CSSの編集

Page 6: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

サイトの説明や住所など、お好きな文字を入力することができます。サブタイトル1・2いずれも150 文字以内で入力してください。

②サブタイトルサイトの名称を設定します。ここで設定した内容がブラウザのタイトルバーおよびヘッダ部分に表示されます。ヘッダ部分にサイトの名称を表示させたくない場合は、「表示」から「非表示」に切り替えてください。

①サイトの名称

※設定必須

サイトの名称、サブタイトル共通の文字色を設定します。ヘッダ画像の色に応じて変更してください。

③ヘッダ文字色指定

※設定必須

※設定必須

※設定必須

サイト内の全てのページに表示されるヘッダ画像を設定します。登録画像は適切なサイズ(横950ピクセル×縦108ピクセル)で設定してください。

⑥ヘッダイメージ

トップページのメインイメージとなる画像を設定します。登録画像は適切なサイズ(横700ピクセル)で設定してください。※縦サイズは自由です。

⑦メインイメージ

背景色とメニューの左右位置を設定します。

⑩デザインテンプレート

新着情報一覧の配置を⑨のメインテキストよりも上に表示したい場合にチェックします。

⑪新着情報を優先

SEO対策の観点から、サイトのキーワードおよびサイトの説明を入力されることをお勧めします。

⑬WEBサイトメタ情報

サイトの公開開始日時を設定します。サイトのオープン日時が決まっている場合などに設定してください。※編集内容を実際のサイトで確認するためには、過去の日時を指定しておく必要があります。

④公開開始日時

サイトの公開修了日時を設定します。サイトの閉鎖日時が決まっている場合などに設定してください。永続的に公開を行う場合は何も入力せずに設定してください。

⑤公開修了日時

サイト内の全てのページ下部に共通して表示されるフッタ情報(Copyrightやお問い合わせ先など)を入力します。

⑧フッタ情報

⑨メインテキスト

4(1)サイト基本設定-基本設定の編集

日付の入力フォームに年月日を直接入力する(記入例:2009-07-23)か、またはカレンダーを表示させて対象日を選択します。カレンダーは入力フォームをクリックすることで表示されます。

現在の日時が公開開始日時よりも前、または公開終了日時よりも後の場合、公開サイトトップ画面には、「現在このサイトは公開期間外となっております」と表示されます。なお、編集内容を実際のサイトで確認するためには、過去の日時を指定しておく必要があります。

● 公開開始日時・公開終了日時の設定

設定をONにした場合、公開用サイトには、「このサイトは、管理者により非表示に設定されています。」とテキスト表示されます。

● 強制非表示

「編集内容の確定」ボタンをクリックした後に表示される確認画面の「更新」ボタンをクリックすることで編集内容が反映されます。

● 編集の確定

日付フォームをクリックすると現れるカレンダー

チェックすると表示期間内であっても強制的に非表示になります。公開中、一時的にサイトを非公開にしたい場合に設定します。

⑫強制非表示

入力後、「編集内容の確認」ボタンをクリックして確認画面へ進み、最後に必ず「更新」ボタンをクリックしてください。

⑭編集内容の確認

トップページに表示されるテキスト等の情報は、専用エディタを用いて編集します。※詳細はページの編集項目を参照

Page 7: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

5(2)カテゴリの新規作成と編集

● サブメニューの表示方法

カテゴリを編集するには「カテゴリの新規作成」ボタンをクリックします。既存のカテゴリを編集するには、編集したいカテゴリの「編集」をクリックします。

カテゴリの新規作成

このカテゴリの表示順を設定します。公開サイトのメニューの配置順序に影響します。若い数字ほど上位表示されます。

②カテゴリの表示順カテゴリの名称を設定します。ここで設定した内容が公開サイトのメニュー部分に表示されます。

①カテゴリの名称

カテゴリの公開開始日時を設定します。未来の日時を設定している場合は、カテゴリ以下全てのページが非表示になります。※編集内容を実際のサイトで確認するためには、過去の日時を指定しておく必要があります。

③表示開始日時

※設定必須

※設定必須

公開サイトのカテゴリメニュー開閉の初期状態を、開いた状態にするか、閉じた状態にするかを選択します。公開サイトでは、カテゴリタイトルをクリックすることで、開閉の状態を切り替えることができます。※この設定は、画面最下部の「カテゴリーオプション」が未設定のときにのみ有効です。

⑤サブメニューの表示方法

外部リンクや、ファイルリンク、ダイレクトページ等の特殊なカテゴリを作成します。※次頁参照

⑧カテゴリオプション

※設定必須

カテゴリの公開修了日時を設定します。カテゴリ自体の閉鎖日時が決まっている場合などに設定してください。永続的に公開を行う場合は何も入力せずに設定してください。

④公開修了日時

チェックすると表示期間内であっても強制的に非表示になります。公開中、一時的にカテゴリを非公開にしたい場合に設定します。

⑥強制非表示

公開サイトのカテゴリにページ情報を持たせず、またリンク先設定も行なわず、右画像のように文字情報の表示だけを行ないたい場合は、「文字情報」フォームにテキストを入力します。HTMLソースの直接入力により、画像の表示も行なえます。

⑦文字情報

① 開いた状態

② 閉じた状態

サブメニューの表示方法で「開いた状態にする」を選択した場合、公開サイトの初期状態は、下画面の「① 開いた状態」となります。「閉じた状態にする」を選択した場合は、公開サイトの初期状態は、下画面の「② 閉じた状態」となります。メニューのカテゴリタイトルをクリックすることで、カテゴリにぶら下がるページを開いたり閉じたりすることができます。

● カテゴリの文字情報設定公開サイトのカテゴリにページ情報を持たせず、またリンク先設定も行なわず、下画像のように文字情報の表示だけを行ないたい場合は、「文字情報」フォームにテキストを入力します。HTMLソースの直接入力により、画像の表示も行なえます。

Page 8: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

外部サイトの特定のページに直接リンクさせたい場合、サイトアドレスを入力すると、詳細情報(配下のページ)を表示せずに直接外部リンクします。

外部リンク設定

PDFなどのデータファイルに直接リンクさせたい場合に指定します。「ファイルリンク設定」からリンクさせたいファイルを選択してください。

ファイルリンク設定

カテゴリタイトルをクリックして、このカテゴリ内部の特定のページに直接リンクさせたい場合に設定します。このカテゴリに登録されているページのみ選択可能なため、まずは、このカテゴリ配下のページを作成したうえで、「ダイレクトページ設定」から該当のページを選択する必要があります。

ダイレクトページ設定

公開サイトのカテゴリタイトルをクリックすることで、外部サイトやサイト内部の特定のページ、或いはデータファイルにダイレクトリンクさせたい場合は、カテゴリオプションで設定を行ないます。重複設定がある場合、「外部リンク設定」→「ファイルリンク設定」→「ダイレクトページ設定」の順での優先順位です。

6

● カテゴリの作成編集が完了したら、「確認」ボタンをクリックのうえ、内容を確認して「更新」ボタンを必ずクリックして反映させてください。

(2)カテゴリの新規作成と編集-カテゴリオプション

Page 9: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

ページの公開修了日時を設定します。ページの閉鎖日時が決まっている場合などに設定します。永続的に公開を行う場合は何も入力せずに設定してください。

公開修了日時

チェックすると表示期間内であっても強制的に非表示になります。公開中、一時的にページを非公開にしたい場合に設定します。

強制非表示

7

ページを新規に作成するには「ページの新規作成」ボタンをクリックします。既存のページを編集するには、カテゴリリストから編集対象のファイルが含まれるカテゴリ名をクリックします。

ページの新規作成

ページ一覧が表示されたら、編集対象ページのタイトルの「編集」をクリックします。ページの表示順を変更するには「表示順」の番号を変更し、「表示順設定」ボタンをクリックします。

ページの編集

作成するページが属するカテゴリを選択します。

作成先カテゴリ

(3)ページの新規作成と編集

ページのタイトルを入力します。ページの名称

※設定必須

※設定必須

ページの表示開始日時を設定します。未来の日時を設定している場合は、ページが非表示になります。※編集内容を実際のサイトで確認するためには、過去の日時を指定しておく必要があります。

表示開始日時 ※設定必須

Page 10: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

当ページの関連資料をページ下部に添付させることができます。「参照」ボタンから添付させたいファイルを選択し、複数のファイルを添付させる場合は「+追加」ボタンでフィールドを追加してください。ファイルは1度に6つまで添付ができます。また、添付ファイルの合計数に上限はありません。※ページ内の文字や画像にファイルを添付させる場合は、エディタの「リンク挿入/編集」アイコンで操作を行なってください。

添付ファイルの設置

8ページの内容を作成するには「文字情報」タブのエディタからコンテンツを作成をします(編集方法は、次ページ以降を参照ください)。メニューのページタイトルから外部サイトおよびファイルへ直接リンクさせる場合は、「外部リンク設定」および「ファイルリンク設定」タブをそれぞれクリックします。

ページの内容

ページ内に表示するコンテンツを入力します。テキストの入力・装飾に加え、画像やテーブル、絵文字などが配置できます(編集方法は、次ページ以降を参照ください)。

編集エディタ

公開サイトのメニューのページタイトルから外部サイトに直接リンクさせる場合は、「外部リンク設定」タブで「外部リンク設定」にリンク先アドレスを入力します。「リンク先の展開方法」では、リンク先のページを同じ画面で開くか、別の画面で開くかの設定を行ないます。

外部リンク設定

ファイルリンク設定公開サイトのメニューのページタイトルからファイルに直接リンクさせる場合は、「ファイルリンク設定」タブから「ファイルリンク」でリンク先ファイルデータを選択します。

● ページ作成内容の反映

ページの入力が完了したら、ページ最下部の「確認」ボタンをクリックして確認画面を表示させます。

確認画面の内容で良ければ、ページ最下部の「登録」ボタンをクリックして内容を確定させます。

Page 11: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

(3)ページの新規作成と編集-エディタ入力

編集エディタでは、テキストの入力や画像の添付とともに文字装飾、オブジェクトへのハイパーリンク設定などが行えます。編集画面と公開画面での表示がほぼ同じ内容のため、直感的な編集作業が可能です。作業完了後は、ページ下の「編集内容の確認」で内容確認のうえ、「更新」ボタンを必ずクリックしてください。

テキスト入力の際、普通に[改行]をクリックすると行間が広い状態で改行されます。改行の行間を狭くしたい場合、改行時に[SHIFT]キーを押しながら[改行]キーを押して下さい。

● 行間の制御

作業完了後は、ページ最下の「編集内容の確認」ボタンをクリックして確認画面を表示し、内容確認をしたうえで確認画面最下の「更新」ボタンをクリックします。

● 更新の反映

9

文字装飾や画像配置、テーブル(表組み)作成などの操作を行います。カーソルをアイコンの上に持っていくと、アイコンの説明が表示されます。

編集メニュー

この枠内でコンテンツを作成します。基本的な操作方法はMS-Wordなどのアプリケーションによく似ています。

HTMLエディタ

太字 : 文字を太くします。

斜体 : 文字を斜めにします。

アンダーライン : 文字の下に線を置きます。

取り消し線 : 文字に打ち消し線をひきます。

テキスト色 : 文字色を設定します。

背景色 : 文字の背景に色を設定します。

特殊文字入力 : äや€など、キーボードから入力し難い特殊文字をパレットから入力します。

段落番号の追加/削除 : 行頭に段落番号を追加・削除

箇条書きの追加/削除 : 行頭に目印付きで段落のある文章にします。

左揃え : 文字や画面の左側に揃えます(初期状態)。

中央揃え : 文字を画面の中央に揃えます。

右揃え : 文字を画面の右側に揃えます。

インデント : 文章の左端位置の字下げをします。

インデント解除 : 字下げを解除します。

サイズ : 文字のサイズを設定します。

スタイル : 文字にタイトルバーを設定します。

HTMLエディタ内にテキストを入力し、編集したいテキストをカーソルで選択して文字装飾ボタンをクリックします。

以下は文字に限らず画像などのオブジェクトにも適応できます。

文字装飾

② ⑤ ③

すると、以下のように装飾されます。

①文字を入力します。②「HTMLエディタの入力練習です。」をカーソルで選択し 「スタイル」でお好みのスタイルを選びます。③「文字を太字にします。」をカーソルで選択し「太字」アイコン をクリックします。④「文字に色をつけます。」をカーソルで選択し「テキスト色」で お好みの文字色を選びます。⑤「文字を大きくします。」をカーソルで選択し「サイズ」から お好みの文字サイズを選びます。

Page 12: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

アップロード画像が多い場合、アップロード先のサーバにフォルダを作成して画像を格納すると整理し易くなります。フォルダの作成は、「ファイルブラウザーウィンドウ」の「新しいフォルダを作成」をクリックます。

別ウィンドウが開くので、ファイル名を入力して「OK」を実行します(ここでは、image02というフォルダを作成)。

image02というフォルダが作成されました。このフォルダをクリックします。

image02フォルダの中が表示されます(最初は空の状態)。このフォルダ内に画像をアップロードする場合は、この状態から「参照」ボタンを押して画像を選択します。

画像が表示されたら(アップロードされたら)、選択して配置します。

● アップロード先フォルダの作成

10

画像を配置したい部分にカーソルを持っていきます。

①画像配置箇所の設定「イメージ挿入/編集」アイコンをクリックしてイメージプロパティを開きます。

② 「イメージ挿入/編集」アイコン

画像の配置

「サーバーブラウザー」ボタンをクリックして「ファイルブラウザーウィンドウ」を開きます。

③ サーバーブラウザー

「ファイルブラウザーウィンドウ」が立ち上がりますので、「参照」ボタンをクリックしてアップロードしたい画像を選択し、「アップロード」ボタンをクリックします。

④ 配置画像のアップロード

「ファイルブラウザーウィンドウ」内に配置したい画像が表示されたら、その画像をクリック選択します。

⑤ 配置画像の選択

イメージプロパティで必要に応じて幅や高さ、行揃え(配置の位置)を設定し、「OK」をクリックします。

⑥ 画像の配置

配置後も画像の位置やサイズ調整が行なえます。画像をクリックすると8箇所にポイントが表示されますので、ポイントを押しながらマウスを移動させるとサイズ調整が行なえます。また、画像を選択して「中央揃え」「右揃え」アイコンをクリックすると配置調整ができます。

⑦ 画像の配置調整

Page 13: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

ハイパーリンクの配置

編集エディタ内のリンクを設置したいテキストをカーソルで選択します。画像の場合は画像をクリックして選択します。

テキストや画像に対して、外部サイトへのリンク、および関連ファイルへのリンクを設置することができます。配置したいテキストや画像を選択し、「リンク挿入/編集」アイコンをクリックして「ハイパーリンク」ウィンドウで設定します。設定完了後は必ず「OK」ボタンで確定させます。

① リンク設置場所の設定

「リンク挿入/編集」アイコンをクリックして「ハイパーリンク設定ウィンドウ」を開きます。

② リンク挿入/編集

外部(または内部)のサイトにリンクさせたい場合は、「ハイパーリンク情報」のタブの「URL」に該当のアドレスを入力して「OK」を押します。

PDFやエクセルなどのファイルにリンクさせる場合は、「アップロード」タブの画面で「参照」からリンク先を選択して「サーバーに送信」ボタンをクリックします。

「ハイパーリンク情報」タブに自動移行し、URLフォーム内に選択したファイル名が表示されていることを確認します。

リンク先の画面やファイルを同一画面で開くか、別画面で開くかの設定は、「ターゲット」タブで行ないます。同一画面で開くには「新しいウィンドウ[_blank]」を、別画面で開くには「同じウィンドウ[_self]」を選択します。

サイトのリンク設定 ファイルへのリンク設定

メールアドレスなどをクリックした際にメールソフトを起動させたい場合は、「ハイパーリンク」ウィンドウの「ハイパーリンク情報」-「リンクタイプ」でE-Mailを選択します。

● メールへのリンク

E-Mailアドレスや件名などのフォームが表示されますので、対象のメールアドレスを入力します。

11

Page 14: ブログを作るような簡単操作で本格的なホームページの作成・更 …hagi-natsumikan.com/user_data/tmp/1d113a5158cbaa1de3d010acb… · Dream CMS 目次 DreamCMSは、ブログを作るような簡単操作で本格的なホームページの作成・更新が行なえ

情報の公開修了日時を設定します。イベント案内など、ページを自動的に非表示にしたい場合などに設定します。永続的に公開を行う場合は何も入力せずに設定してください。

公開修了日時

チェックすると表示期間内であっても強制的に非表示になります。公開中、一時的にページを非公開にしたい場合に設定します。

強制非表示

9~11ページを参照ページ内容の入力

8ページを参照添付ファイルの設置

12

新着情報を編集するにはメニューの「新着情報設定」で新着情報設定画面を表示します。新規に作成する場合は「新着情報の新規作成」ボタンをクリックし、既存記事の編集をするには、一覧の「編集」をクリックします。記事を削除するには「削除」をクリックします。

新着情報の編集

新着情報の入力は、基本的にページの作成方法(7~11ページ)と同様です。

(4)新着情報の新規作成と編集

ページのタイトルを入力します。ページの名称 ※設定必須

情報の表示開始日時を設定します。未来の日時を設定している場合は、ページが非表示になります。※未来の指定日時に情報を自動的に公開したい場合などに使用します。

表示開始日時 ※設定必須