.. .. .. .. .. Xyxon, Inc. www.xyxon.co.jp [email protected] Xyxon, Inc. HeartCore Web コンテンツ管理システム . . . . . . . . . . 簡易スタートガイド 簡単・安価に Web サイトを作成・公開・管理 2010 年 10 月 Version7.3 .. .. .. .. .. HeartCore Web Content Management System Getting Started 1 目次 1 目次 ............................................................................................................................................................ 2 2 はじめに ..................................................................................................................................................... 3 3 ログイン ..................................................................................................................................................... 5 4 WEB ページ ................................................................................................................................................ 6 5 ホームページ ............................................................................................................................................... 8 6 テンプレート ............................................................................................................................................... 10 7 ナビゲーション ........................................................................................................................................... 12 8 コンタクトフォーム....................................................................................................................................... 15 コンタクトフォーム 9 制限エリア ................................................................................................................................................. 19 10 検索....................................................................................................................................................... 21 検索 11 キャンペーン情報、バナー、ニュース....................................................................................................... 24 キャンペーン情報、バナー、ニュース 12 スタイルシート ........................................................................................................................................ 27 Page 2 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started HeartCore Web コンテンツ管理システム 簡単・安価に Web サイトを作成・公開・管理 2 はじめに HeartCore Web コンテンツ管理システム は、インターネット、イントラネット、エクストラネッ ト上に構築したウェブ上のコンテンツへのアクセスを容易にすることで、コンテンツの制作と 更新を支援するウェブ ソリューションです。本書では、わかりやすい手順を通じて HeartCore Web コンテンツ管理システム の使い方を説明します。下図のようなウェブサイトを制作する一 連の作業を行います。このウェブサイトでは、メニュー、コンタクトフォーム、アクセス制限 ページ、検索、バナー、キャンペーン情報といった汎用的な機能を使用します。 当社のオンライン トライアル版を試用中の場合は、次の「ログイン」セクションに進んでウェ ブサイトの制作を開始してください。 システムをお客様のサーバーにインストール済みの場合は、インストール作業と設定を正しく 行っていることをご確認ください。作業を開始する前に、トライアル版のデータベースまたは 「基本」データベースをインポート済みであることも確認してください。システムにログイン した時に「 クイックスタートの設定」 ページが表示される場合は、システムの設定が完了して Page 3 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started いません。『HeartCore Web コンテンツ管理システム ユーザガイド』の「クイックスタート設 定」セクションを参照して、指示に従ってください。 Page 4 of 28 .. .. .. .. .. 3 HeartCore Web Content Management System Getting Started ログイン ウェブサイトの制作と更新を行うには、HeartCore Web コンテンツ管理システム の管理ページ にログインする必要があります。ログイン手順を以下に示します。 ログイン ウェブサイトのアドレスに続け て「/webadmin/」をウェブ ブラ ウザのアドレス フィールドに入 力します。たとえば、以下のよ うになります。 https://www.mysite.com/webadmin/ ユーザー名とパスワードを入力 します。既定のユーザー名とパ スワードは、以下のとおりで す。 ユーザー名: admin パスワード: admin ログインに成功すると、 HeartCore Web コンテンツ管理シ ステム のトップ ページが表示さ れます。表示されるメニュー は、お使いのエディションと利 用可能なアドオン モジュールに よって異なります。 ログインできない場合は、ユ ーザー名とパスワードの大文字 と小文字の区別に間違いがない こと、前後に空白が付いていな いことを確認してください。 Page 5 of 28 .. .. .. .. .. 4 HeartCore Web Content Management System Getting Started Web ページ このセクションでは、ウェブ ページを作成して更新する方法を説明します。サンプル ウェブサ イト上の 部屋、施設、料金、キャンペーン情報、ロケーション、メンバー、ニュース といった ページは、いずれもこの方法で作成できます。連絡フォーム や 予約 といった特殊なページの作 成方法は、後続のセクションで説明します。 ウェブ ページの作成と更新 ツールバーから [ウェブサイトコ ウェブサイトコ ンテンツ] ンテンツ を選択します ページ] ページ を選択します。 [ページ ページを新規作成するに ウェブ は、[追加 追加] 追加 ボタンをクリックし ます。 - または 既存のウェブ ページを更新する には、[更新 更新] 更新 リンクをクリック します。 新しい画面が表示されます。既 存のウェブ ページのコンテンツ は、すべて [コンテンツ] フィー ルドに表示されます [タイトル タイトル] タイトル フィールドにウェブ ページのタイトルを入力する か、表示されたタイトルを更新 します。 ウェブ ページのコンテンツを [コンテンツ] フィールドに追加 するか、表示されたものを変更 します 保存して閉じる] 保存して閉じる ボタンをクリ [保存して閉じる ックします。 Pages 画面に戻ります。ウェブ ページを新規作成した場合は、 ページ リストに追加されます。 Page 6 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started [コンテンツ] フィールドにコ ンテンツを追加したり、コンテ ンツを変更する方法の詳細は、 『HeartCore Web コンテンツ管理 システムユーザーガイド』の(コ ンテンツ エディタ) セクション を参照してください。 Page 7 of 28 .. .. .. .. .. 5 HeartCore Web Content Management System Getting Started ホームページ ホームページを設定するには、上のセクションの説明に従ってウェブ ページを作成し、そのウ ェブ ページをホームページに設定する必要があります。そうすると、ウェブサイトの訪問者が ウェブサイトの URL (http://www.mysite.com など) にアクセスした時にホームページが表示され ます。 ホームページの設定 [設定 設定] 設定 を選択し ツールバーから ます。 設定 画面が表示されます。 システム] システム メニュー項目の左に [システム ある [+] アイコンをクリックして 展開し、サブメニューの [ウェブ ウェブ サイト] サイト を選択します。 特殊ページ] 特殊ページ タブを選択しま [特殊ページ す。 既定のページ (ホームページ) の [選択 選択] 選択 をクリックします。 ポップアップが表示されます。 ページ] ページ をクリックします。 [ページ ホームページに設定したいペー ジを選択します。 [OK] をクリックします 保存] 保存 をクリックします。 [保存 訪問者がウェブサイトの URL (http://www.mysite.com など) にア クセスすると、設定したホーム ページが表示されます。 Page 8 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started Page 9 of 28 .. .. .. .. .. 6 HeartCore Web Content Management System Getting Started テンプレート ウェブサイト上の全ページのレイアウトを統一するには、テンプレートを作成する必要があります。テンプ レートには、フッターやロゴ付きのヘッダーに加え、その他の構成要素やデザインを含めることができます。 ヘッダーとフッター付きの単純なテンプレートの作成方法を以下に示します。また、テンプレートをウェブ サイト全体に適用するように設定する方法も説明します。このテンプレートは、後ほど拡張してメニューな どの要素を追加します。 テンプレートの作成 ツールバーから [ウェブサイトコ ウェブサイトコ ンテンツ] ンテンツ を選択します 左側のメニューから [テンプレー テンプレー ト ] を選択します。 追加] 追加 ボタンをクリックしま [追加 す。 テンプレートを追加する空白の 追加 画面が表示されます。 [タイトル タイトル] タイトル に テンプレート名を 入力します。 テンプレートに盛り込むヘッダ ーやフッターなどのデザインを 追加します。 ページのコンテンツを表示した い位置に @@@content@@@ というコードを入力します。 保存して閉じる] 保存して閉じる をクリックし [保存して閉じる ます。 Page 10 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started テンプレートは、罫線のない 表形式で構成されていることが よくあります。エディタの [詳細 詳細 を表示] を表示 ボタンをクリックして表 の罫線を表示してください。 テンプレートの適用 [設定 設定] 設定 を選択し ツールバーから ます。 システム] システム メニュー項目の左に [システム ある [+] アイコンをクリックして 展開し、サブメニューの [ウェブ ウェブ サイト] を選択します。 サイト これまでのステップで作成した テンプレートを選択します 保存] 保存 をクリックします。 [保存 訪問者がウェブサイトの URL (http://www.mysite.com など) にア クセスすると、設定したホーム ページが設定したテンプレート 内に表示されます。 Page 11 of 28 .. .. .. .. .. 7 HeartCore Web Content Management System Getting Started ナビゲーション ウェブサイトにメニューやツールバーを追加するには、ウェブ ページにリンクするメニューや ツールバーの要素を作成して、そのメニューやツールバーをテンプレートに挿入します。メニ ューを作成する例を以下に示します。ツールバーの作成方法も同様です。 メニュー要素の作成 ツールバーから [ウェブサイトコ ウェブサイトコ ンテンツ] ンテンツ を選択します。 クラス] クラス メニュー項目の左にあ [クラス る [+] アイコンをクリックして展 開し、サブメニューの [menu] を 選択します。 [追加 追加] 追加 ボタンをクリックしま す。 要素を追加する空白の 追加 画面 が表示されます。 メニュー名を [タイトル タイトル] タイトル に入力 します。 フィールド内でメ [コンテンツ] ニューを作成します。各メニュ ー項目を 1 つずつ順番に選択 し、以下のステップ 6 ～ 9 の作 業を行ってウェブ ページにハイ パーリンクを挿入します エディタ ツールバーの [ハイパ ーリンクを挿入] ボタンをクリッ クします。 ポップアップ画面が表示されま す。 [ページ ページ] ページ を選択します。 ページを選 リンクしたいウェブ 択します。 [OK] をクリックします。 Page 12 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started 保存して閉じる] 保存して閉じる ボタンをクリ [保存して閉じる ックします。 新しいページは、ウェブ コン テンツ エディタのハイパーリン ク マネージャを使用して作成で きます。 テンプレートへのメニュー のアサイン ツールバーから [ウェブサイト ウェブサイト コンテンツ] コンテンツ を選択します。 [テンプレート テンプレート] テンプレート を メニューから 選択します。 これまでのステップで作成した テンプレートを検索し、[更新 更新] 更新 をクリックします。 更新 画面が表示されます。 メニューを表示したい位置に @@@menu.content@@@ というコードを入力します。 追加コンテンツ] 追加コンテンツ タブをクリッ [追加コンテンツ クします Page 13 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started [追加コンテンツ] タブが表示さ れます。 選択] 選択 ボタンをクリックしてメ [選択 ニューを表示します。 [menu] をクリックします。 リストから、これまでの [menu] ステップで作成したメニュー要 素を選択します。 [OK] をクリックします。 保存して閉じる] 保存して閉じる ボタンをクリッ クします。 上記のステップを繰り返して、 ツールバー メニューを作成しま す。 完成したウェブサイトは、この ようになります。 Page 14 of 28 .. .. .. .. .. 8 HeartCore Web Content Management System Getting Started コンタクトフォーム コンタクトフォームを設置することにより、ウェブサイトの訪問者は、あらかじめ設定した管 理者の電子メール アドレス宛てに、ウェブサイトを通じて電子メールを送信できるようになり ます。コンタクトフォームを作成するには、通常のウェブ ページに特殊なフォーム要素を追加 する必要があります。フォームを正しく機能させるために挿入する必要がある要素には、コン タクトフォームに関する一般情報を収めたフォーム コンテナ、フォーム コンテナ内のフォーム フィールド、フォーム コンテナ内に設置する [送信] ボタン、ユーザーが [送信] ボタンをクリッ クした時に表示するランディング ページを指定するためにコンタクトフォーム内に設置する特 殊な非表示フィールドなどがあります。コンタクトフォームの詳細な作成方法を以下に示しま す。予約フォームの作成方法も同様です。 フォーム コンテナの挿入 上記の「ウェブ ページ」セクシ ョンで説明したように、ウェブ ページを作成するか、開きます (このスクリーンショットには表 示されていません)。 [コンテンツ コンテンツ] コンテンツ フィールド内で、 フォーム コンテナを配置したい 位置にカーソルを置きます。 フォームを挿入] フォームを挿入 ボタンをクリ [フォームを挿入 ックします。 ポップアップ画面が表示されま す。 メソッド] メソッド ドロップダウン リス [メソッド トから [POST] を選択します。 . URL] フィールドに [アクション 「/contact.asp」と入力します [OK] をクリックします。 詳細を表示] 詳細を表示 ボタンをクリック [詳細を表示 して、フォーム コンテナを示す 赤い破線を表示します。 ここで、フォーム コンテナ内に 表、テキスト、画像などのオブ ジェクトを追加することもでき ます。 Page 15 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started フォーム フィールドの挿入 フォーム罫線内で、フォーム フ ィールドを配置したい位置にカ ーソルを置きます。 [テキスト入力の挿入 テキスト入力の挿入] テキスト入力の挿入 ボタンを クリックします。 ポップアップ画面が表示されま す。 名前] 名前 フィールドに「名前」と [名前 入力して、ウェブサイトの訪問 者が自分の名前を入力できるフ ィールドを作成します。 ボタンをクリックして、[コ [OK] ンテンツ] セクションにフィール ドを挿入します。 上記のステップ 1 ～ 3 を繰り返 して、他のフィールドを挿入し ます。フィールド名の 1 つに 「件名」を指定する必要があり 「件名」 ます。これは、設定したウェブ サイト管理者宛ての電子メール の件名として使用します。 Page 16 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started [送信 送信] 送信 ボタンの挿入 フォーム罫線内で、[送信] ボタ ンを配置したい位置にカーソル を置きます。 コンテンツ エディタ ツールバー の [送信ボタンを挿入 送信ボタンを挿入] 送信ボタンを挿入 ボタンを クリックします。 ポップアップ画面が表示されま す。 」と入力します。 「Send」 [OK] ボタンをクリックして [送 信] ボタンを挿入します。 ランディング ページの指定 フォーム罫線内の任意の場所に カーソルを置きます。 非表示入力を挿入] 非表示入力を挿入 ボタンをク [非表示入力を挿入 リックします。 ポップアップ画面が表示されま す。 [名前 名前] 「redirect」 」 名前 フィールドに「 と入力します。 [値 値] フィールドに 「 /page.php?id=xxx」 」と入力しま す。ただし、「xxx」はウェブサ イトの訪問者がフォーム内の [送 信] ボタンをクリックした時に、 訪問者をリダイレクトする先の ページの番号に差し替えます。 Page 17 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started ボタンをクリックして、非 [OK] 表示の入力フィールド ボタンを 挿入します [保存して閉じる 保存して閉じる] 保存して閉じる をクリックし ます。 これで、Contact Us ページがここ に示すようなものになります。 ウェブサイトの訪問者がフォー ムに入力し、[送信] ボタンをク リックすると、フォームに入力 された詳細情報を通知する電子 メールが、連絡用電子メールを 受け取るように設定されている 管理者に届きます。 Page 18 of 28 .. .. .. .. .. 9 HeartCore Web Content Management System Getting Started 制限エリア ウェブサイト上に、登録済みのウェブサイト訪問者のみがアクセスできる領域を作成できます。 こうしたアクセス制限は、ウェブ ページ単位、ページ タイプ単位またはページ グループ単位に 設定できます。ページ単位にアクセス制限を設定する方法と、ウェブサイト訪問者を登録する 方法を以下に示します。ページ タイプやページ グループ単位にアクセス制限を設定する方法の 詳細については、『HeartCore Web コンテンツ管理システムユーザーガイド』の(ユーザー アク セス制限) セクションを参照してください。 ウェブ ページへのアクセス 制限 アクセス制限が必要な各ページ について、以下のステップ 1 ～ 4 の作業を行います。 上記の「ウェブ ページ」セクシ ョンで説明したように、該当す るウェブ ページを作成するか、 開きます (このスクリーンショッ トには表示されていません)。 アクセス制限] アクセス制限 タブをクリック [アクセス制限 します。 [閲覧 閲覧] 制限-] 閲覧 リストから [–制限 制限 を選 択します。 . [保存して閉じる 保存して閉じる] 保存して閉じる をクリックし ます。 ユーザーの登録 [ユーザーデータベース ユーザーデータベース] ユーザーデータベース を選択 します。 ユーザ] ユーザ をクリックします。 [ユーザ 追加] 追加 ボタンをクリックしま [追加 す。 Page 19 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started ユーザ名] ユーザ名 フィールドにユーザ [ユーザ名 ー名 (「 「member」 」など) を入力し ます。 パスワード] パスワード フィールドにパス [パスワード ワード (「 「member2」 」など) を入 力します。 保存] 保存 ボタンをクリックしま [保存 す。 ウェブサイトの訪問者がアクセ ス制限のかかったページにアク セスすると、ログインするよう 求められます。正しいユーザー 名とパスワードを入力して [Login] ボタンをクリックする と、アクセス制限のかかったペ ージが表示されます。 Page 20 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started 10 検索 ウェブサイトに検索フィールドを追加して、訪問者が任意のキー フレーズを含むコンテンツを 検索できるようにすることができます。検索フィールドは、ページやテンプレートに加え、ツ ールバーやメニューといった要素に挿入できます。この例では、ツールバーに検索フィールド を挿入する方法を説明します。検索フィールドを挿入するには、フォーム コンテナ、検索フィ ールドそのもの、そして検索ボタンを挿入する必要があります。検索機能を正しく機能させる には、これら 3 つのすべてが挿入されている必要があります。 ツールバーのオープン処理 [ウェブサイトコンテンツ ウェブサイトコンテンツ] ウェブサイトコンテンツ を選 択します。 クラス] クラス メニュー項目の左にあ [クラス る [+] アイコンをクリックして展 開し、サブメニューの [ツールバ ツールバ ー] を選択します。 ツールバー要素の [更新 更新] 更新 をクリ ックします。 フォーム コンテナの挿入 コンテンツ エディタ内に ウェブ カーソルを置きます。 フォームを挿入] フォームを挿入 ボタンをクリ [フォームを挿入 ックします。 ポップアップ画面が表示されま す。 [メソッド メソッド] メソッド リストから [GET] を 選択します。 [アクション URL] フィールドに 「/search.php」 」と入力します。 [OK] ボタンをクリックします。 詳細を表示] 詳細を表示 ボタンをクリック [詳細を表示 して、今、挿入したフォーム コ ンテナのフォーム罫線を表示し ます。 ここで、フォーム コンテナ内に 表、テキスト、画像などのオブ ジェクトを追加することもでき Page 21 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started ます。 検索フィールドの挿入 検索フィールドを配置したい位 置にカーソルを置きます。 テキスト入力を挿入] テキスト入力を挿入 ボタンを [テキスト入力を挿入 クリックします。 ポップアップ画面が表示されま す。 フィールドに「 「search」 」と [名前] 入力します。 [OK] ボタンをクリックします [検索 検索] 検索 ボタンの挿入 ボタンを配置したい位置 [検索] にカーソルを置きます。 コンテンツ エディタのツールバ ーの [送信ボタン 送信ボタン] 送信ボタン ボタンをクリ ックします。 ポップアップ画面が表示されま す。 ボタンに表示したいテキスト (「 「Search」 」など) を [値] フィー ルドに入力します。 OK] をクリックします。 保存して閉じる] 保存して閉じる をクリックし [保存して閉じる ます。 Page 22 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started ウェブサイトがこのようになり ます。 検索ボックスに検索語 (「 「location」 」など) を入力して、 [Search] ボタンをクリックしま す。 「location」 」という言語を含むす べてのページがページ上に表示 されます。 訪問者が検索結果のリンクをク リックすると、該当するページ にリダイレクトされます。 Page 23 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started 11 キャンペーン情報、バナー、ニュース HeartCore Web コンテンツ管理システム を使用すると、キャンペーン情報、バナー、ニュース をウェブサイトに追加できます。これを行うには、バナー、キャンペーン情報、ニュースを構 成要素として作成して、テンプレートに挿入します。キャンペーン情報の構成要素を作成して テンプレートに挿入する方法を以下に示します。バナーやニュースをウェブサイトに追加する 方法も同様です。 キャンペーン情報要素の作 成 ツールバーから [ウェブサイトコ ウェブサイトコ ンテンツ] ンテンツ を選択します。 クラス] クラス メニュー項目の左にあ [クラス る [+] アイコンをクリックして展 開し、サブメニューの [offer] を 選択します。 追加] 追加 ボタンをクリックしま [追加 す。 [タイトル タイトル] タイトル に キャンペーン名を 入力します。 キャンペーン情報のコンテンツ を [コンテンツ] フィールドに追 加します。コンテンツは画像や テキストでもかまいません。 [保存して閉じる 保存して閉じる] 保存して閉じる をクリックし ます。 ステップ 3 ～ 6 を繰り返して、 他のキャンペーン情報を作成し ます。 ウェブ コンテンツ エディタ のメディア マネージャを使用す ると、画像を追加できます。詳 細は、『HeartCore ウェブコンテ Page 24 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started ンツ管理システムユーザーガイ ド』を参照してください。 キャンペーン情報のテンプ レートへのアサイン ツールバーから [ウェブサイトコ ウェブサイトコ ンテンツ] ンテンツ を選択します。 [テンプレート テンプレート] テンプレート を メニューから 選択します。 これまでのステップで作成した テンプレートを見つけて [更新 更新] 更新 をクリックします。 更新 画面が表示されます。 キャンペーン情報を表示したい 位置に @@@offer.content@@@ というコードを追加します。 追加コンテンツ] 追加コンテンツ タブをクリッ [追加コンテンツ クします。 Page 25 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started [追加コンテンツ] タブが表示さ れます。 [offer] リストから、これまでの ステップで作成したキャンペー ン情報の構成要素を選択する か、[–ランダム ランダム-] ランダム を選択します。 [–ランダム-] を選択した場合、テ ンプレートを表示するたびにキ ャンペーン情報要素がランダム に 1 つ表示されます。 保存して閉じる] 保存して閉じる ボタンをクリ [保存して閉じる ックします。 キャンペーン情報、バナー、ニ ュースの各構成要素をすべてテ ンプレートに挿入すると、ウェ ブサイトはこのようになります Page 26 of 28 .. .. .. .. .. HeartCore Web Content Management System Getting Started 12 スタイルシート CSS (カスケーディング スタイル シート) を使用すると、配色、フォント、レイアウトといった ウェブ ページの見栄えを左右する特徴を定義できます。配色、フォント、レイアウトはウェブ ページ上で定義できるため、スタイル シートはウェブサイトの構築に必須ではありません。し かし、スタイル シートを使用すると、選択肢が広がり、ウェブサイト上の書式を一括管理でき ます。HeartCore Web コンテンツ管理システム でスタイル シートを作成して、ウェブサイト上 のすべてのウェブ ページに適用するように設定できます。これを行う方法を以下に示します。 スタイル シートの作成 ツールバーから [ウェブサイト ウェブサイト コンテンツ] コンテンツ を選択します。 スタイルシート] スタイルシート を選択しま [スタイルシート す。. 追加] 追加 ボタンをクリックしま [追加 す。 スタイル シート名を [タイトル タイトル] タイトル に入力します。 シートのコンテンツを スタイル [コンテンツ コンテンツ] コンテンツ フィールドに追加 Page 27 of 28 します。 [保存して閉じる 保存して閉じる] 保存して閉じる をクリックし ます。 .. .. .. .. .. HeartCore Web Content Management System Getting Started スタイル シートの適用 [設定 設定] 設定 を選択し ツールバーから ます。 システム] システム メニュー項目の左に [システム ある [+] アイコンをクリックし て展開し、サブメニューの [ウ ウ ェブサイト] を選択します。 ェブサイト デフォルトスタイルシート (テ テ [デフォルトスタイルシート キスト)] キスト リストから、これまで のステップで作成したスタイル シートを選択します。 保存] 保存 をクリックします。 [保存 スタイル シートを作成すると、 ウェブサイトはこのようになり ます。フォントと行の高さが変 化しています。 Page 28 of 28
© Copyright 2024 Paperzz
