第7章 ホームページを更新しよう

第7章 ホームページを更新しよう

更新作業の流れについて

いよいよ、実際の更新作業に入ります。まずは、更新作業の流れを一通り体験してみましょう。

更新作業の流れ

ホームページの更新作業の流れは次の通りです。

ホームページ更新画面を開く

スタートページにログインして、ホームページ更新画面を開きます

更新したいページを開く

ホームページ更新画面で、更新したいページを開きます

編集する

ホームページ更新画面で、文字の入力や画像の挿入など必要な編集を行います。

本番に反映する

編集が終わったら、プレビュー画面で仕上がりを確認し、問題なければ本番ホームページに反映します。

※この作業を行わないと、ホームページは編集後の状態になりません

以上が、更新作業の流れです。

次に、それぞれの作業の詳細をご紹介します。

    ホームページ更新画面を開く

    スタートページにログインし、ホームページ更新画面を開きます。
    (参考:
    第4章 ホームページを確認しよう)開いたら更新画面の概要について確認しておきましょう。

      更新画面の概要

       左パネルの[ページ一覧]で、更新したいページをクリックします。
      →編集エリアにページの内容が表示されます。 

      更新画面の各エリアには下記の通り名前がついています。

      1.左パネル  2.編集エリア  3.右パネル  4.上パネル

      1.左パネル

      「左パネル」には、全体設定画面や画像管理パネルを開くボタン、ページ一覧が並んでいます。編集するページの選択も左パネルで行います

      2.編集エリア

      「編集エリア」では、文字・画像の追加や編集を行います。

       

      3.右パネル

      「右パネル」では、部品や要素の細かい設定を行います。

      4.上パネル

      「上パネル」には、部品の追加や元に戻すやプレビュー画面を開くボタンがあります。

      5.ページ設定パネル

      5.ページ設定パネル

      「ページ設定パネル」は、左パネルにあるページ一覧の歯車ボタンから開きますページのタイトルやSEO設定など、そのページについての詳しい情報を設定するための画面です。

      更新したいページを開く

      ホームページ更新画面を開いたら、更新したいページを開きます。

      左パネルの[ページ一覧]で、更新したいページをクリックします。
      →編集エリアにページの内容が表示されます。

      ページ一覧の「ページタイトル」と「サイドメニュー名」は連動しています。

      • サイドメニューの表示文言を変えたい場合、編集エリアで文言を編集することはできません。
        「ページ一覧」でページ名横の歯車マークをクリックして、「ページタイトル」を変更します。
         

      文章を編集する

      次に、更新画面で開いたページを編集します。

      ここでは、文章を入力する手順をご紹介します。あらかじめメモ帳に文章を下書きを作成しておくことをお勧めします。

        操作手順

        1)編集エリア内で文字を書き換えていきます

        書式ボタンが表示された状態で、編集します

        【入力して書き換える場合】
        1.書き換えたい箇所を選択
        2.キーボードで文字を入力します

        【メモ帳から貼り付ける場合】
        1.開いておいたメモ帳を表示し、貼り付けたい文章を選択
        2.キーボードの「Ctrlキー長押し+Cキー」でコピー
        3.書き換えたい箇所にカーソルをおく
        4.キーボードの「Ctrlキー長押し+Vキー」で貼り付け

        編集画面には「コピー」や「貼り付け」を行うボタンがありません。そのため、キーボードの「ショートカットキー」を利用します。貼り付けで崩れた場合、文字を選択してから上部の書式ボタンの「Tx」ボタンをおすと書式が解除されます。

        2)文章を入力した部品の外をクリックします(保存)

        編集した部品の青線の外をクリックして、書式ボタンが消えた状態にします。

        変更した内容が保存されます。

        書式ボタンが表示されたままだと保存前

        部品の外をクリック→保存完了

        更新画面には「保存」ボタンがありません。編集をした部品以外をクリックして、必ず保存を行いましょう。

        上記の作業を繰り返して、各箇所の文章を書き換えます。

        入力した文章に装飾したり、画像を挿入したりする手順は「第8章 基本的な操作を覚えよう」でご紹介します。

        本番に反映する

        更新画面で編集をしたら、作業内容を本番ホームページに反映させましょう。

          プレビューで仕上がりを確認する

          (クリックして画像を拡大)

          反映させる前に、プレビュー画面で仕上がりを確認します。
          プレビューは編集エリア右上の[プレビュー]ボタンをクリックします。
           

          [スマホサイトをプレビュー]ボタンをクリックし、スマホ表示を確認します。

          ※PC表示とスマホ表示、どちらも綺麗に表示されるように、[スマホサイトをプレビュー]も確認しながら編集します。
          スペースを多用しない、文末まで自然に改行させることが、スマホできれいに見せるポイントです。

          本番ホームページに反映する

          [更新]を押さないと反映されません

          プレビューで仕上がりを確認して、問題なければ本番ホームページに反映します。

          編集したページの[更新]ボタンはグレーから緑色に変わります。
          緑色[更新]ボタンクリックして、インターネット上に変更した内容を反映させます。
           

          サイドメニューやパンくずリストに変更が加わるような更新をした場合、左パネル上部の「サイドメニュー」「パンくずリスト」の更新ボタンが緑色になります。

          緑色になっていたら、本番ホームページに反映する際に一緒にクリックしておきましょう。

          • パンくずリストとは?
            現在見ているページがホームページ内のどの位置にあるのかを教えてくれるナビゲーションのことです。(例)サイト右上にある トップページ>料金 
             

          本番のホームページを確認する

          本番(インターネット上)のホームページは、更新画面内から簡単に開くことができます。

          編集エリア右上の「公開中のページを見る」ボタンをクリックします。
          ただし、まだ閲覧制限が設定されている場合は、IDパスワードを入力して確認してください。(画面右上「全体設定」>「閲覧制限

          ここまでが、基本的な更新の流れです。続けて、以下の作業も最初のうちに行っておきましょう。

          作れないページをいったん非公開にする

          お引き渡し時に用意されていても、公開までに完成しないページはいったんメニューから消しておきましょう。

          ページを非公開にする

          ページを非公開にする方法についてご案内します。

          操作手順

          (クリックして画像を拡大)

          1)左パネルで、非公開にしたいページの[設定]ボタン(歯車ボタン)をクリックします

          (クリックして画像を拡大)

           2)「非公開にする」をクリックします

          →「公開中のページを見る」をクリックし、非公開の状態になったことを確認します

          非公開にした後、その公開ページを開くと「404エラー」が表示されます

          サイドメニューから削除する

          サイドメニューから削除する方法についてご案内します。

          操作手順

          1)左パネルで、非表示にしたいメニューのページを探し、[歯車]ボタンをクリックします

          (クリックして画像を拡大)

          2)[サイドメニューに表示する]のチェックを外します

          (クリックして画像を拡大)

          3)左パネルで、ページとサイドメニューの2箇所の[更新]ボタンをクリックします

          →「公開中のページを見る」をクリックし、メニューがなくなったことを確認します

          ヘッダーメニュー・フッターメニューから削除する

          ヘッダーメニュー・フッターメニューから削除するには、メニュー項目を削除します。
          メニュー項目を削除する方法についてご案内します。

          操作手順

          1)更新画面上で、削除したいメニュー項目にマウスを置き、「要素」と表示されるところでクリックします

          →右パネルが開きます

          2)右パネルで、[この項目を削除]ボタンをクリックします

          (クリックして画像を拡大)

          3)編集した部品以外の場所をクリックします

          ※この作業を行わないと変更が反映されません

          (クリックして画像を拡大)

          4)左パネルで編集したページの[更新]ボタンをクリックします

          「公開中のページを見る」をクリックし、メニュー項目が削除されたことを確認します

          メニューから削除しても、ページ自体は無くなりません。


           

          まとめ
          • まずは、更新作業の流れを覚えるペン!
          • 更新した内容は「プレビュー」で見ることができるペン!
          • 公開までに完成しないページは「非表示」にしておくペン!