2021/1/15 作成
ホームページ作成
スタートアップガイド
1
I. 本書について
本書では、NetCommons2（以下旧ページ）から NetCommons3（以下新ページ）に切り 替える際、最初にお渡しする雛形ページを元に、最も簡単な内容のホームページを作成する ための手順を示したものです。 本書を用いて作成できるホームページのイメージは以下の通りです。2
II. 作業を始める前に（注意）
作業に入る前に以下の点にご注意ください。 ⚫ これから行う作業は旧ページと新ページの両方を、共にログインした状態で使います ⚫ 画像やファイルは新ページ内で再度添付の操作を行う必要があります（ただし自身の ホームページではないサイトのリンクはそのままコピーできます）。 ⚫ 新ページでは背景色の設定ができません。 ⚫ 日誌や行事予定については一括コピーが出来ません。あくまで一項目ずつコピーする ので時間がかかります。 注意事項の詳細については、後述の操作説明と合わせてご説明します。III. セッティングモードを ON にする
サイト編集時は、「セッティングモード」（旧ページでもあったモード）に切り替えてから 作業を行うことになりますので、本書ではこれ以降の作業を行う際、「セッティングモード」 が ON になっていること前提で話を進めていきます。 セッティングモードを ON にするには、ログインしている状態で画面右上にある「セッ ティングモード ON」のメニューをクリックしてください。表示が「セッティングモード OFF」に切り替わって、画面に表示される項目が増えていたら切り替え成功です。3
IV. サイト名を変更する・デザインを変える
(1) サイト名変更 1. ログイン後の画面で、ページの上部にあるメニューから「管理」をクリック 2. 切り替わった画面の左側にあるメニューから「サイト管理」をクリック 3. サイト管理画面の一番上にある「サイト名」欄に変更したいページ名（学校名で大丈夫 です）を入力し、一番下にある「決定」ボタンをクリック4 4. 左上の文字が先程入力したサイト名に変更していることを確認してください (2) ページの色を変える（必要に応じて行ってください） 前述しましたが、新ページにはページの背景色を選択する項目がありません。ただし、「ペ ージの一部の色」は変更できますので、以下にその方法を記述します。 1. ページの上部にあるメニューから「管理」をクリック 2. 切り替わった画面の左側にあるメニューから「サイト管理」をクリック（ここまで『サ イト名変更』と同様） 3. 「サイト管理」画面の上部にあるメニューから「ページスタイル」をクリック 4. 変更したいスタイルの下にある「決定」ボタンをクリック ここを押してスタ イル一覧を表示 すべてのスタイルの枠に 決定ボタンがあるので、 変更したいスタイルのも のをクリック
5 5. 決定後、各メニュー画面やページタイトルの装飾が変わっていることを確認してくだ さい ページ内の各プラグイン（旧ページでいうモジュール、お知らせや日誌など）の枠につい ては個別に変更する必要があります（操作方法については後述）。 先程まで黒主体だったデ ザインが、枠や文字の色 がピンクになった
6 (3) 個別窓の枠の色を変える（必要に応じて行ってください） 先ほどページスタイルを使用した色の変更をしましたが、ページスタイルを変更するだ けでは大きく印象が変わりません。 そこで、ページ内の個別窓（上の画像で「新着」や「メニュー」と書いているところ）の 色を変えていきます。 手順は次の通りです。 メニューの個別窓を例にする と、「ホーム」ボタンの色は替 わっているが、上の枠は灰色に なっている
7 1. 個別窓の右側にある歯車のアイコンをクリック
2. 個別窓の上部分が編集可能な状態になります
3. 「default」と書いてあるところをクリックし、一覧から変更したい色を選択（今回は info を選択します）
8
4. 「決定」ボタンをクリック（「終了」ボタンを押すとキャンセルされます）後、個別窓 の枠色が変更されていることを確認
9
V. ホーム画面の作成
ホーム画面を作成します。メニューから「ホーム」をクリックしてください。 (1) バナー画像を挿入する 1. 旧ページからバナー画像をダウンロードします、まず旧ページのバナー画像を右クリ ックし、「名前をつけて画像を保存」をクリック（使っている PC 環境によって多少文 言が変わるかもしれませんが、どの環境でも右クリックして画像を保存するメニュー が表示されます） 図：旧ページのトップバナー この項ではホーム画面の作成 解説をします。始める前に必 ず「ホーム」をクリックしま す。10 2. 保存先を聞かれるので、任意の場所（すぐ消すならデスクトップなどわかりやすいとこ ろに保存すると楽です）を選択して保存するボタンをクリック 3. 新ページに移動し、「ここにバナーを入れてください」と書いている横の「編集」ボタ ンをクリック 4. 編集画面が画面中央に出るので、中央の編集画面へ移動 「ここにバナーを 入れてください」 が上と中央の二箇 所に表示されます が、中央側が編集 画面になります。 以後、どの画面で も編集する際はこ の中央の位置に表 示されます。
11
5. 「ここにバナーを入れてください」の文字を削除し、編集メニューから「画像の挿入・ 編集」ボタンをクリック
12
7. 2 で保存した画像をダブルクリックする（もしくは選択して「開く」ボタンを押す） 8. 画像の挿入・編集画面に戻るので、位置を「中央寄せ」、画像サイズを「原寸大」（サイ
13
9. 編集画面に戻るので、画面下の「決定」ボタンを押す
10. 「ここにバナーを入れてください」と書いていたところに画像が表示されれば完了で す
14 (2) 連絡先を追加する（お知らせモジュールの文章をコピーする） お知らせモジュールをコピーする場合、文字の大きさや装飾をある程度残した状態でコ ピーすることができます。 ここでは、ホームページの連絡先をコピーするという形で、お知らせをコピーする方法を ご説明します。 1. 画面右下にある「所在地・連絡先」欄の「編集」ボタンをクリック 2. 編集画面が中央に出るので、編集メニュー（文字入力欄の上側にあるアイコン群）から 「ソースコード（＜＞のアイコン）」をクリック ここをクリック
15 3. ソースコード編集画面が表示されるので、ソースコード欄の文字を全選択し、削除する 4. 旧ページの連絡先欄の「編集（右上にある編集の文字かスパナのマーク）」をクリック する この部分を削除 学校によっては ここが「編集」 になっている
16 5. 編集画面の下側にある「HTML」タブをクリックし、表示された文字を全選択し、コピ ーする 6. 新ページに戻って、ソースコード欄に先ほどコピーした文字を貼り付けて、右下の「OK」 ボタンを押す 貼り付け終わったら OK ボタンを押す この部分に貼り付け
17 7. 画面下の決定ボタンを押す
8. 旧ページと同じ内容の文章が表示されていれば OK
18
VI. 学校紹介の作成
学校紹介画面を作成します。メニューから「学校紹介」をクリックしてください。 (1) 学校紹介の作成 文章をコピーするだけの場合は「連絡先を追加する（お知らせモジュールの文章をコピー する）」と同じ手順になります。 お知らせのコピー手順がわかっている方は、「画面を広く見せる（レイアウトを変更する）」 まで進んでください。 1. メニューから「学校紹介」をクリック 2. 「学校紹介」欄の「編集」ボタンをクリック この項では学校紹介画面の作 成解説をします。始める前に 必ず「学校紹介」をクリック します。19
3. 編集画面が中央に出るので、編集メニュー（文字入力欄の上側にあるアイコン群）から 「ソースコード（＜＞のアイコン）」をクリック
20
5. 旧ページの学校紹介欄にある「編集（右上にある編集の文字かスパナのマーク）」をク リックする
21
7. 新ページに戻って、ソースコード欄に先ほどコピーした文字を貼り付けて、右下の「OK」 ボタンを押す
22
23 (2) 画面を広く見せる（レイアウトを変更する） 1. 画面上部にある「ページ設定」をクリック 2. ページの一覧が表示されるので、変更したいページを探して、ページ名の右横にあるか 「編集」ボタンをクリック（今回は学校紹介のページを編集します） 3. ページ設定画面が表示されたら、「レイアウト編集」をクリック 他のページのレイアウ トを変える場合は、対 象のページの編集ボタ ンを押します
24 4. レイアウトの一覧が表示されたら、今回は右サイド画面を非表示にして画面を広げた いので、一覧から右サイド画面がないレイアウトをクリックした後、「決定」ボタンを クリック 5. レイアウトが変わって、右サイド画面分だけ学校紹介欄が広がったことを確認してく ださい サンプルページの例だ と、カレンダーと連絡 先が非表示になり、幅 が広がっています。 （なお、あくまで設定 したページのみが非表 示の対象なので、他の ページにはカレンダー や連絡先が残ったまま になっています）
25 (3) プラグイン（旧ページ名：モジュール）の追加 今回のサンプルでは、学校紹介の補足として画像を挿入します。 ここでは、画像を挿入するためのお知らせ枠を増やしながら、プラグイン（旧ページだと モジュールと呼ばれていたもの）の追加方法についてご説明します。 1. 追加したい位置の「プラグイン追加」ボタンをクリック（今回は学校紹介ページの中央 に追加したいので、学校紹介ページの真ん中上にある「プラグイン追加（センター）」 を押します） 2. 追加したいプラグインを探して、プラグイン右横にある「追加」ボタンをクリック（今 回はお知らせプラグインを追加します）
26 3. プラグインの編集を行う（例として、お知らせ欄に「test」と記入したものを作成しま す） 4. 先程のプラグインが画面の一番上に追加されていることを確認します 5. プラグインの位置を上/下に移動させたい場合、プラグイン右上の↑↓をクリック（今 回は↓を押して位置を変えます） 6. 学校紹介欄の下にお知らせが移動していることを確認 上にあったお知らせ の位置が下に移動し ているのが確認でき たら完了です
27 (4) 本文の中に画像が含まれている場合 「作業を始める前に」でもお伝えしましたが、今までご説明したコピー方法はあくまで「文 字とフォント設定のコピー」ができるのみで、画像や PDF ファイルに関しては、旧ページ で行っていたのと同じ方法で再度新ページに貼り付ける必要があります。 これまでと同 じ方法でコピ ーしようとし た場合、文字 のみコピーさ れて画像は表 示されない
28 手順は以下の通りです。（編集の方法や画像の貼り付け方法の詳細は前述を参照） 1. 先ほど追加したお知らせの「編集」ボタンをクリックし、一旦置いておく 2. 旧ページに移り、先に画像を「名前をつけて保存」しておく 3. コピーしたいお知らせモジュールの編集ボタンをクリックし、編集画面になったらコ ピーしたい部分を画像ごと全選択してコピーする 4. 新ページに戻り、先ほどコピーしたものを貼り付ける この時点では 文字のみ貼り 付けられます
29 5. 元々画像が差し込まれていたところにカーソルを合わせて、「画像の挿入・編集」ボタ ンをクリック 6. 画像の挿入・編集画面で、先ほど予め保存しておいた画像を選択し、挿入する 7. 必要に応じて文字の装飾を行い、「決定」ボタンを押します。 「組織図は以 下の通り。」の 下に画像が差 し込まれてい れば成功です 今回は見出し を太字にし て、フォント サイズを本文 より大きくし ています
30
VII. 行事予定の作成
行事予定画面を作成します。メニューから「行事予定」をクリックしてください。 行事予定は、1 つずつ入力する必要があります。手順は以下のとおりです。 1. 予定を入れたい日の横にある＋マークをクリック 2. 行事予定を入力し、「決定」ボタンをクリック この項では行事予定画面の作 成解説をします。始める前に 必ず「行事予定」をクリック します。31
入力画面は変わって いますが、入力項目 は旧ページと同じも
32 3. 入力した予定の詳細確認画面が出てくるので、内容を確認して問題がなければ「一覧へ」 をクリック 4. カレンダーに予定が表示されていることを確認 行事予定ページの 他、右サイド画面に ある小カレンダーに も「①（その日のス ケジュールの総 数）」という表示で 追加されます
33
VIII. アクセスの作成
アクセス画面を作成します。メニューから「アクセス」をクリックしてください。 1. サンプルページの地図内にある「拡大地図を表示」をクリック（もしくはブラウザから Google マップにアクセス） この項ではアクセス画面の作 成解説をします。始める前に 必ず「アクセス」をクリック します。34 2. Google マップが表示されるので、自身の学校を検索する 3. 検索結果が画像のように左側に出たことを確認し、「共有」ボタンをクリック サンプルでは県庁を 検索しています。 「徳島県庁」となっ ているところに自身 の学校名を入力して 検索してください ここをクリック
35 4. 共有画面が表示されるので、「地図を埋め込む」→「HTML をコピー」の順でクリック 5. 新ページに戻ってマップ画面の「編集」ボタンをクリック 先にここをクリック 「HTML をコピー」 ボタンが表示される のでクリック コピーが上手くいか ないときは、ボタン の横にある文字列を 通常の方法で選択→ 右クリックでコピー
36 6. 「ソースコード（＜＞のアイコン）」をクリックし、ソースコード欄に先ほどコピーし た文字列を貼り付ける 先にここをクリック 既にサンプル用の文字列が入力されているので、一旦全て削除（も しくは全選択して上書きできる状態に）し、先ほどコピーした文字 列を貼り付ける
37 7. 「決定」ボタンをクリック
8. 自身の学校の所在地が表示されていることを確認
所在地のアイコンと住所欄が自身 の学校になっていたら成功です
38
9. 必要に応じてアクセスの詳細を追加します（アクセスの追加や編集の方法は「学校紹介 の作成」で行った方法と同様にできます）
