Website World 認定資格:初心者コース セクション 1

初心者コース セクション1

初心者レベルのウェブサイトワールドトレーニングコースのセクション 1 へようこそ。

このセクションを完了すると、次のことができるようになります。
  • セットアップウィザードを使用して試用ウェブサイトを作成します
  • トライアルウェブサイトのページの追加、削除、名前の変更
  • ウェブページにページタイトル、サブ見出し、段落テキストを追加する
  • ウェブページに画像を追加する
  • トライアルウェブサイトにロゴを追加する

セットアップウィザードを使用してトライアルウェブサイトを作成する

無料トライアルウェブサイトにサインアップするには、次の手順に従ってください。

  • 「トライアルを開始」ボタンをクリックする
  • Decor Theme のウェブサイト テンプレートの [選択] ボタンをクリックします (必要に応じて別のテーマを選択することもできますが、コースでは Decor Theme テンプレートを使用してデモンストレーションを行います)。


次に、ウェブサイトの種類を選択する必要があります。このコースでは、ショップ/小売オプションを選択する必要があります。


次に、連絡先情報とウェブサイトの名前を入力します。このコースでは、「My T-Shirt Shop」という名前を使用します。


Website Worldから、トライアルウェブサイトのログイン情報と仮パスワードが記載されたメールが届きます。仮パスワードを入力すると、CMS(コンテンツ管理システム)のウェルカムページに移動します。ここで新しいウェブサイトの編集とデザインを行います。

選択したテンプレートとウェブサイトの種類により、一部のページがサンプルページとして自動的に追加されました。サイトはまだ公開されていないため、ページの追加や削除、名前の変更は検索エンジンからのペナルティを受けることなく行えます(サイトが公開済みの場合、ペナルティを受ける可能性があります)。


ウェブページの追加、削除、名前の変更

ウェブサイトに新しいページを追加するには、画面の左側にある [ページの追加] ボタン (赤い矢印) をクリックするか、[Web ページ] タブのドロップダウン メニューから [ページの追加] ボタン (黄色の矢印) をクリックします。


新しい画面で、追加したいページの種類を尋ねられます。このコースでは、シングルページ(ドラッグ&ドロップ)を追加します。


次に、このページに関する情報(メニューボタンのテキスト、ページ見出し、SEOファイル名)を追加するよう求められます。以下は、このコースで追加した、新しいページ(会社概要ページ)のスクリーンショットです。


「今すぐ新しいページを追加!」ボタンをクリックすると、新しい「会社概要」ページが表示されます。また、画面左側のメニュー表示とウェブサイトのメニューバーにも自動的に追加されます。

SEOの観点から、ウェブサイトからページを完全に削除することは推奨されません。代わりに、ページの表示設定を変更して、ページが検索されないようにブロックし、メニューから削除してください。削除する必要がある場合は、必ずURLを実際のページにリダイレクトしてください。

現在、ウェブサイトは試験運用中ですので、ページを削除しても問題ありません。削除するには、「ウェブページ」ボタンをクリックします。すると、サイトマップページが開き、現在のページがすべて表示されます。この例では、「購読」ページを削除します。まず、隣にある歯車アイコン(赤い矢印)をクリックします。


すると、このページに関するオプション画面が開きます。「このページを削除」ボタンを選択してください。警告メッセージが表示されます。「今すぐページを削除」ボタンをクリックし、画面の隅にある「X」をクリックして画面を閉じてください。

ページ名の変更も、Webページのサイトマップページから行うことができます。「Webページ」ボタンをクリックし、今回は「ショッピング」ページの歯車アイコンを選択します。編集する部分は、ボタンテキスト、ページ見出し、SEOファイル名です。ウェブサイトが公開された後は、SEOファイル名を変更しないでください。変更するとウェブサイト上のリンクが壊れ、検索エンジンは新しいファイル名を新しいページと認識します。その結果、そのページが持っていたSEOのメリットは失われます。ただし、サイトがまだトライアルモードであれば、ペナルティなしでファイル名を変更できます。

このコースの目的のために、ボタンのテキストを「ショッピング」から「ショップ」に変更し、ページ見出しを「ショッピング」から「T シャツ ショップ」に変更します。


ウェブサイトに加えた変更を保存するには、緑色の「公開」ボタンをクリックしてください。このボタンをクリックしただけではサイトは公開されませんが、変更内容がトライアルサイトに保存されます。

ページにページタイトル、サブ見出し、段落テキストを追加する

ページを編集してタイトル、見出し、段落テキストを追加するには、画面左側の「Webページ」タブでページ名をクリックします。すると、編集するページが開きます。この例では、Innova Studioのドラッグ&ドロップエディターを使用して、以下に示すように「会社概要」ページを編集します。



「会社概要」ページが開いているので、サブ見出しと段落テキストを追加できます。これは、デフォルトでページ中央にある段落テキストボックス内をクリックするか、右側の列から必要なテキストの種類を含むスニペットを選択することで行うことができます。

使用したテキストへのリンクはここにあります。必要に応じてダウンロードしてコピーし、トライアル サイトに貼り付け (Ctrl + V) できます。

右クリックして「名前を付けて保存」を選択し、「About」ページのテキストをダウンロードします。

既存の段落スニペットボックスにテキストを追加し、その上にある見出しH2スニペットボックスをクリックしてドラッグしました。そして、この画像のように、見出しスニペットにタイトルを追加しました。


ページタイトル、つまり見出し1(h1)を変更するには2つの方法があります。1つ目は、ページ名を変更する前の手順の指示に従うことです。2つ目は、青いメニューから「SEO」タブを開き、「ウェブページのメタタグを最適化」を選択することです。

すると、ページタイトル(ページ見出し)を含むSEOメタタグを編集できるページが開きます。ここでは「会社概要」のままにしておきます。


ウェブページに画像をアップロードして追加する

画面の左側の「Web ページ」の下の列にあるタイトルをクリックして、「会社概要」ページを再度開きます。

このリンクを右クリックし、「名前を付けて保存」を選択して、以下で使用した画像をダウンロードしてください。

ページに画像を追加する方法は2つあります。どちらを使用するかは、挿入したい画像によって異なります。

  1. 既存のテキストブロックに画像を挿入するには、画像を挿入したい場所にカーソルを置き(赤い矢印)、編集バーの「+」記号(紫色の矢印)をクリックします。 - カーソルをテキストの横に置くと、テキストの位置が変わりますのでご注意ください。テキストの横に画像を配置したい場合は、スニペットボックスを使用することをお勧めします。 - 挿入する内容(画像、リンク、フォームフィールド)を選択するボックスが開くので、「画像の挿入」を選択します。デバイスから画像をアップロードするには、「参照」ボタンをクリックしてデバイス上の画像ファイルを開き、画像(JPEGファイルが最適です)をダブルクリックして、青い「アップロード」ボタンをクリックします。


CMSの画像ウィザードが開き、必要に応じて編集できる状態になります。画像の現在のサイズ、既存のファイル名、切り取り、回転、サイズ変更、JPGへの変換などのオプションが表示されます。この画像を「会社概要」ページに収まるようにサイズ変更します。「サイズ変更」ボックスのドロップダウン矢印をクリックし、画像サイズとして「448x448」を選択します。必要に応じてファイル名を変更し、「変更を保存」をクリックします。


別のボックスが開き、画像の位置、枠線、画像の周囲のパディングなど、画像の編集オプションを選択できます。この例では、デフォルトの枠線、配置、パディングを選択し、青い「今すぐ写真を挿入」ボタンをクリックします。


CMS 編集領域から見ると、「会社概要」ページは次のようになります。



さらなる画像編集スキルについては、コースの後のセクションで説明します。

ウェブサイトにロゴを追加する

ウェブサイトをブランディングする最良の方法の一つは、ビジネスロゴを追加することです。メニューの「デザイン」オプションボタンにマウスを移動し、「背景」または「ロゴ画像」オプションを選択してください。

このリンクを右クリックし、「名前を付けて保存」を選択して、使用したロゴをダウンロードします。


開いたデザインオプションページでは、デフォルトでテキストロゴ(ウェブサイト名)が表示されています。これをロゴ画像に置き換えます。画像アイコン(画像を変更)をクリックして、ロゴを追加してください。



再び画像ウィザードが開き、デバイスから画像を参照してアップロードできます(ロゴのサイズが既に910x120ピクセルになっている場合に最適です)。今回は、「サイズ変更」ドロップダウンから「910x120 ロゴ」を選択します。ロゴは、ウェブサイト名のテキストがあった場所、メニューの上に自動的に配置されます。「公開」を押して、ここまでの作業を保存します。

初心者コースのセクション1を終了しました。おめでとうございます!次は 初心者向けセクション2。