このレクチャーでは、【 relav.jp 】でのホームページ作成の基本を習得することができます。

短時間で終了するチュートリアルになっていますので、ぜひ順番どおりに最後まで進んで頂ければと思います。

•  
  管理画面へログインしよう
•  
  ホームページの仕組みを確認しよう
•  
  トップページのウェブパーツを確認しよう
•  
  ウェブパーツを修正してみよう
•  
  新しく作成されたページを確認してみよう
•  
  テキスト文章を追加してみよう
•  
  お問合せフォームに入力項目を追加してみよう
•  
  お問合せを確認して返信してみよう
•  
  新しいページを作成してみよう
•  
  ページのタイトルを設定してみよう
•  
  サイト素材画像をアップロードしてみよう
•  
  新しいページにウェブパーツを設置してみよう
•  
  「画像とテキストの文章」を設置してみよう
•  
  ページレイアウトにブロックを設置してみよう
•  
  ページレイアウトを非表示にしてみよう
•  
  新しいページをメインメニューに設置しよう
•  
  オフィシャルブログを作成しよう
•  
  ホームページにフォトを掲載しよう
•  
  カレンダーにスケジュールを表示しよう
•  
  ホームページを独自ドメインで運営しよう
•  
  ホームページの広告を解除しよう

【 relav.jp 】のオフィシャルサイトから、ホームページの作成が無事に完了すると、ホームページのURLと、管理画面のURLが利用できるようになります。

このURLは設定した電子メールアドレス宛にも届きます。

作成されたホームページを確認した後に、早速、管理画面にログインしてみましょう。

【 relav.jp 】では、この管理画面からホームページの更新を行うことができます。

管理画面のURLにアクセスすると、ログイン画面が表示されます。

※ホームページを作成した時と同じ環境で管理画面にログインする場合は、自動ログイン機能によりログイン画面が省略されます。

ホームページ作成時に登録した、「サイト管理者」のメールアドレスと、パスワードで管理画面にログインすることができます。

管理画面にログインすると、コントロールパネルが表示されます。

このコントロールパネルでは、重要な機能に簡単にアクセスできるように、リンクボタンが設置されています。

サイト運営事務局の情報も自由に設定することができます。

コントロールパネルから「ホームページ更新」をクリックすると、作成したホームページの内容を修正することができます。

それでは「ホームページ更新」をクリックして、ホームページがどのように作成されているのか確認してみましょう。

「ホームページ更新」をクリックすると、ホームページの更新先に簡単に移動することができる「サイトの更新」が開きます。

「サイトの更新」では、ホームページはエリアごとに別れていて、マウスを乗せると、ホームページのプレビューが表示されるようになっています。

更新したいエリアをプレビューで確認しながら、クリックすると各エリアの編集画面に移動します。

【 relav.jp 】のホームページは、ヘッダーエリア、ウェブパーツエリア、ページレイアウトエリア、フッターエリアの４つの種類に分かれています。

ウェブパーツエリアは、上部と下部の２つの設置されています。

標準では、トップページはウェブパーツエリアのみ使用されていて、ページレイアウトエリアは非表示になっています。

「サイトの更新」から「上部エリア」をクリックすると、ページに設置されているウェブパーツの一覧を確認することができます。

「ページ内容設定」の「ページへウェブパーツを設置」が表示されます。

この画面では、ページに設置されているウェブパーツの一覧が表示されます。

設置されているウェブパーツの内容を確認したり、表示順の変更、内容の設定や設置の解除を行うことができます。

「ページに設置されているウェブパーツ」では、現在トップページに設置されているウェブパーツの一覧が表示されています。

色付きのタイトルエリアにマウスを合わせると、ウェブパーツのプレビューを確認することができます。

「設置エリア」でウェブパーツ下部を選択、または左上のボックスエリアをクリックします。

表示が切り替わり、ウェブパーツ下部エリアに設置されているウェブパーツの一覧が表示されます。

それでは、トップページに設置されているウェブパーツを修正してみましょう。

ウェブパーツ上部エリアの配置設定を開いて、紫色の「画像テキストのリンク」のボックス、または「設定する」のリンクをクリックします。

「ウェブパーツの内容設定」が開き、ウェブパーツの設定を変更することができます。

この画面は、設定するウェブパーツの種類ごとに、より詳細に設定することができるようになっています。

ウェブパーツは、多くの設定項目がありますが、プレビューを確認しながら設定することができます。

「設定する」ボタンを押して更新するまでは、ブラウザを再読込みすればで、設定前の状態に戻すことができます。

「ウェブパーツ設定」タブを開くと、ウェブパーツの名前や表示アニメーション方法などを設定することができます。

ウェブパーツには、ページや外部サイトURLを設定した下部リンクを設置することもできます。

この「ウェブパーツ設定」は全てのウェブパーツで行えます。

「ウェブパーツ設定」では、ウェブパーツの上下の余白を設定することができます。

最新型のホームページでは、特に上下余白が重要になりますので、ウェブパーツの余白を数値で直接設定することができます。

それでは、実際にウェブパーツを修正してみましょう。

「タイトル」と「コンテンツの内容」をお好みのテキストに変更して、「設定する」ボタンを押してください。

ホームページを開いて、正しく更新されていることが確認できれば、ウェブパーツの修正は完了です。

他のウェブパーツも同じように修正することができます。

ホームページ作成時のウィザードで、新しいページが自動で作成されています。

新しく作成されたページがどのように管理されているのか、確認してみましょう。

新しく作成されたページを設定するので、まずはコントロールパネルから「ページの管理」をクリックします。

「ページ内容の設定」から「ページフォルダの一覧」の画面が表示されます。

「ページフォルダの一覧」では、システムから予め用意されているページの一覧が表示されています。

【 relav.jp 】では、いろいろな機能が標準で用意されていますが、必要の無いページを設定する必要はありません。

「新しく作成したページ」のフォルダが作成されているので、フォルダ名か「ページ管理」をクリックします。

フォルダに入っているページの一覧が表示されます。

「フォルダのページ一覧」画面で、フォルダの中のページが表示されたらタイトルをクリックします。

このページは、最初のウィザードで作成されたもので、ホームページの種類により名前が異なります。

新しく作成されたページの「サイトの更新」画面が開きます。

先程と同じように、ウェブパーツの上部エリアをクリックすると、ウェブパーツの設定画面へ移動します。

引き続き、新しく作成したページにテキスト文章を追加してみましょう。

新しく作成したページは、タイトルと2つの画像テキストが設置されています。

ここでは、新しく3つ目の画像テキストをこの下に追加してみましょう。

新しく作成されたページでは、「タイトルライン」と「画像テキストの文章」の2つのウェブパーツで構成されています。

「画像テキストの文章」のウェブパーツをクリックして、「ウェブパーツの内容設定」画面を表示します。

「ウェブパーツの内容設定」画面が開いたら「テキストの設定」タブをクリックします。

「タイトル」「画像テキスト(左)」「画像テキスト(右)」の３つのテキストリストで構成されています。

詳細な設定項目がありますが、プレビューを確認しながら設定を行うことができます。

新しく「画像テキスト」を追加する為に、「画像テキストリストの設定」をクリックします。

「画像テキストリストの設定」画面が開きます。

この画面では、新しくリストの項目を追加したり、並び順などを設定するこができます。

リストの並び順は、一度決定すると変更する機会が少ない為、こちらの「画像テキストリストの設定」画面で変更できるようになっています。

「リストに登録中の画像テキスト」に、現在登録中の画像テキストリストの一覧が表示されます。

リストに「画像テキスト」を追加していくことで、ホームページのコンテンツを作成していきます。

「リストへ画像テキストを追加」から、新しい画像テキストを追加することができます。

いろいろな種類の画像テキストを登録できますが、ここでは「画像とテキスト文章」を選択します。

画像の設定エリアをクリックすると、サイト素材画像から、採用する画像を選択することができます。

サイト素材画像は、アップロードして使用することができますが、ここでは「標準のカテゴリー」から、システムから用意されている画像を選択してください。

画像を設定して、テキストを入力したら、「登録する」ボタンをクリックします。

リストに追加され、表示順が正しいことを確認したら、「戻る」ボタンをクリックして、「ウェブパーツの内容設定」に戻ります。

「ウェブパーツの内容設定」画面の「テキストの設定」タブに、登録した画像テキストが追加されているのを確認します。

ここで、上下余白を「大」に設定して、「設定する」ボタンを押してみましょう。

実際にホームページを確認して、画像テキストが正しく追加されているのを確認します。

これで新しく作成したページへの「画像テキスト」の追加は完了です。

ホームページでは、お問合せの受付がとても重要です。

【 relav.jp 】では、管理画面からお問合せフォームの入力項目などを簡単に設定することができます。

それでは、管理画面からお問合せフォームに、独自の入力項目を追加してみましょう。

「サイトの更新」から「サイトページ名」のリストから「お問合せフォーム」を選択します。

その後に、ページレイアウトエリアの「中央エリア」をクリックすると、「ページ内容設定」画面の「ページレイアウトの設定」が開きます。

お問合せフォームや、オフィシャルブログ、ショッピングカートなど、システムから提供されている機能は、「ページレイアウトエリア」に表示され、設定ができるようになっています。

「お問合せ受付フォーム」ブロックのメニューを開き、「内容を設定」をクリックすると「ブロックの修正」画面が開きます。

「ブロックの修正」画面は、修正するブロックにより設定内容が異なります。

ここでは「項目の設定」タブを開き、「追加項目」にある「項目リストの設定」をクリックすると「項目リストの管理」画面が開きます。

「項目リストの管理」では、独自のお問合せフォームの入力項目を作成することができます。

新しい入力項目の追加は「リストへ項目を追加」のフォームから行います。

「リストへ項目を追加」から、項目名や、入力項目の種類などを設定して「登録する」ボタンをクリックします。

ここで登録した内容は、「リストに登録中の項目」からいつでも修正することができます。

「登録する」ボタンをクリックすると、「リストに登録中の項目」に登録した入力項目が追加されます。

こちらのリストから独自入力項目の並び順の設定や、内容の修正、項目の削除を行えます。

「戻る」をクリックすると、先程の「ブロックの修正」画面が表示されます。

「追加項目」には、登録した独自の入力項目がリスト表示され、こちらから設定画面に移動することもできます。

それでは、実際にホームページで追加した独自項目を確認してみましょう。

ホームページのお問合せフォームを開くと、先程追加した、独自の入力項目が追加されています。

これでお問合せフォームへの独自の入力項目の追加は完了です。

ホームページのお問合せフォームから送信されたお問合せが、管理画面にどのように表示されるのか確認してみましょう。

ここではテストを兼ねて、ホームページのお問合せフォームからお問合せを送信して下さい。

ホームページからお問合せが送信されると、送信完了画面が表示されます。

登録されたお問合せは、管理画面に加えて、サイト管理者のメールアドレス宛にも内容が送信されます。

管理画面のコントロールパネルに、新しいお問合せが届いた通知が表示されます。

この赤文字の通知をクリックするか、「お問合せ管理」を開くと、新しく届いたお問合せの内容を確認することができます。

「お問合せ管理」から送信されたお問合せの内容を確認することができます。

新しく追加した独自の入力項目の内容も、お問合せ内容に表示されます。

「お問合せへの返信」から入力されたメールアドレス宛に、お問合せの返信を送信することができます。

こちらのフォームから返信を行うと、返信の内容を管理画面に記録することができます。

お問合せへの返信の送信前には、メールの内容が表示されます。

こちらの返信メールの内容は、自由に編集することができるようになっています。

返信する内容が間違っていない事を確認して、「返信する」ボタンをクリックします。

お問合せへの返信が送信されると、返信内容と返信日時が記録されます。

お問合せに対して、追加で複数の返信を送信することもできるようになっています。

それでは、ホームページに新しいページを作成して、メニューに設置してアクセスできるようにしてみましょう。

コントロールパネルの「ページ管理」、または管理画面のメニューから「サイトページ内容設置」画面を開いて「ページ管理」タブを開きます。

「ページフォルダの一覧」が開いたら、「新しく作成したページ」をクリックします。

ここで、新しいページフォルダを作成することもできます。

「フォルダのページ一覧」画面が開いたら、「新しいページを作成する」ボタンをクリックすると「サイトページの新規作成」画面が開きます。

「サイトページの新規作成」では、ホームページに新しいページを作成することができます。

「サイトページの新規作成」が開いたら、ページ名とページURIを設定します。

加えて、ここで設定する「ページの説明」はGoogleの検索結果に掲載されますが、後で設定することもできます。

新しいページの作成されると、フォルダのページ一覧のリストに追加されます。

リストのURIのリンクをクリックすると、作成されたページがブラウザの別タブで開きます。

ホームページで新しく作成したページが開き、アクセスできることを確認することができます。

新しく作成したページは、初期状態でタイトルラインのウェブパーツと、ページレイアウトエリアに、サンプルのブロックが配置されています。

それでは、ページのタイトル帯部に画像を設定して、タイトルのテキストを変更してみましょう。

まずは、フォルダのページ一覧のリストから、「修正する」のリンクをクリックして「ページ情報の修正」画面を開きます。

「ページ情報の修正」画面が開いたら、「タイトル設定」タブをクリックします。

続いて、画像設定の「ページデザイン設定」のリンクをクリックして、「ページカバーの設定」画面を開きます。

「ページカバーの設定」では、ページのタイトル画像に設定する画像をアップロードして登録することができます。

アップロードした画像は、縦位置の表示位置を設定することができ、複数ページのタイトル画像に設定することができます。

この画面の「ページカバー画像の登録」から新しいタイトル画像を登録できます。

「ページカバー画像の登録」から、タイトル画像名と、タイトル画像を設定して「登録する」ボタンをクリックします。

画像の設定は、アップロードエリアへのドラッグ＆ドロップ、またはアップロードエリアをクリックすると画像を選択できます。

タイトル画像の登録が完了すると、「ページカバー画像の一覧」のリストに追加されます。

ここで「ページカバーの設定」の「画像位置調整」ボタンをクリックすると、タイトル画像の縦位置の調整をすることができます。

マウスドラッグで上下移動して、「画像位置を決定」ボタンをクリックすると、表示位置の調整が完了します。

他の画像の位置調整を行いたい場合は、画像のサムネイルをクリックしてください。

「ページ情報の修正」に戻って、ページタイトル画像の設定を行います。

画像の設定に、先程登録したページタイトル画像が追加されているので、リストからこれを選択します。

ページの表示タイトルの設定は、画像が明るくてタイトル文字が読みにくい場合があります。

背景色と透明度の設定をしながら、表示タイトルの設定をプレビューを確認しながら行えます。

上段のメインタイトルに日本語、下段のサブタイトルは英語で表示するのが標準的となっています。

最後に、実際にホームページでタイトル画像が表示されているのを確認して完了です。

新しく作成したページだけでなく、システムから用意されているページでも、タイトル画像の設定ができるようになっています。

ホームページで使用する独自のサイト素材画像をアップロードしてみましょう。

コントロールパネルから「サイト素材画像」をクリックすると「サイトの素材･パーツ設定」画面が開きます。

「サイトの素材･パーツ設定」画面の「サイト素材画像のカテゴリー」では、サイトの素材画像をカテゴリー別に管理できます。

初期状態では、シテスムから用意されている、「標準のカテゴリー」と、「カテゴリー未設定」がリストに表示されています。

それでは、サイト素材画像用の新しいカテゴリーを作成して、その中に素材画像を登録してみましょう。

サイト素材のカテゴリーの名を設定して、「登録する」ボタンをクリックします。

「サイト素材画像のカテゴリー」のリストに作成したカテゴリーが追加されます。

この新しく作成されたカテゴリーをタイトルをクリックすると、「サイト素材画像の一覧」画面が開きます。

「サイト素材画像の一覧」では、カテゴリー内の素材画像をリスト表示します。

登録した素材画像を修正したり、削除したり、素材画像のメンテナンスを行うことができます。

それでは、このカテゴリーにサイト素材画像をアップロードしてみましょう。

画像タイトルと、素材画像を設定して、「登録する」ボタンをクリックすると、画像のアップロードが行えます。

画像は同時に５枚まで同時にアップロードすることができます。

画像のアップロードが完了すると、「サイト素材画像の一覧」のリストにサイト素材画像が追加されます。

リストに表示されている画像サムネイルの「設定する」リンクをクリックすると、「サイト素材画像の修正」画面が表示されます。

「サイト素材画像の修正」では、カテゴリーの変更や、素材画像の差し替えなどの設定が行えます。

サイト素材画像は、画像を再加工などした場合に、差し替えることができるようになっています。

素材画像のクリック時に、画像ごとに決まったアクションを行いたい場合があります。

例えば、動画のサムネイルの素材画像などは、クリック時に動画を開いて再生するなどの設定も行うことができます。

それでは、新しく作成したページに、ウェブパーツを作成して設置してみましょう。

「サイトの更新」画面から、新しく作成したページを選択して、ウェブパーツエリアの上部をクリックして「ページへウェブパーツを設置」を表示します。

新しく作成したページのウェブパーツエリアには、標準でタイトルラインが1つ設置されています。

このタイトルラインは、新規ページに必ず設置されるサンプルですので、このページから解除を行います。

リストの「解除する」のリンクをクリックすると、このページからウェブパーツを解除できます。

標準のタイトルラインの解除すると、「ページに設置されているウェブパーツ」のリストから消去されます。

引き続き、「ウェブパーツの新規作成」のリンクをクリックして、「作成したウェブパーツの一覧」画面を開きます。

「作成したウェブパーツの一覧」では、現在ホームページで作成されているウェブパーツの一覧が表示されています。

作成されているウェブパーツを検索して、簡単に修正画面に移動できるようになっています。

ウェブパーツのリストで表示されるボックスは、マウスカーソルを乗せると、ウェブパーツのプレビューを表示することができます。

修正したいウェブパーツを特定する場合などに便利です。

「新しいウェブパーツの作成」では、新しいウェブパーツをホームページに作成することができます。

ウェブパーツ名を入力して、設置パーツの選択から、作成したいウェブパーツの種類を選択します。

ここでは「タイトルライン」のウェブパーツを作成してホームページに設置してみましょう。

まずはウェブパーツ名を設定します。分かり易い名前を付けると、ウェブパーツを検索する際に便利です。

設置パーツの選択で「タイトルライン」を選択して、「作成する」ボタンをクリックします。

「タイトルライン」のウェブパーツの作成が完了すると、「作成したウェブパーツの一覧」のリストに追加されます。

ボックスか、「設定する」のリンクをクリックすると、「ウェブパーツの内容設定」画面が開きます。

「ウェブパーツの内容設定」が開いたら、デザインのタイプを「２行のタイトル(下部サブタイトル)」を選択してみましょう。

ここでは、タイトルラインのデザインのタイプを設定することができます。

「２行のタイトル(サブタイトル下部)」を選択すると、タイトルと下部テキストを設定できるようになります。

タイトルと下部サブタイトルを設定して、「設定する」ボタンをクリックすると修正が完了します。

「タイトルライン」のテキストの設定ができたら、新しく作成したページに設置してみましょう。

先程の「ページへウェブパーツを設置」画面から、新しく作成したページを選択します。

「ウェブパーツをページに設置」の設置するウェブパーツで、先程作成した「タイトルライン」を選択して、「設置する」ボタンをクリックします。

新規作成や修正したウェブパーツは、設置するウェブパーツのリスト上位に表示されます。

「タイトルライン」をページに設置すると、「ページに設置されているウェブパーツ」のリストに追加されます。

今度は、こちらの設置リストから「タイトルライン」を修正してみましょう。

ボックスか、「設定する」のリンクをクリックして、「ウェブパーツの内容設定」画面を開きます。

タイトルの余白を「小」に、テキストの設定の文字サイズを「大」にして、「設定する」ボタンをクリックします。

「タイトルライン」の設定が完了したら、実際にホームページを見て設置の確認をしてみましょう。

ホームページから、「タイトルライン」のウェブパーツが正しく設置されているのを確認できました。

これで、新しいウェブパーツの作成とホームページへの設置は完了です。

それでは、ウェブパーツエリアに、画像付きのテキスト文章を設置してみましょう。

新しく作成したページのウェブパーツエリアは、先程設置した「タイトルライン」のみが設置されている状態です。

「新しいウェブパーツの作成」の設置パーツの選択から「画像とテキスト」を選択します。

初期状態で、「画像とテキスト」が選択されている状態になっています。

「画像とテキスト」のウェブパーツは、現在３つ用意されていて、設置の方法は、どのウェブパーツでも同じです。

このウェブパーツの種類は、【 relav.jp 】のバージョンアップにより、今後も追加されます。

それでは、ウェブパーツ名を設定して、「作成する」ボタンをクリックして「画像テキスト文章」のウェブパーツを作成しましょう。

「画像とテキストの文章」ウェブパーツが作成されると、「作成したウェブパーツの一覧」のリストに追加されます。

このボックスか、「設定する」のリンクをクリックして、「ウェブパーツの内容設定」画面を開きます。

「ウェブパーツの内容設定」が開いたら、「テキストの設定」のタブを開きます。

続いて「画像テキストのリスト設定」のリンクをクリックして、テキスト文章の内容を作成しましょう。

「画像テキストリストの設定」画面が開いたら、リストを追加して、テキスト文章の内容を作成していきます。

「画像とテキストの文章」のウェブパーツでは、このリストを複数追加して、テキスト文章や画像を組み合わせて内容を作成します。

「リストへ画像テキストを追加」から、画像テキストのリストを登録することができます。

ここでは、追加リストの種類は「文章のタイトル」を選択、タイトルを設定して、「登録する」ボタンをクリックします。

「文章のタイトル」が作成されると、「リストに登録中の画像テキスト」のリストに追加されます。

続いて、追加リストの種類は「画像とテキスト文章」を選択して、画像の設定の画像エリアをクリックして、「サイトコンテンツ画像の選択」をポップアップで開きます。

「サイトコンテンツ画像の選択」のポップアップが開くと、先程登録したサイト素材画像が使用できるようになっています。

素材画像の「設定する」のリンクをクリックすると、この素材画像の設定画面を開く事ができます。

ここでは、この素材画像をクリックして、テキスト文章に使用する画像に設定します。

使用する素材画像の設定ができたら、テキストの内容を設定して、「登録する」ボタンをクリックします。

「リストに登録中の画像テキスト」に、この画像とテキスト文章が追加されます。

「リストに登録中の画像テキスト」のリストに作成した画像テキスト文章が登録されているのを確認します。

それでは、「戻る」ボタンをクリックして、「ウェブパーツの内容設定」画面に移り、テキスト文章の内容を確認してみましょう。

「ウェブパーツの内容設定」が開いたら、「テキストの設定」のタブを表示します。

「画像テキストのリスト」では、枠付きのボックスをクリックすると、設定画面に移動できるようになっています。

「ウェブパーツの内容設定」では、プレビューを確認しながら設定を行うことができます。

詳細な設定も、プレビューを確認しながらスムーズに行うことができるようになっています。

新しく作成したページの「ページへウェブパーツを設置」を開いて、作成した「画像とテキストの文章」のウェブパーツを設置しましょう。

現在は、先程作成した「タイトルライン」のウェブパーツのみが設置されている状態です。

「ウェブパーツをページに設置」の設置するウェブパーツで、先程作成した「画像とテキストの文章」のウェブパーツを選択して、「設置する」ボタンをクリックします。

新規作成したウェブパーツ、修正したウェブパーツは、リストの上位に表示されるようになっています。

「画像とテキストの文章」のウェブパーツが設置されると、「ページに設置されているウェブパーツ」のリストに追加されます。

設置されているウェブパーツは、この画面から修正画面を開くことができます。

最後に、ホームページで新しく作成したページを開いて、正しく設置されているか確認しましょう。

これで、新しく作成ページへの「画像とテキストの文章」ウェブパーツの設置は完了です。

まずは、新しく作成したページの「ページレイアウトエリア」を確認してみましょう。

サイトページ名に、新しく作成したページを選択して、中央エリアをクリックすると、「ページレイアウトの設定」が表示されます。

現在は、中央エリアに「新規作成ページの内容」が配置されている状態です。

サイドエリアには、「サイドカレンダー」と「サイド最新ブログ一覧」が設置されています。

ページレイアウトエリアは、上段が「現在配置中のブロック」、下段が「配置可能なブロック」の一覧になります。

このブロックはマウスのドラッグ＆ドロップで移動させることができますが、必ず配置するブロックは、「ブロックケース」に移動して配置を解除することができません。

それでは、ページレイアウトエリアに配置するブロックを新しく作成してみましょう。

コントロールパネルから「ブロック管理」をクリックすると、ブロックフォルダの一覧が表示されます。

「ブロックフォルダの一覧」には、システムから提供されている機能が使用できるブロックのフォルダ一覧が表示されています。

ここでは「新しいブロックフォルダを作成」をクリックして、作成するブロックを入れるフォルダを作成してみましょう。

ブロックフォルダの新規作成では、新しいブロックフォルダ名を設定して、「登録する」ボタンをクリックします。

ブロックフォルダ名は、作成した後からでも、自由に変更することができます。

新しいブロックフォルダが作成されると、「ブロックフォルダの一覧」のリストに追加されます。

フォルダ名のリンクか、「ブロックの管理」をクリックして、「フォルダのブロック一覧」を表示します。

作成したばかりのブロックフォルダは、まだブロックが登録されていません。

「新しいブロックを作成」ボタンをクリックして、「ブロックの新規登録」を表示します。

「ブロックの新規登録」では、ブロック名とブロックのタイトルを設定して、「登録する」ボタンをクリックします。

ブロック名とブロックのタイトルは、作成した後からでも、自由に変更することができます。

新しいブロックが作成されると、「ブロックの修正」が表示され、ブロックの内容を設定できます。

ブロックは、「コンテンツタイトル」「画像」「コンテンツ内容」で構成されていて、表示レイアウトを設定することができます。

画像をサイト素材画像から選択して、コンテンツ内容のテキストを設定してみましょう。

画像の「正方形で表示」をチェックすると、画像が余白なしで正方形で表示されます。

ブロックの内容設定は、プレビューを確認しながら行えます。

テキストの内容や、画像の表示位置など、プレビューを確認しながらスムーズに設定できるようになっています。

コンテンツのタイトルは、「ブロックの設定」タブで設定することができます。

ブロックの作成時に設定した、ブロック名などもここで修正することができます。

ブロックの内容を設定したら、「戻る」ボタンを押して、「フォルダのブロック一覧」を表示して、リストを確認してみましょう。

先程作成した、新しいブロックがリストに追加されています。

続いて、新しいブロックをもう1つ作成して、2つのブロックを配置してみましょう。

「ブロックの新規作成」ボタンをクリックして、先程と同じ方法で新しいブロックを作成します。

画像とコンテンツ内容のテキストを設定して、今度はレイアウトを「Cタイプ(画像を右に表示)」に設定してみましょう。

レイアウトで画像の表示位置を設定することができます。

ブロックの修正が完了したら、「戻る」ボタンをクリックして、「フォルダのブロック一覧」を表示して、リストを確認します。

作成した2つのブロックが表示されていれば、ブロックの新規作成は完了です。

ここからは、新しく作成したページで、先程作成したブロックを配置できるように設定を行います。

「ページフォルダの一覧」を開いて、新しく作成したページが入っているフォルダをクリックして、「フォルダのページ一覧」を表示します。

「ページフォルダの一覧」は、コントロールパネルの「ページ管理」から簡単に表示できます。

「フォルダのページ一覧」が開いたら、新しく作成したページをクリックして、「ページ情報の修正」を開きます。

「ページ情報の修正」が開いたら、使用するブロックを先程新しく作成したブロックフォルダに設定します。

「修正する」ボタンをクリックして設定を完了すれば、新しく作成したページで、設定したブロックフォルダに入ってるブロックが配置できるようになります。

新しく作成したページの「ページレイアウトの設定」を開いて、ブロックフォルダが先程設定したフォルダになっているを確認します。

続いて、「中央エリア」に配置されている「新規作成ページの内容」のブロックを「ブロックケース」にドラック＆ドロップで移動して、ページから解除を行います。

先程作成した2つのブロックが、「ブロックケース」に表示され、配置可能な状態であることを確認します。

ここに配置したいブロックが表示されない場合は、ページ設定のブロックフォルダの設定を確認してください。

先程作成した2つのブロックを、「ブロックケース」から「中央エリア」にドラッグ＆ドロップで配置します。

これで新しく作成したブロックの配置準備は完了です。

最後に、「登録する」ボタンをクリックして、確認のダイアログから「登録する」ボタンをクリックすれば、ブロックの設置が確定されます。

それでは、実際にホームページで新しく作成したページを開いて、ブロックの設置を確認してみましょう。

「タイトルライン」と「画像とテキストの文章」のウェブパーツが設置されています。

こちらは、ウェブパーツエリアの設定から、配置を解除したり、新しいウェブパーツを設置することができます。

その下のページレイアウトエリアには、先程作成した2つのブロックが設置されています。

このページレイアウトエリアは、非表示にすることができるので、ウェブパーツのみでページを作成することもできます。

以上で、ページレイアウトエリアへのブロックの設置は完了です。

ページレイアウトエリアは非表示にしたり、使用するサイドエリアを選択したり、表示の設定を行うことができます。

まずは、「ページレイアウトの設定」から、このエリアの使用を「使用しない」に設定して、「登録する」をボタン押して設定を確定してみましょう。

ページレイアウトエリアを消去すると、ウェブパーツエリアだけでページの作成を行えます。

逆にページレイアウトエリアのみでページを作成したい場合は、ウェブパーツを全て解除します。

続いて、左サイドエリアと右サイドエリアの両方を使用してみましょう。

使用するエリアを、「左エリアを使用」と「右エリアを使用」の両方にチェックを入れ、各サイドエリアに表示したいブロックを設置して、「登録する」ボタンをクリックして設定を確定します。

ホームページのページレイアウトエリアで、左サイドエリアと右サイドエリアの両方の表示を確認します。

右エリアと左エリアの両方にブロックを表示することができます。

続いて、左サイドエリアのみ表示する設定をしてみましょう。

「左エリアを使用」のみをチェックし、左エリアに表示したいブロックを設置して、「登録する」ボタンをクリックして設定を確定します。

ホームページで左サイドエリアのみ表示されているのを確認します。

左サイドエリアは、右サイドエリアよりも、幅が狭いので中央エリアをより広く表示することができます。

続いて、両サイドのエリアを非表示にして、中央エリアのみ表示してみましょう。

「左エリアを使用」と「右エリアを使用」のチェックを外して、「登録する」ボタンをクリックして設定を確定します。

ホームページで両サイドエリアが非表示になっているのを確認します。

サイドエリアの表示が必要ない場合は、中央エリアのみの表示で、ブロックの内容を広く表示することができます。

それでは、新しく作成したページをメインメニューに設置して、ホームページからアクセスできるように設定してみましょう。

管理画面メニューから、「サイトページ内容設定」をクリックして、「ページの内容設定」を表示して、「ページメニュー設定」タブを開きます。

「ページのメニュー設定」では、現在登録されているメインメニューの項目の一覧が表示されています。

「メニューへの項目追加」から、見出し上段、見出し下段、リンク先を設定して、「登録する」ボタンをクリックします。

リンク先には、新しく作成したページを指定します。

メインメニュー項目の登録が完了したら、「上へ」のリンクで、お問合せの上まで移動します。

サイトヘッダーの種類によって、使用されるメインメニューの項目数が異なります。

以上で、メインメニューへの項目追加は完了です。

ホームページを確認して、メインメニューに項目が表示され、リンク先が正しく設定されているか確認します。

続いて、登録したメインメニュー項目に、サブメニューを表示してみましょう。

先程登録した、メインメニュー項目のタイトル、または「詳細設定」のリンクをクリックして「サイトメニュー項目の詳細設定」を表示します。

「サイトのメニュー項目の詳細設定」では、メニューのタイトルや、リンク先の修正が行えます。

加えて、メニュー項目へのサブメニューの設定も行えます。

「サイトのメニュー項目の詳細設定」には、サブメニューの表示の項目があります。

こちらの「サブメニュー項目を設定する」のリンクをクリックして、「サブメニュー項目の設定」を表示します。

「サブメニュー項目の設定」では、メニュー項目のサブメニュー項目をリスト登録することができます。

新しいメニュー項目の初期の状態では、サブメニューには何も登録されていません。

「サブメニューの新規登録」から、メニュー項目名とリンク先を設定して、「追加する」ボタンをクリックします。

項目名やリンク先は、登録後でも修正することができます。

「サブメニュー項目の一覧」のリストに新しく作成したサブメニュー項目が追加されます。

以上で、メニュー項目へのサブメニュー項目の設定は完了です。

それでは、ホームページでサブメニュー項目の表示を確認してみましょう。

親のメインメニュー項目にマウスを合わせると、追加したサブメニュー項目が表示されます。

選択しやすいように、親のメニュー項目のサブメニューとして自動表示されるようになっています。

サブメニュー項目には、さらに下層のメニューを表示させることができるようになっています。

「サブメニュー項目の一覧」から、タイトルか「設定する」のリンクをクリックして、「サイトのサブメニュー項目の設定」を開きます。

「サイトのサブメニュー項目の設定」では、下層メニューの設定を行えます。

ここでは「項目名=リンク先URI」の形式で、改行区切りで登録を行います。

https://～でリンク先が設定された場合は、別タブで外部サイトを開くことができます。

以上で、下層メニュー項目の設定は完了です。

それでは、ホームページでサブメニュー項目の下層メニューの表示を確認してみましょう。

メニュー項目は、最大で３階層まで設定できるようになっています。

オフィシャルブログの作成は、SEO対策にも大きく影響するとても重要な要素です。

オフィシャルブログを作成してホームページに公開してみましょう。

まずは、コントロールパネルから「公式ブログ」をクリックして、「オフィシャルブログの管理」を表示します。

「オフィシャルブログの管理」が表示されたら、「新しい記事を書く」のボタンをクリックして、「新しい記事の登録」を開きます。

オフィシャルブログが未作成の状態ですので、リストにはまだ何も表示されていません。

記事タイトルと、記事本文を入力して「登録する」ボタンをクリックすれば、オフィシャルブログが作成されます。

公開日時を設定すると、設定した日時になるまで、ブログは公開されません。

オフィシャルブログはカテゴリーごとに管理することができます。

新しいカテゴリーを作成したい場合は「カテゴリーを追加」のリンクをクリックして、「ブログカテゴリーの登録」を表示します。

カテゴリー名を設定して、「登録する」ボタンをクリックすれば、新しいカテゴリーが作成されます。

オフィシャルブログには、画像を添付することができます。

画像リスト登録エリアをクリックするか、画像をドラッグ＆ドロップで設定でき、画像は最大5枚まで添付することができます。

それでは、登録した内容でオフィシャルブログが作成されているか、ホームページで確認してみましょう。

SEO対策にも有効なオフィシャルブログは、情報の発信源として最適ですので、積極的な活用をお勧めします。

ホームページにフォトを掲載する方法は、主に「フォトグラフ」と「フォトアルバム」の2種類があります。

「フォトグラフ」は、インスタグラムなどのようにタイル形式でフォトリストを掲載できる機能です。

サムネイルをクリックすると、フォトを拡大して表示することができます。

管理画面メニューから「公式フォトグラフの管理」をクリックすると、「オフィシャルフォトグラフの管理」が表示されます。

登録されているフォトをクリックすると、編集メニューが開き、設定内容の変更や表示順の変更、また画像を回転して保存することができます。

フォトグラフに画像を登録するには「新しいフォトの登録」から、アップロードする画像を設定して「登録する」ボタンをクリックします。

登録したフォトは、編集メニューから削除したり、画像を回転させることができます。

フォトグラフは、サイドエリアにも表示することができます。

ページレイアウト設定から、サイドエリアに「フォトグラフ」のブロックを配置するだけで、左右のサイドエリアにフォトグラフの画像リストを表示することができます。

サイドエリアのフォトグラムも、サムネイルをクリックすると画像を拡大して表示します。

「フォトアルバム」は、アルバムを作成して、その中にフォトを登録して掲載することができる機能です。

商品の紹介や、イベントでのフォトなどをカテゴライズして掲載するのに適したフォトの掲載方法です。

それでは、オフィシャルアルバムを作成して、その中にフォトを登録してみましょう。

オフィシャルアルバムを作成するには、管理画面のメニューから「公式アルバムの管理」をクリックして、「オフィシャルアルバムの一覧」を開きます。

ここでは、作成したアルバムの表示順の変更したり、設定画面へ移動することができます。

アルバムの設定画面では、アルバムタイトルの変更や、表紙画像の回転などを行うことができます。

「オフィシャルアルバムの一覧」の下部にある「新しいアルバムの作成」から、新規オフィシャルアルバムを作成できます。

タイトル、表紙の画像、アルバムの説明を設定して、「登録する」ボタンをクリックすると、新しいオフィシャルアルバムが作成されます。

「オフィシャルアルバムの一覧」から、「画像追加・削除」をクリックすると、「アルバムフォトの一覧」が開きます。

ここでは、登録したフォトの標準の変更や、フォトの設定画面へ移動することができます。

「アルバムフォトの一覧」の下部にある「アルバムにフォトを追加」から、新しいフォトをアルバムに登録することができます。

画像は最大で10枚まで同時にアップロードすることができます。

アップロードする画像を設定して、「登録する」ボタンをクリックすると、アルバムにフォトを追加することができます。

「アルバムフォトの一覧」フォトリストの「画像の設定」をクリックすると、「アルバム画像の設定」が開きます。

ここでは、フォトの説明を編集したり、フォトを回転させることができます。

それでは、ホームページで登録したアルバムと、アルバムフォトを確認してみましょう。

ホームページのメインメニューの「フォトアルバム」の項目をクリックすると、オフィシャルアルバムリストが表示されます。

リストからアルバムのサムネイルをクリックすると、「アルバムフォトリスト」ページが開きます。

ここでは、アルバムの表紙画像、アルバムのタイトル、アルバムの説明などが表示されます。

アルバムの情報の下部に、アルバムに登録されているフォトの一覧がリスト表示されます。

表示したいフォトのサムネイルをクリックすると、「アルバムフォト」ページが表示されます。

「アルバムフォト」ページでは、アルバムに登録したフォトが表示されます。

ここでは、ページ番号とフォトの説明が表示されます。

フォトの説明が未登録の場合は、フォトを登録した日時がタイトルとして表示されます。

「アルバムフォト」ページの下部には、アルバムに登録されているフォトがサムネイルでリスト表示されています。

サムネイルリストに表示されているフォトをクリックすると、見たいフォトに簡単に移動できるようになっています。

アルバムリストページの「ページレイアウト設定」を開いて、「アルバムリスト」ブロックの設定を開くと、アルバムリストのデザインを設定できるようになっています。

アルバムリストのサムネイルを角丸にしたり、サイズを正方形にしたり、マウスエフェクトの設定を行えます。

アルバムリストのサムネイルデザインの設定を、ホームページで確認してみましょう。

オフィシャルアルバムは、メンバーシップ機能とも連携していて、メンバーシップのリスナーから、フォトにコメントをもらえるようになっています。

以上で、ホームページへのフォト掲載のレクチャーは完了です。

オフィシャルカレンダーに予定を入れて、カレンダーのURLをSNSや外部サイトに掲載することで、多くの人に今後の予定を告知することができます。

ホームページのカレンダーに予定を表示してみましょう。

まずは、管理画面メニューの「公式カレンダーの管理」をクリックして、「カレンダーの管理」を表示します。

カレンダーの予定は、日時の範囲指定が行え、色付きの帯矢印とアイコンでカレンダーに予定の範囲の表示が可能です。

ここでは、独自のアイコンを予定に表示してみましょう。

アイコンの表示から「こちら」のリンクをクリックして、「カレンダーアイコンの表示一覧」を表示します。

「カレンダーアイコンの表示一覧」では、アイコンの画像をアップロードしてリストにすることができます。

一度アップロードしたアイコン画像は、予定の登録時にリストから選択するだけで、表示ができるようになります。

「カレンダーアイコンの登録」で、アイコンの名前と、アイコン画像を設定して、「登録する」ボタンをクリックします。

アイコンの画像のサイズは、カレンダー上に縦幅「 16px 」で表示されます。

アイコン画像が登録されると、「カレンダーアイコンの表示一覧」のリストに追加されます。

これで、カレンダーの予定登録から、アイコンが使用できるようになります。

「カレンダー項目の登録」に戻り、アイコンの表示をリストから選択します。

予定のタイトルと、リンク先を設定して、「登録する」ボタンをクリックすると予定がリストに追加されます。

リンク先は、「https://～」から入力されている場合は、外部サイトとして、新しいタブで表示されます。

それでは登録したカレンダーの予定が、ホームページで表示されるか確認してみましょう。

開始日時と終了日時を設定して、帯矢印で予定をカレンダー上に表示させることができます。

予定のタイトル、もしくは帯矢印をクリックすると、設定したリンク先が表示されます。

【 relav.jp 】では、「サイトプレミアム」にアップグレードすることにより、独自ドメインでのホームページ運営を行うことができるようになります。

それでは、ホームページの独自ドメイン設定方法をご紹介します。

「サイトプレミアム」は、月額3,800円で、独自ドメインでの運営や、Gmailでのinfoメール設定、ショッピングカート機能や、予約管理機能など、盛り沢山の内容でご提供しております。

今後も機能の追加や拡張を続けて行きますので、ぜひご登録をご検討ください。

管理画面の「プレミアム機能の管理」より、ご登録頂けます。

「サイトプレミアム」の登録が完了すると、管理画面に「独自ドメイン設定」のメニューが追加されます。

「独自ドメインの設定」では、希望する独自ドメイン名を送信するだけで、ドメインの購入手続きから、技術的な設定まで、全て【 relav.jp 】が担当します。

同時に、Gmailでのinfoメール設定もここで承ります。

後日提示される独自ドメインの料金の決済手続きを完了して、後は３日ほどお待ち頂くだけで、ご指定の独自ドメインで、ホームページにアクセスできるようになります。

使用できる独自ドメインは、「お名前.com」などで「取得可能」になっているドメインに限られます。

ドメインは購入せずに、管理画面から希望するドメイン名を送信してください。

サイトリニューアルなどでドメインを既に取得している場合は、別途ご連絡ください。

ホームページに掲載されている広告も、「サイトプレミアム」への登録で全て解除することが可能です。

ホームページの標準広告は「ページレイアウトエリア」に設置されており、通常の状態では解除することができません。

※現在、ウェブパーツエリアには、標準広告は掲載されません。

ここでは、「お問合せフォーム」のページを例にご紹介します。

「お問合せフォーム」ページの「ページレイアウトの設定」を開いて、標準広告のブロックをドラッグ＆ドロップで、「広告枠用」エリアに移動します。

これで「登録する」ボタンをクリックして、レイアウト設定を確定すると、標準広告は解除されます。

それでは、ホームページのお問合せフォームページにアクセスして、広告が解除されているのを確認しましょう。

同じ方法で、全てのページの標準広告を解除することができます。

また、バナー画像などで独自のオリジナル広告を作成して、設置することも可能です。