受付 9:00～11：30 13：30～17:00
03-5388-5985
第8章 基本的な操作を覚えよう
公開までに覚えておきたい基本操作について
ホームページ更新画面ではいろいろなことができますが、まずは最初の公開までに覚えておきたい基本の操作についてご紹介します。
文章を装飾する
入力した文章を装飾してみましょう。文章の装飾とは、文字に色をつけたり強調したりすることをいいます。
操作手順
１）装飾したい文字列を選択します
→入力しているエリアの上部に書式ボタンが表示されます
２）書式ボタンが表示されます
→太字にするには太字ボタンを押して、部品以外の場所をクリックします
３）部品以外の場所をクリックします
→書式ボタンが消えて、変更内容が保存されます
リッチテキストエディタのボタン一覧
各ボタンの機能については、下表をご参照ください。
【ご注意ください】
編集するテキストエリアにより、利用できるボタンに制限があります。（例：「見出し」は、中揃えや右寄せ、インデントが利用できません）
| 番号 | ボタン名 | |
|---|---|---|
| （１） | 元に戻す/繰り返し | 文字列の編集で、直前に行った操作を戻したり、戻した操作を繰り返したりします |
| （２） | すべて選択 | テキストエリア内の文字列を全て選択します。 |
| （３） | リンク設定/リンク削除 | 文字列やアイコン、バナーなどにリンクを設定/削除する場合に利用します。 |
| （４） | アンカー設定 | ページ内の特定の場所にジャンプするための「アンカー」を設定します。 |
| （５） | 表組み設定 | 表を「行数」「列数」「横幅」などを指定し、挿入します。独自の表を作成したい場合に利用します。 |
| （６） | 文字サイズ調整 | 文字サイズを調整します。 標準の文字サイズは15です。（８）書式の削除で15サイズに戻すことができます。 |
| （７） | 太字/斜体/下線 | 選択した文字列に、太字や、下線を設定します。（※ 斜体は設定できません） |
| （８） | 書式の削除 | 選択した文字列に設定している書式を削除します。 |
| （９） | 文字色 | 選択した文字列の文字色を変更します。 クリックすると、パレットが表示されるので、設定したい色をクリックします。 |
| （10） | 文字の背景色 | 選択した文字列へ背景色（蛍光ペン）を引きます。 |
| （11） | 番号付き箇条書き/箇条書き | 選択した段落に、番号付き箇条書き「1. 2. 3.」や、箇条書き記号「●」を付けます。 |
| （12） | インデント解除/インデント | 選択した段落に、インデントを設定/解除します。 |
| （13） | ブロック引用文 | 他社サイトや書籍などから、引用する場合に利用します。 |
| （14） | 左揃え/中揃え/右揃え | 選択した段落（文字列）を左揃え、中揃え、右揃えにします。 |
部品を追加する
新しい「部品」を追加してみましょう。
本システムでは、文章や写真を入れる枠組みのことを「部品」と呼んでいます。部品は、文章・画像・誘導リンクなど、複数の「要素」で構成されています。
部品とは
- 部品にはいろいろな種類があります
- 1ページはさまざまな部品の組み合わせでできています
要素とは
- 要素は、複数組み合わさり１つの部品を形成します
- 要素は追加・削除することができます
- 要素の位置やデザインを変更することができます
POINT！部品と要素を使い分けよう
マウスカーソルを置く位置によって、「部品」と「要素」のどちらを編集するかが決まります。
右パネルを「部品設定」と「要素設定」に切り替えることで、さまざまな操作が行えます。
部品の編集
青い外枠あたりで、カーソル横に「部品」と表示される場所で、マウスを左クリックします
→右パネルが開いて、部品の移動・複製・削除などが行えます
要素の編集
文章や画像などの編集したい要素の上で、カーソル横に「要素」と表示される場所で、マウスを左クリックします
→「文章要素」の場合、上に書式ボタンが表示され、文章を編集できるモードに切りかわります
【やってみよう！】一番シンプルな「文章を入れるための部品」を追加してみましょう。
操作手順（部品の追加）
メインエリアに「文章」用の部品を追加します。
（クリックして画像を拡大）
１）上パネル［+部品を追加］ボタンをクリックします
（クリックして画像を拡大）
２）部品を入れたい位置にある［ここに追加］バーをクリックします
→部品追加ウィンドウが開きます
（クリックして画像を拡大）
３）左のメニューから 「文章」用の部品を選択してクリックします
→プレビューが右に表示されます
４）プレビュー画面下の緑色のボタンをクリックして追加する部品を決定します
→指定した場所に部品が入ります。続けて文章等を編集します。
（クリックして画像を拡大）
５）編集中の部品以外の箇所をクリックして保存します
リンクを設定する
次に、別のページやサイトにジャンプするための「リンク」を設定してみましょう。
リンクの種類について
リンクの設定方法は以下の２種類 あります。
１．リンク要素にリンクを設定する
誘導リンクやバナーは
「リンク要素」で
誘導リンクやバナーなど、部品内に用意されている「リンク要素」を使ってリンクを設定します。
リンク要素を使うと見栄えのいいリンクを設定することができます。
設定には右パネルを利用します。
２．文字にリンクを設定する
文章中にリンクを入れる
「テキストリンク」
文章中の文字にリンク（テキストリンク）を設定します。
文字にリンクを設定する場合は、文中など好きな位置にリンクを挿入することができます。
設定にはリッチテキストボタン内のリンクボタンを利用します。
操作手順（リンク要素にリンクを設定する）
すでに追加されている部品の「誘導リンク」要素または「バナー」要素にリンクを設定します。
手順は以下の通りです。
※部品によっては「誘導リンク」要素や「バナー」要素がない場合があります。その場合は右パネルで新しく要素を追加してください
（クリックして画像を拡大）
１）リンク要素の上にカーソルを置き、「要素」と表示されるところでクリックします
→右パネルが開きます
（クリックして画像を拡大）
２）右パネルの[リンク設定]欄でリンク先を指定します
（クリックして画像を拡大）
※外部リンクを選択した場合は、右図のように設定します
例）外部のサイトにリンクする場合
・URL「http://www.yahoo.co.jp」
・新しいウィンドウで開く 「チェックあり」
（クリックして画像を拡大）
４）編集中の部品以外の箇所をクリックして保存してから、左パネルの[更新]ボタンをクリックします
→編集エリアではリンクは動作しませんので、「公開中のページを見る」をクリックし、リンクが設定されたことを確認します
操作手順（文字にリンクを設定する）
文字にリンクを設定するには、リッチテキストボタンを利用します。
手順は以下の通りです。
（クリックして画像を拡大）
１）リンクを設定したい文字列部分をクリックします
→部品が選択され編集可能になります
（クリックして画像を拡大）
２）リンクを設定したい文字列をドラッグ・選択し、［リンク挿入］ボタンをクリックします
→リンクの設定画面が表示されます
（クリックして画像を拡大）
３）「リンクの種類」「リンク先情報」を設定し、[OK]をクリックします
ホームページ内の別ページを開くリンクにしたい場合、以下のように設定します。
「リンクの種類」・・・ページから選択
「リンク先情報」・・・［▼］ボタンをクリックし、ページを選択
（クリックして画像を拡大）
４）編集中の部品以外の箇所をクリックして保存してから、左パネルの[更新]ボタンをクリックします
→編集エリアではリンクは動作しませんので、「公開中のページを見る」をクリックし、リンクが設定されたことを確認します
画像を入れる
御社で用意されたオリジナル画像をホームページ内に追加してみましょう。
ここでは、もともと入っていた画像を、オリジナルの別の画像に入れ替える方法をご紹介します。
あらかじめ、オリジナル画像が入っているフォルダがどこにあるか確認しておきましょう。
操作手順
（クリックして画像を拡大）
１）ホームページ更新の画面上で、入れ替えたい画像をクリックします
→右パネルが開きます
（クリックして画像を拡大）
２）右パネルで［画像変更］ボタンをクリックして画像を追加を選びます
→画像設定ウィンドウが開きます
（クリックして画像を拡大）
３）[選択して追加]ボタンをクリックします
→画像を選ぶウィンドウが開きます
（クリックして画像を拡大）
４）パソコン内に保存してある画像を選択して、[開く]をクリックします
→画像がアップロードされます
※画像設定ウィンドウの点線枠内に画像をドラッグアンドドロップして、画像を追加することができます。また、複数画像を選択して一度にアップロードすることも可能です。
（クリックして画像を拡大）
５）アップロードした画像を選択して、緑色のボタンをクリックして画像を追加します
→更新画面に、選択した画像が表示されます
（クリックして画像を拡大）
６）編集中の部品以外の箇所をクリックして保存してから、左パネルの[更新]ボタンをクリックします
→「公開中のページを見る」をクリックし、画像が設定されたことを確認します
まとめ
- 基本的な操作を練習するペン！
- 慣れるまでちょっと大変だけどがんばるペン！