平成２５年度 NetCommons 活用研修会 ― ホームページ作成：初級編 ― N e tC o m m o n s 演習テキスト 埼玉県立総合教育センター ＜ 目 次 ＞ ○ネットコモンズを利用した学校ホームページの作成 ネットコモンズ(NetCommons)の特徴 3 ネットコモンズとは ………………………………………………………………………………･ 3 NetCommons のサイトにログインします …………………………………………………………･ 4 セッティングモードに切り替えページの構成設定をします …………………………………･ 5 ページ編集の基本操作 6 学校のロゴを設定します …………………………………………………………………………… 6 サイト名の変更をします …………………………………………………………………………… 9 モジュールの基本操作 11 トップページを編集します ……………………………………………………………………… 初期状態の不要なモジュールを削除します …………………………………………………… トップページに「新着情報」のモジュールを追加します ……………………………………… ｢お知らせ｣のモジュールを追加します ………………………………………………………… ＨＴＭＬによる編集 ……………………………………………………………………………… 表示するモジュールの順番を変更します ……………………………………………………… ｢お知らせ｣のタイトルの変更や枠線の消すには………………………………………………… 画面全体をきれいにそろえるには ……………………………………………………………… 11 11 12 13 16 17 17 18 メニュー編集の基本操作 19 メニューを追加します …………………………………………………………………………･ 19 メニューの順番を入れ替えるには？………………………………………………………… 20 メニューのページを一時的に非表示にするには ………………………………………………･･ 21 各モジュールの基本操作 21 ｢日誌｣のモジュールを追加します ………………………………………………………………… 日誌のモジュールに投稿します …………………………………………………………………･･ ｢掲示板｣のモジュールを追加します ……………………………………………………………… ｢掲示板｣のモジュールに投稿します ……………………………………………………………… 既存のホームページを利用します ……………………………………………………………… ページのスタイルを変更するには …………………………………………………………… ｢カレンダー｣のモジュールを追加します ………………………………………………………… 学校説明会の案内を作成します ………………………………………………………………… 登録モジュールを追加します …………………………………………………………………… フォトアルバムを追加します …………………………………………………………………… ページにカウンタモジュールを追加します ………………………………………………… リンクリストのモジュールを追加します ……………………………………………………… 学校の地図に google マップを利用します ………………………………………………………･･ ｢RSS｣のモジュールを追加します ………………………………………………………………･ サイトの閉鎖 ………………………………………………………………･……………………… 2 21 22 23 24 25 28 28 30 31 34 38 39 40 41 42 ○ネットコモンズを利用した学校ホームページの作成 ネットコモンズ(NetCommons)の特徴 ネットコモンズとは （１）CMS の１つであるネットコモンズ ネットコモンズは、Web サーバとホームページ作成ソフトウェアが一体になった CMS の一つです。 ＣＭＳ（Contents Management System:コンテンツマネージメントシステム）を利用しホームページを作 成する利点は次のとおりです。 HTML に関する専門的な知識が必要ありません。 担当者ごとに権限が割り当てられているのでホームページの更新が特定の管理者の負担となることがあ りません。 ホームページ作成のための専用のソフトウェアを使わないで、すべての操作がブラウザ上で行えます。 必要な機能をモジュールとして追加することが可能です。 ユーザ管理を行うことによって双方向のコミュニケーションが可能になります。 電子メールと組み合わせることによって利用者への通知機能を利用することができます。 アクセス数の解析など戦略的なホームページの作成に役立ちます。 （２）どのようなページができるのか 次のような構成になります。 ログインすることによって関係 情報を知ることができます。 トップページの内容です。 新着情報は、サイト内での更新 された最新の内容などを表示 します。 必要に応じ、カレンダーや天気 予報、カウンタなどを追加する ことができます。 必要な内容はモジュールとし て追加することができます。 NetCommons のサイトにログインします。 今回演習で利用するサイトに接続します。URL は個人ごとに与えられたものをご使用ください。 3 演習用 URL NetCommons のサイトへ移動し管理者用 ID でログインします 管理者用の ID とパスワードは、 指定されたものをお使い下さ い。 演習用管理者 ID 演習用管理者パスワード 管理者用のＩＤはこのサイトにおけるすべての権限を持ったものです。取り扱いには十分に気をつけ ましょう。 次のような画面が表示されます。仮のホームページが表示されます。 4 セッティングモードに切り替えページの構成設定をします NetCommons は必要な機能をモジュールという形で画面上に貼り付けながら作ります。このページは 仮のものなので不要なモジュールを削除します。画面の設定を変更する場合は「セッティングモード」 に切り替えます。 初期値のページスタイルは次のようになっています。好みによって変更すること可能ですがここでは 次の形で作成します。 ヘッダ部 ロゴ、ログインボタンなどを配置します 中央カラム コンテンツの内容を配置します。 左カラム メニューや関係する情報を配置します。 ページ編集の基本操作 学校のロゴを設定します。 5 あらかじめ、ロゴを画像作成ツールなどで作成しておきます。 大きさには指定はありませんが、目安として次の通りです。配置する段階で縮小ができますが、あまり 大きなサイズにならないように注意します。 ４ ０ ０ ×６ ０ ピクセル logo.gif マウスカーソルをヘッダ部に合わせると、現在表示されている NetCommons のロゴ上に されます。 が表示 をクリックしてヘッダ部のロゴを編集します。 クリックしロゴを編集しま す。 次の様にワープロの編集画面と同じような画面が表示されます。 現在表示されているロゴの上でクリックし、ロゴの画像を選択し、Delete キーでロゴを削除します。 Delete キーで残った文字を削除します。 6 画像や文字が消去できたら、作成したロゴを登録します。画像の挿入ボタンをクリックします。 ロゴの画像ファイルを指定します。｢参照｣でファイル名を指定し、｢画像の挿入｣で画像を貼り付けます。 大きさは画像のすみにあるハンドルで調節します。 次のように画像の次に文字を入力します。 よろしければ決定します。 7 次のようにヘッダ部にロゴが作成されました。 「セッティング終了」します。 次のようにロゴが表示されました。 サイト名の変更をします。 8 初期のサイト名として「サイト名未設定」となっています。これを学校名に変更します。 画面上部にある「管理」をクリックします。 次のようにコントロールパネルが表示されます。その中の「システム管理」を選択します。 「一般設定」のタブにある「サイト名」を変更します。 サイト名を変更後、下方向にスクロールし「決定」をクリックします。「ＯＫ」をクリックします。 9 下方向にスクロール システム管理のメニューを終了します。 をクリックします。 「管理終了」をクリックします。 次の様にサイト名が変更できました。 モジュールの基本操作 10 トップページを編集します。 通常ログイン後はプライベートスペースといって個人だけしか見ることができないページが開きま す。これからトップページを編集しますのでメニューより「トップページ」をクリックします。 初期状態の不要なモジュールを削除します。 「セッティングモード」にします。 モジュールの一つ一つが枠に囲まれて現れます。 「Welcome to NetCommons!」の「削除」をクリック します。よろしければ「ＯＫ」もクリックします。 確認 のメッセ ージが表 示されます。 「OK」を選 択します IMAGIN のモジュールを削除します。 マウスカーソルを IMAGIN の上に移動すると次のように 削除します。 11 の印が現れます。 をクリックし 次のようにメニューを残すだけになりました。 トップページに「新着情報」のモジュールを 追加します。 メニューよりトップページを選択し、 「新着 情報」のモジュールの追加を設定します。新着情報のモジュールはサイト内に新しい情報が更新される と自動的に表示されます。ここでは「お知らせ」、「掲示板」「日誌」に更新があった場合現れるように します。チェックができたら「決定」ボタンをクリックします。 次のように表示するべき情報がありませんので 次のように表示されます。 「お知らせ」のモジュールを追加します。 トップページにサイト作成の案内のお知らせを追加します。「モジュールの追加」をクリックし「お 知らせ」を選択します。 12 先ほどロゴを編集した時の画面と同じような画面が出てきました。基本的な操作法はワープロと同じ です。文字だけでなく表や画像、添付ファイル、リンクまで作成することができます。 次のように文字を入力し、最後に決定をクリック します。 「学校のホームページを新しくしました。このホー ムページは NetCommons2.1 を利用して開設してい ます。ホームページの作成には多くの人の協力によ って作られます。 」 次のようにお知らせが表示されます。修正したい 場合は「編集」を選択して下さい。 下の図は、NetCommonsの共通エディタで表示され るツールボタンは次の通りです。 書式設定 13 左からフォント、サイズ、スタイルを設定するためのプルダウンメニューです。効果をつけたい箇所の先頭でクリック するか、効果をつけたい箇所をカーソルで選択してボタンをクリックします。 文字効果 左から、「太字」「斜体」「下線」「取り消し線」をつけるためのボタンです。効果をつけたい箇所の先頭でクリック するか、効果をつけたい箇所をカーソルで選択してボタンをクリックします。 下付、上付文字 下付文字、上付文字をつけるためのボタンです。 文字色 文字の色を変更するためのボタンです。右側の下矢印を押すと、文字の色を選ぶためのパレットが表示されます。効果 をつけたい箇所の先頭でクリックするか、効果をつけたい箇所をカーソルで選択してボタンをクリックします。 背景色 文字の背景の色を変更するためのボタンです。右側の下矢印を押すと、背景の色を選ぶためのパレットが表示されます。 効果をつけたい箇所の先頭でクリックするか、効果をつけたい箇所をカーソルで選択してボタンをクリックします。 書式設定の削除 設定した書式を削除するために使います。書式を設定した範囲をカーソルで選択してからクリックして使います。 NetCommons1.1以降のwysiwygエディタでは、「独自タグ」は廃止し、HTMLによる本来の指定を用いています。そのため、 外部のWebページやWORDの文書をコピーペーストすると、元のHTML文書に書かれた指定が予期せずに残ってしまう場合 があります。そういうとき、このボタンを使えば書式設定をいっせいにクリアすることができます。 編集のやり直し 編集をやり直したり、再編集するときに使います。 文章の揃い 文章を左揃い・中央揃い・右揃いにするときに使います。文章を書き始める前にボタンをクリックしてもよいですし、 文章を書き終えてから範囲をしていしてクリックしてもよいでしょう。画像を中央にもってくるときにも活用できます。 段落・箇条書き 段落番号をつけたり、箇条書きをするときに使います。段落や箇条書きをはじめる前にボタンをクリックします。 インデントの調整 インデントの長さを調整するときに使います。 14 表の作成 文中に表を作成したり、作成した表を編集したりするときに使います。まず、表のアイコンを クリックすると下の図のようなイメージが表示されます。 表の上でマウスを動かして、挿入したい表の行・列の数になるように選んでクリックします。 すると、エディタ画面に空の表が表示されるので、表のセルの中にカーソルを合わせてクリック し、セルの中に文字を書き入れます。より詳しい表の設定については、 の右側の下向き矢 印をクリックしてメニューを表示させてください。 罫線 文中に罫線を引くときに使います。クリックするとその場所に罫線が引かれます。 絵文字一覧 絵文字一覧を表示させるボタンです。他のCMSに比べ、日本でよく使われるあいまいな表現が多いのが特徴です。 Ｔｅｘ 数式を書く時に使います。このボタンをクリックすると、以下のような「ユー ザープロンプト」が別窓で開きます。 「Tex表記文字を入力してください」の下のボックスにTexの数式モードの記法 にしたがって文字列を入力します。（数式モードの始まりを示す$マークは不要で す。）プレビューを押すと、その文字列がどのように画面上に現れるかが表示さ れます。その内容でよければOKをクリックします。 リンク 文中にリンクを張ったり、それを取り消したりすることができます。リンク したい箇所をカーソルで選択し、 をクリックすると、リンクを挿入する ためのプロンプトが別窓で表示されます。 リンク先のURLを記入し、そのリンクを説明する「タイトル」を記入します。 （「読み上げソフト」ではこのタイトルを読み上げますので、目の不自由な 方のためにも、適切なタイトルを記入するように心がけてください。）ターゲットとは、リンクをクリックしたときの 表示方法を指します。指定しない場合、ユーザがリンクをクリックすると画面がリンク先へ移動します。「新規ウィン ドウ」を選択すると、リンク先が別画面として表示されます。 コンテンツの保存 記入したコンテンツをHTML形式で保存し、手元のPCにダウンロードするために使います。 画像の挿入 このボタンを使うと、記事の中に、画像を挿入することができ ます。添付できる画像やファイルの形式は、使っている NetCommonsの管理者が許可した形式に限られます。 をクリ ックすると、画像挿入用の画面が表示されます。参照ボタンをク リックしましょう。 15 手元で操作しているパソコンがWindowsXPの場合、下のよう な「ファイルの選択」という箱が現れます。挿入したいファイ ルを探してクリックし、「開く」ボタンをクリックします。 ここで、すでにサーバに画像が転送されています。プレビュ ーをクリックすると、どのような画像が挿入されるかのイメー ジが表示されます。デフォルトでは画像は左寄せで挿入されま す。画像を挿入する位置を調整したい場合は「詳細設定」のリ ンクをクリックします。図の挿入位置として、「左」「右」を 選ぶと、画像の位置を決め、文字を回りこませることができま す。「指定なし」を選ぶと、画像周辺には文字が入りません。 画像の大きさを変更したい場合には、編集画面の中に表示された画像をクリックして画像を選択します。すると四 隅・上下左右に小さな白い点が表示されます。これをドラッグすることで画像の大きさを変更することができます。 「代替テキスト」という欄には、画像の簡単な説明を記入してください。読み上げソフトでは、ここに書かれた説明 を読み上げるので、的確な説明を記入するよう心がけましょう。 ファイルの添付 このボタンを使うと、コンテンツにファイルを挿入することができます。添付できる画像やファイルの形式は、使っ ているNetCommonsの管理者が許可した形式に限られます。 ボタンをクリックすると、ファイルアップロード用の 画面が表示されます。参照ボタンをクリックしファイルを選択します。さきほどのアップロードの挿入のための画面で 「OK」をクリックします。さらに別のファイルを添付したい場合には「別のファイルを添付」のリンクをクリックし、 同様の操作を行います。 編集画面の大きさの変更 編集画面が狭すぎる、また広すぎると感じたときは、画面右下にある 部分をつかんでドラッグすると、編集画 面の大きさを調整することができます。 ＨＴＭＬによる編集 画面下部にある「HTML」のタブをクリックすると直接 HTML ファイルを編集することができます。 表示するモジュールの順番を変更します。 「新着情報」と「お知らせ」の順番を変更します。「新着情報」のタイトル付近にマウスカーソルを置 16 このへんをつかんで ドラッグします き「お知らせ」の上にドラッグすることによって位置の変更ができます。 「お知らせ」のタイトルの変更や枠線の消すには お知らせのモジュールの「ブロックスタイル」のタブを選択し、「一般」のタブを選択します。その中 の「ブロックの名称」を変更し「決定」ボタンをクリックします。 「テーマ」や「配色」の中から希望の枠線を選択します。配色の中で、枠線の色を背景色に合わせるな どの指定をします。 17 画面全体をきれいにそろえるには 画面のロゴなどを記述するヘッダ部や左カラム、中央カラムなど横幅をシステムに任せてしまう方法も ありますが、標準的な解像度を想定して横幅を設定するときっちりとしたページを作ることができます。 例えば、最近高解像度のディスプレイが多く使われているので横幅を 1024 と仮定し、このサイトの横 幅を 850 ドットとした場合次のようなブロックスタイルの幅が考えられます。 上 ① 左 右 ヘッダ部 最小の広さ 上 上 ② 左 ③ 右 左 右 左カラム 中央カラム 最小の広さ 最小の広さ 下 下 ブロックスタイルの設定例 最小の広さ 上 右 下 左 ① 846 2 2 2 2 ② 246 2 2 2 2 ③ 596 2 2 2 2 それぞれモジュールにおけるの「ブロックスタイル」の「一般」の設定値を適当に変更し、 「適用」 「決 18 定」の順にクリックします。 メニュー編集の基本操作 メニューを追加します。 ここでは、 「トップページ」を「ようこそ」と変更し、 「校長室より」 「行事予定」 「学校説明会のご案内」 「学校アルバム」 「学科の紹介」 「事務室より」との 5 つのページを追加します。 メニューは基本的には次のスペースから成っています。 パブリックスペース このスペースは誰もが見ることができるページです。このページを利用する と学校のホームページとして利用することができます。 プライベートスペース 自分以外は見ることができないページです。キャビネットを利用して私的な データを置いたり、覚書などで利用します。ログインすると現れます。（ゲ スト権限は除く）また、プライベートスペースは名称として「ハンドル名」 の部屋として表示されます。 グループスペース 所属するグループの部屋として現れます。同じグループに所属する利用者同 士で情報を共有することができます。 ページの作成方法は、NetCommons2.0 から階層的に設けることができます。ページを取りまとめるカテ ゴリを置くことできます。 「メニュー」の右側の「編集」をクリックします。 まずは、 「トップページ」から「ようこそ」と変 更し「ページ追 加」をクリックします。 19 同様に「校長室より」 「行事予定」 「学校説明会のご案内」 「学校アルバム」 「事務室より」との４つのペ ージを追加します。メニューを階層的に作成する場合は「カテゴリ追加」を選択し、その下に「ページ 追加」を行います。 「学科の紹介」は「カテゴリ追加」で行い、その中に「普通科の紹介」 「外国語科」 の紹介などと入れることができます。 ページの追加が終わったら、「編集終了」クリックします。 メニューの順番を入れ替えるには？ メニューの左側の を移動する位置までドラッグ＆ドロップします。 メニューのページを一時的に非表示にするには メニューの左側の「ON」をクリックすると非表示のページになります。一時的に見せたくないページは 20 非表示にします。 表示 非表示 各モジュールの基本操作 「日誌」のモジュールを追加します。 「校長室より」に日誌モジュールを追加します。日誌モジュールは日々の記録を文字だけでなく、図や 写真を入れながら投稿することができます。つまりブログと同じような使い方ができるモジュールです。 学校での使い方は、毎日の給食を写真を入れて記録したり、植物の成長記録や、学校行事の記録を掲載 することができます。 メニューの「校長室 より」を選択し「セ ッティングモード」 をクリックします。 「モジュール追加」から「日誌」を選択します。「新規作成」のタブを選択しタイトル名を「校長室だ より」とし「決定」をクリックします。 一度に表示する 件数を「5 件」とし「決 定」をクリック します。 21 セッティングモードを終了します。 日誌のモジュールに投稿します。 「校長室だより」に投稿します。 「記事を 書く」をクリックします。 例として次のような内容を記述します。 内容がよろしければ「決定」をクリック します。 「はじめまして、校長の×××と申しま す。このたび学校ホームページを公開す るにあたり……」 誤って記述した場合でも「編集」をクリックすれば再編集が 可能です。 また、 書 き かけの場合「一時保存」とします。この 場 合 は「一時保存中」となり公開されません。 投 稿 22 者には以下のように表示されます。 日誌のモジュールの特徴は、最新のもの が一番上に表示されます。日々の教育活 動の報告などはこのモジュールが有効 に活用できます。また、過去にさかのぼ って内容を見ることができますので学校の記録としても活用できます。 「掲示板」のモジュールを追加します。 モジュールの追加で「掲示板」を追加します。 掲示板に名前をつけます。１つのサイトに複数の掲示板を作成しますので用途に応じ名前をつけます。 入力後「決定」ボタンをクリックします。後に学習する投稿する人の権限も指定することができます。 表示方法を指定します。また、返信などがわかるように展開方法も指定します。入力後「決定」ボタン 23 をクリックします。 「掲示板」のモジュールに投稿します。 次の様に掲示板が作成できました。投稿は「新しい話題の投稿」をクリックします。 投稿する件名と内容を入力します。記入の方法は「日誌」のモジュールと同じです。入力後「投稿する」 ボタンをクリックします。また、途中の場合は「一時保存」ボタンをクリックします。この場合、記述 品内容は保留のままとなり、他の人は見ることはできません。 掲示板に投稿されました。詳しく見た い場合は、件名をクリックします。 24 記事の内容に「返信を書く」をクリッ クします。投稿者は、投稿した内容に 誤りがあった場合は、 「編集」ボタンで 再編集することができます。また、管 理者の権限があれば投稿した内容を削 除することもできます。 掲示板の扱いについてはご注意くだ さい。掲示板といっても公開できる場 所におくとホームページとなります ので、通常の学校ホームページの発信 の方法と同様な扱いをお願いします。 また、後に学習するユーザ管理をする ことによって掲示板の内容を電子メ ールで配信することも可能になります。 既存のホームページを利用します。 パブリックスペースの「事務室より」にお知らせのモジュールを追加します。 「事務室より」にメニューを切り替え「セッティングモード」にします。 どちらかをクリック 「お知らせ」のモジュールを追加します。 「お知らせ」のタイトルを「各種証明書の申請につい て」に変更します。 「ブロックスタイル」のタブを選択 します。 25 「ブロックスタイル」のタブの中の「一般」を選択します。 「ブロ ック名 称」を 「各種証明書の申請について」に変更します。 「ブロック名称」を修正後「決定」ボタンをクリッ クします。 「ブロック名称」が変更されました。内容を記述するため「編集」をクリックします。 既存のホームページがある場合はその内容をそのまま「お知らせ」のモジュールに取り込むことができ ます。既存のホームページのコピーしたい箇所をドラッグし「編集」で「コピー」します。 26 コピーする範囲をドラッ グし、「編集 」「コピー 」 （Ctrl+c）します。 コピーしたい「お知らせ」の 編集画面で右クリックをし、 「貼り付け」を選択します。 よろしければ決定します。 このように既存のホームページがある場合簡単に移行 することができます。しかし注意しなければならない ことは、コピーする内容に画像などが含まれる場合、 リンク情報が登録される関係で元のホームページを削 除されると画像などが表示されなくなります。画像な どは個々にアップロードするか、もともとのホームペ ージを削除しないようにして下さい。 ページのスタイルを変更するには NetCommons を利用すると間単にページの編集ができることがわかったと思いますが、独自のデザイン がほしい場合はデザインを変更することができます。 画面上部にあります「ページスタイル」をクリックしてください。 27 「ページスタイル」の中から様々なテーマを選ぶ ことができます。気に入ったテーマを選択し「決 定」をクリックします。各モジュールからモジュ ールのテーマを選択することができます。気に入 ったテーマを選択し「決定」をクリックします。 「カレンダー」のモジュールを追加します。 「行事予定表」のメニューの中に「カレンダー」のモジュールを追加します。 月ごとに大きく表示したいので「月表示（拡大） 」を選択し、 「決定」ボタンをクリックします。 「セッティングモード」を終了します。 28 セッティングモードは、各ページにモジュールを追加や削除、 レイアウトの構成を修正する際に切り替えます。内容の記述 についてはユーザの権限の範囲内でセッティングモードに変 更しなくても編集することができます。ユーザの権限につい ては後に説明します。 行事予定を追加します。予定を追加する日にマウスカーソルを合わせ、 をクリックします。 「件名」と公開対象を「パブリックスペース」とし「決定」ボタンをクリックします。 パブリックスペースに登録するとインターネット上に公開する予定として表示されます。プライベート スペースの場合は、ログインした人でしか見ることができません。 29 次の様に行事が追加されました。 公開対象が「パブリックスペー ス」の場合、このサイトの訪問者 は登録した行事をカレンダーか ら確認することができます。後に 学習するグループ管理の機能を 使うと特定のグループのみ内容 が見られるログインしたユーザ の権限の範囲内で行事を確認す ることができます。公開する必要 のない行事などは参加するグル ープの行事として登録すること ができます。 学校説明会の案内を作成します。 「学校説明会のご案内」に実施内容の詳 細の「お知らせ」モジュール、参加申し 込みの「登録フォーム」モジュールを作成します。 「学校説明会のご案内」の中に「お知らせ」モジュールを追加します。 次の例を参考に学校説明会の案内を作成します。 30 登録モジュールを追加します。 「登録フォーム」モジュールを追加、参加申し込みフォームを作成します。ここでは、参加する生徒の 名前、中学校名、学年を入力および選択できるようにします。 「新規作成」を選択します。 管理しやすいよう「登録フォー ム名称」を入力します。また、 申込者が申し込みの手続き終 了後表示させるメッセージを 入力し、 「決定」ボタンをクリックします。 31 不要な項目は削除します。 「お名前」以外を削除します。削除の確認のメッセージがありましたら「は い」を選択します。 中学校名を入力するテ キストボックスを作成 するので「項目を追加 する」をクリックしま す。 項目名に「中学校名」、 「必須項目にする」を 選択し、入力タイプを 「テキスト」とします。 説明は次のように入力 します。最後に「決定」 ボタンをクリックしま す。 項目名に「学年」を入力し、「必須項目にする」を選択し、入力タ イプを「選択式（択一）」とします。選択肢に上から順に「１学年」 「２学年」「３学年」とし、不足分については「選択肢追加」をク リックし「その他」を追加してください。説明は次のように入力し ます。最後に「決定」ボタンをクリックします。 32 入力する内容を確認したら、「実施する」をクリックします。 「編集終了」をクリックし ます。 次のように登録フォームが できました。必要項目を入 力後「「決定」を クリックすると 申込者がサーバ に登録されます。 学校見学会の申 し込みに登録し た人の確認をし ます。 「編集」ボ タンをクリック してください。 「CSV」出力をクリックします。 33 「開く」を 選択します。 次の様に登録されたデータを確認することができます。 開いたデータは適当なところへ保存して下さい。 登 録 さ れた デ ータ を 削除 す る には 「データのみ削除」を選択します。 フォトアルバムを追加します。 学校アルバムに学校の風景などの写 真を登録します。 「学校アルバム」の メニューを選択し、 「フォトアルバム」を追加します。 フォトアルバムの名称を「学校の風景」とします。後ほど学習しますが、管理者以外でも写真の投稿が できるようにするには、 「モデレータ」や「一般」をチェックします。 34 表示方法を設定します。自動的に写真が入れ替わるようにするには「アルバムの自動スライドショー」 を選択します。一覧として見たい場合は「アルバムの一覧表示」を選択します。「アルバム作成」をク リックします。 アルバムの名前を「学校の風景」とします。表示画像を選択するため「参照」をクリックします。 表紙となる画像を選択します。表示形式を縮小版とすると写真のプレビューができます。 35 「アップロード」ボタンをクリックすると写真がサーバにアップロードされます。よろしければ「決定」 ボタンをクリックします。 アルバムの「写真の追加」をクリックします。 追加する写真を参照で選択し、 「添付ファイルを追加」をクリックします。複数の場合は選択するごと 36 にクリックします。 登録する写真がすべて選択できたら、 「決定」ボタンをク リックします。 スライドの切り替えタイプや、スライド間隔時間、写真 サイズを適当に変更します。最後に「決定」ボタンをクリックします。 等間隔で自動的に写真 が入れ替わります。 37 ブログツールなどをうまく活用すると、学校の地図案内、学校周辺の天気予報、また、学校ホームペー ジをポータルサイトとして活用するため、検索エンジンの窓や時計などを置くことができます。 ページにカウンタモジュールを追加します。 学校ホームページにカウンタをつけどのページがよく見られているか分析することは大切なことです。 ページごとにカウンタをつけ、訪問者数の記録をとることができます。 カウンタを表示させたいページに「カウンタ」モジュールを追加します。 デフォルトでは次の様に設定 次の様に表示内容を修正します。 「決定」ボタンをクリックします。 次の様にカウンタが表示されます。 リンクリストのモジュールを追加します。 38 学校のホームページから便利に使えるサイトのリンクリストを作ります。 「リンクリスト」のモジュールを追加します。 リンクリストの名称を適当な名前でつけ「決定」ボタンをクリックします。後に学習する一般のユーザ からも追加できる場合や「カテゴリ」を追加する権限をつける場合は、チェックを入れます。 「表示方法変更」のタブをクリック し、表示方法を選択します。最後に 「決定」ボタンをクリックします。 リンク先を追加します。 登録するサイトのタイトル名と URL を入力します。自動取得にチェックを入れておくと自動的にサイ トからタイトルを取り込 みます。最後に「決定」 クリックします。 同様にいくつかのサイトを登録します。 学校の地図に google マップを利用します。 39 メニューに「学校までのアクセス」 などのメニューを追加します。こ のページに「お知らせ」モジュー ルを追加します。 http://www.google.co.jp よ り Google マップをクリックします。 学校の所在地を入力し「地図を検 索」のボタンをクリックします。 「リンク」をクリックします。 「HTML を貼り付けてサイトに地図を埋 め込みます」に表示される内容をクリッ プボードにコピーします。 （記述されてい る内容をドラッグし、Ctrl キーを押しな ら C のキーを押します。） 地図を使いしたいページにお知らせのモ 40 ジュールを追加します。お知らせの編集に おいて、「HTML」のタブをクリックしま す。先ほどコピーした内容を貼り付けます。 （、Ctrl キーを押しなら v のキーを押し ます。最後に決定をクリックします。 次のように学校周辺の地図が表示されます。出発地を入力すると学校までの交通機関や乗換え情報を調 べることができます。 この方法は、ブログツールなどを利用して、学 校周辺の天気予報や時計などを画面上に表示 することに応用できます。 「RSS」のモジュールを追加します。 ホームページをポータルサイトとして利用す る場合など RSS を利用することができます。 ここでは、朝日ヘッドラインニュースの利用について説明します。ヘッドラインニュースの URL を入 力し、 「決定」ボタンをクリックします。 次の様に最新のニュースが表示されます。 詳しく知りたい場合は関心のあるニュー スをクリックします。 41 サイトの閉鎖 ホームページの製作途中はあまり見せたくないものです。その場合サイト閉鎖を行うと便利です。 外側から、 「メンテナンス中のため～」と表示され見ることはできませんが、管理者の権限でログイン することによって、サイトの構築をすることができます。 「管理」→「システム管理」の「一般設定」のタブに「サイトの閉鎖」がここを「はい」を選択すると 際と閉鎖が行えます。 テキストボックスにメッセージを入れるとメッセージが表示されます。 memo 42
© Copyright 2026 Paperzz
