導入の流れ

ページの作成方法

テンプレート選択

ログイン

お申込み完了メールに記載の「ユーザーID」と「パスワード」を入力しログインします。

ページを作成

メインメニュー

メインメニュー の左上にある 「サイトツリー編集」をクリックし、「サイトツリー編集画面」を開きます。

ページを作成

ページを作成

まずはトップページを編集してみましょう。
HOME(TOPまたはトップページなど)をクリックするとプルダウンでメニューが表示されますので「このページを編集」をクリックします。

ページの編集(ロゴ画像登録)

ページの編集(ロゴ画像登録)

全ページ共通となるロゴ画像を登録します。
デスクトップなどに保存してある画像をCMSに登録します。
すでに登録されているロゴの上にカーソルを合わせると青い吹き出しが表示されます。
ここでダブルクリックすると、ページ編集ダイアログが表示されます。
参照ボタンより登録するロゴを選択してください。
画像の説明欄に「店名」や「会社名」を入力し「変更を保存」をクリックします。
再度ロゴの上にカーソルを合わせると先程は青かった吹き出しが赤くなっています。
右クリックをし、「記事公開の設定」を「公開(承認済)」にし「変更を保存」をします。
ロゴの上にカーソルを合わせると青の「公開」ステータスに変更になっています。

ページの確認

ページの確認

変更したロゴがどのように表示されているか確認してみましょう。
右上の緑のボタン「このページをテスト確認」よりテストページを生成します。
「生成開始」を押し構築完了が表示されたら「メインサイトのプレビュー」をクリックします。
ロゴが変更されたのが確認できます。

ページの編集(グローバルナビゲーション登録)

ページの編集(グローバルナビゲーション登録)

全ページ共通となるグローバルナビゲーション(メニュー)を変更します。

すでに登録されているテキストの上にカーソルを合わせると青い吹き出しが表示されます。
ここでダブルクリックすると、ページ編集ダイアログが表示されます。
変更が必要なテキストを入力し「変更を保存」をクリックします。

また、必要のない項目がある場合はテキストの上で「右クリック」し「削除する」を選択してください。
変更した部分は赤い吹き出しの「編集中」になっていますので右クリックし「記事公開の設定」より「公開ステータス」を「公開」にしてください。

ページの編集(メイン画像登録)

ページの編集(メイン画像登録)

トップページのメイン画像を変更します。
ロゴの画像登録と同様に、すでに登録されている画像の上にカーソルを合わせると青い吹き出しが表示されますのでダブルクリックし、ページ編集ダイアログを表示させます。

メイン画像はテンプレートによって異なりますが、
幅が960pxまたは1020pxの画像をご用意ください。

(高さの指定はございません)
最初に表示させたい画像を上に登録、2枚目を下に登録してください。
右側の「+」ボタンで枚数を増やすことが可能です。
「×」ボタンにて削除が可能です。
こちらも変更が完了したら「公開ステータス」を公開にしてください。

※2枚以上の画像を登録する場合は同じサイズのものをご使用ください。

ページの編集(4コマ画像・テキスト登録)

ページの編集(4コマ画像・テキスト登録)

同様に画像やテキストを入力してください。
このパーツは画像+タイトル+テキスト にて構成されています。
今までと同様に画像の変更、テキストの入力をしてください。
変更が完了したら「公開ステータス」を公開にしてください。

このパーツすべてが必要ない場合は「公開ステータス」を非表示にしてください。
青かったパーツの背景がグレーに変更になり「非表示」になりました。

新着情報欄入力

新着情報欄入力

このパーツは今までとは違い別のページの内容を「自動参照」しています。
このページでの変更はできません。

このパーツが必要ない場合はパーツの上の見出し(図のInfo部分)の公開ステータスを「非表示」にします。
お知らせエリアの入力・削除は後ほど行いますので次の入力に進みましょう。

新着情報欄入力

画像サイズの変更

画像サイズの変更は簡単です。
画像をアップロードし、自動サイズ調整の幅と高さの数字を変更します。
「幅固定」を選択すると入力した「幅」に合わせれて自動的に「高さ」もリサイズされます。
「高さ固定」にチェックを入れた場合も同様に「高さ」に合わせて「幅」が設定されます。

以上の方法でトップページを完成させてください。

リンクの設定

リンクの設定

リンクを設定する場合はページ編集ダイアログの左下「リンク設定」をクリックします。
内部リンク:このサイトの別ページにリンクをする。
外部リンク:違うサイトにリンクする。

※内部リンクはリンクするページを作成した後でしか設定できませんので内部リンクの場合は後ほど設定します。

外部リンクにチェックしリンク先のURLを入力します。
右下の「セルフ」「新規」のチェックの「新規」にチェックを入れてください。
「新規」にチェックを入れた場合は新しいウインドウで表示されます。

リンクの設定

ブロックパーツの挿入

希望のパーツがない場合は、ブロックパーツを挿入することができます。
オレンジ色の線上にマウスを合わせると線が「赤」に変わります。
赤の状態で右クリックをし「ブロックパーツの挿入」をクリックし任意のパーツを選択してください。

タイトルとコピーライト

タイトルとコピーライト

トップページの入力が完了したらタイトルとコピーライトを変更しましょう。
メインメニューに戻り、「サイト情報編集」画面へ進みます。
サイト名とコピーライト、サイトのキーワード、サイトの説明を入力してください。

再度、サイトツリー編集よりトップページへ戻ります。
「このページをテスト確認」ボタンより作成したページの確認してください。
これでよろしければ、 サイトツリー編集画面に戻ります。

サイトツリーの構造

サイトツリーの構造

次に下層ページを作成しましょう。サイトツリー編集画面を開きます。
このページはサイトマップと同様の構成になっています。
「HOME」の右にある三角を押してください。
下層ページが表示されます。再度クリックすると下層ページが表示されなくなります。

「HOME」が第1階層です。「HOME」の三角をクリックすると2列目の第2階層が表示されます。
第2階層の「お知らせ」の三角をクリックすると第3階層の「記事ページ」が表示されます。
このようにページの下に「ツリー状」にページがつらなっており第4階層まで作成できます。

それでは、トップページで編集できなかった「自動参照」のお知らせページを編集しましょう。
2階層目の「お知らせ一覧」の右側の三角をクリックし3階層目を表示させたら、一番下の「サイトオープンしました」をクリックし編集画面を表示させましょう。

下層ページの編集

下層ページの編集

このページの「サイトオープンしました」と「2013年09月01日」の日付の部分を変更すると「トップページ」と2階層目の「お知らせ一覧」が自動的に変更されます。
日付をオープンする日に変更してください。
次に、お知らせの記事部分も変更します。
ページ右上の「一括承認する」ボタンをクリックし「OK」を押すとページすべてのステータスが公開になります。
※ただし、「ロゴ」「グローバルナビ」「フッターエリア」などの吹き出しに【共】と書かれた「共通参照」パーツには反映されません。
共通参照パーツは一つずつステータスの変更が必要です。

ページタイトルの変更

ページタイトルの変更とURLの設定

ほかのニュースも変更しましょう。
「サイトツリー編集画面」に戻り「お知らせ一覧」の下の階層の「セールのご案内」を編集しましょう。
ページ上部の「ページのプロパティ」をクリックします。

URL:URLに表示させる任意の文字を入れます。今回は公開日を設定しましょう。
Folder:今回このまま「news」にします。
PageID:空欄でOKです。
ページのタイトル:この部分が検索時に「タブ」に表示されるページのタイトルになります。このページに合ったタイトルを入力してください。
ページのキーワード:「SEO対策」になるキーワードを5個程度入力します。キーワードは半角のカンマ(,)で区切ってください。
ページの説明:このページの説明を入れます。
日付:空欄でOKです。
カテゴリー:このまま「-」でOKです。

先程の「サイトオープンしました」ページ同様に編集してください。
編集が終わったらページツリー画面に戻ります。今編集したタイトルが変更になっているのが確認できます。

ページタイトルの変更

ページのコピー

さらに他のニュースも作成しましょう。
「サイトツリー編集画面」の「お知らせ一覧」の下の階層で今編集したページをクリックします。
メニューが表示されるので「コピーを作成」を選択します。
ポップアップが表示されるので先程のページタイトルの変更と同様に任意のタイトルを入力します。

タイトル:「タブ」に表示されるページのタイトルを入力します。
フォルダ:今回は「news」にします。
URL:公開日など任意の文字を入力します。(同じフォルダ内で同じURLは使用できません)
※何も入力せずに「決定」をクリックし作成することも可能です。
その場合は、システムで英数字が付与されます。

ページ移動と公開ステータスの変更

ページ移動と公開ステータスの変更

NEWS記事を作成の場合、最新の情報をツリーの一番上に配置させます。
今コピーしたページは最新の情報なので一番上に移動します。
「サイトツリー編集画面」でコピーしたページ上をクリックしメニューを表示させたら「上に移動する」を選択してください。
新しいページが一番上に来ました。
このページも同様にページ編集画面にて入力し編集してください。
編集が終わったら「サイトツリー編集画面」に戻ります。
現在は他のページと違い赤文字で「非公開」となっています。
ページ上をクリックしメニューを表示させたら「ページ公開の設定」を選択します。
ステータスを「公開」にし、変更を保存してください。

ページ移動と公開ステータスの変更

新規ページの編集

今回は新しいページなのでオレンジの線のみでパーツが入っていません。
トップページでご説明したとおりに、オレンジの線上にマウスを合わせ赤く変化したところで右クリックしパーツを挿入します。
まずは、見出しの「H2タイトルエリア」のパーツを挿入しましょう。
見出しの下には任意のパーツを挿入しページを作っていきます。
すべて入力したら、「一括承認する」ボタンでステータスを公開にし、ページのプロパティの「ページのキーワード」と「ページの説明」も入力します。
すべて完了したら「このページをテスト確認」より確認しましょう。
確認が出来たら「サイトツリー編集画面」に戻ります。

ページ内リンクの設定

ページ内リンクの設定

トップページのスタッフ紹介の部分より、今追加したスタッフ紹介ページへのリンクを設定します。
トップページのページ編集画面を開きます。
リンクを付けたいパーツのブロック編集画面を開きます。
今回は「staff」の「詳細はこちら」という部分にリンクを付けます。
ブロック編集画面の左下の「リンク設定」をクリックします。
内部リンクにチェックを入れ、右側の三角ボタンでリンク先を表示させ、リンクさせたいページを選択し「変更を保存」で保存します。

部分リンクの設定

部分リンクの設定

先程のリンクの設定はブロックのテキストすべてにリンクを設定する方法でしたが、

<例>
CMSなら、簡単にホームページ作成&更新が可能なvibit CMS
このようにテキストの一部にリンクを設定することも可能です。
この場合はページ編集画面でリンクを設定したいテキストをドラックし選択します。
今回は右上の「リンク設定」ボタンをクリックします。
あとは同様に内部リンクや外部リンクの設定を行います。

サイトの公開

サイトの公開

最後にサイトを公開します。
「サイトツリー編集画面」の右上「サイトを公開」をクリックします。
アップロードをクリックします。
これで公開が完了しました。

早速テンプレートを選んで始めましょう

テンプレート一覧