学校 CMS 作成・運用マニュアル（NetCommons3 版）

サイト管理者用 – 作成編
Ver.1.02018 年 12 月 27 日改定iもくじ
第１章 CMS とは(1) CMS とは・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

P2(2) 承認者の役割・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P3
第 2 章 CMS の基本サイト・・・・・・・・・・・・・・・・・・・・・・・・・ P4(1) 基本サイトの構成・・・・・・・・・・・・・・・・・・・・・・・・・・・ P5(2) 基本サイトへのログイン・・・・・・・・・・・・・・・・・・・・・・・・ P6(3) 基本サイトのレイアウト・・・・・・・・・・・・・・・・・・・・・・・・ P7(4) 各フレームの横幅の設定・・・・・・・・・・・・・・・・・・・・・・・・ P8
第 3 章 プラグインの追加・削除・・・・・・・・・・・・・・・・・・・・・・ P9(1) プラグイン（フレーム）の追加・・・・・・・・・・・・・・・・・・・・・ P9(2) プラグイン（フレーム）の削除・・・・・・・・・・・・・・・・・・・・・ P10(3) 基本サイトのメニュー・・・・・・・・・・・・・・・・・・・・・・・・・ P11(4) 基本サイトのメニューの編集・・・・・・・・・・・・・・・・・・・・・・ P11～P12(5) メニューからページを隠したい場合・・・・・・・・・・・・・・・・・・・ P13
第 4 章 トップページの作成・編集 学校 CMS トップページの作成例(1) 学校 CMS トップページの作成例１・・・・・・・・・・・・・・・・・・・

P14～P17(2) 学校 CMS トップページの作成例 2・・・・・・・・・・・・・・・・・・・

P18(3) ［トピックス］作成・編集の手順・・・・・・・・・・・・・・・・・・・・ P19
第 5 章 メニューコンテンツの作成・編集(1) ［学校の概要］
・［本校の教育］作成・編集の手順・・・・・・・・・・・・・ P20(2) ［行事予定］作成・編集の手順・・・・・・・・・・・・・・・・・・・・・ P21～P22(3) ［学校生活］作成・編集の手順・・・・・・・・・・・・・・・・・・・・・ P23～P24(4) ［行事アルバム］作成・編集の手順・・・・・・・・・・・・・・・・・・・ P25～P26(5) ［学校からのおたより］作成・編集の手順・・・・・・・・・・・・・・・・ P27～P28
サポート会社・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P29

1

第１章 CMS とは(1) ＣＭＳとはCＭＳとは、コンテンツ・マネージメント・システム（Contents Management System）の略称で、ＨＴ
ＭＬやスタイルシートなど、ウェブサイトの構築、更新に必要な専門知識が必要とされる部分はすべてシステムが制御するため、利用者はテキストや画像などのコンテンツのみを入力していくことで、簡単にウェブサイトを更新することができます。
Web サイトの運用には、専門的な知識や技術が必要とされ、そうした知識がなければ、Web サイトでのページの作成や更新作業に参加することが難しいことから、ページの作成や更新作業における管理者への負担が大きく、ページの作成や更新作業が滞ることが少なくありません。
ＣＭＳを利用することで、ワープロソフト操作の感覚で、Web ページが作成できます。また、ページごとに作成や更新を行う担当者を設定することができ、これまでのように管理者が一人で作る Web サイ
トではなく、複数のメンバーで分担したページ作成や更新が可能になります。

従来の学校 Web サイト
メニュ
ー新着情報

管理者が一人でサイトの作成更新

管理者

今日の給食

他の職員から情報提供を
学校の出来事

受け、管理者が作成、更新
学習の部屋

複数で担当を分担して作成更新

CMS での学校 Web サイトメニ
ュー

管理者の負担大

新着情報

学校の出来事

今日の給食

管理者
サイト全体の運用をマネジメント

学習の部屋

2

第１章 CMS とは(2) 承認者の役割
学校ＣＭＳでは、役割分担として、学校サイト管理者、承認者、作成者の３つの役割を設定しています。それぞれの役割について下の表に示します。
役割

内容

学校サイト管理者

学校の Web サイト（ＣＭＳ）を主になって担当する職員です。Web サイト（ＣＭＳ）の構成、ページの作成、運用を行います。いわゆる、学校ホームページ担当者です。

承認者［学校生活］メニューで作成者が投稿する記事について、確認し、承認することができます。

作成者１［学校生活］メニュー、［行事アルバム］メニューで、記事や画像を投稿投稿者２～６することができます。

承認者は、［学校生活］ブロックで作成者が投稿する記事について、確認し、承認する役割を担当します。承認者の承認がなければ、インターネット上に記事を公開することはできません。
また、承認者に発行されるアカウント、パスワードは非常に重要な学校情報です。厳重な管理をお願します。

3

第 2 章 学校 CMS の基本サイト

これが学校ホームページを作成するためのベースとなる基本サイトです。

このサイトでは、「プラグイン」と呼ばれる様々な機能を持つ部品（フレーム）を組み合わせて、ページを作成します。
各学校で公開した内容に合わせて、それぞれの「プラグイン」（フレーム）を使い分け、組み合わせることで、学校のニーズにあったオリジナルのホームページを作成することができます。
この基本サイトをカスタマイズすることで、各学校のニーズにあったホームページを作成します。

4

第 2 章 学校 CMS の基本サイト(1) 基本サイトの構成

学校 CMS サイトは、「プラグイン」と呼ばれるさまざまな機能を持つ部品を配置し、その配置をフレームと呼びます。
ページはフレームの組み合わせでできています。
【基本フレームの機能】[メニュー]フレーム

サイト内のナビゲーション[学校バナー]フレーム

トップページのアイキャッチ[新着情報]フレーム

新しく追加した記事を通知[お知らせ]フレーム

保護者や地域に知ってほしい情報について通知[トピック]フレーム

おすすめのコンテンツや注目してほしい情報への誘導[連絡先]フレーム

学校の住所や電話番号の基本情報[リンク]フレーム

学校からのリンク先を表示[バナー]フレーム

バナー等を掲載し、各ページへ誘導

基本サイトでは、学校ホームページで一般的に設定されているページやカテゴリをあらかじめ作成しています。各学校のホームページで必要なページやカテゴリには、記事を書き込んだり、新たなページやカテゴリを追加したりしてください。
必要のないページは削除したり、修正したりしてオリジナルのホームページを作成してください。

5

第 2 章 学校 CMS の基本サイト(2) 基本サイトへのログイン
画面右上のログインをクリックします。

ここで入力するログインＩＤとパスワードは、各学校に配付してある学校サイト管理者のログインＩＤとパスワードです。
学校サイト管理者以外のアカウント（ログイン ID）では、編集する権限がありません。

学校サイト管理者のアカウントやパスワードは重要な学校情報です。担当者のみならず、管理職による適正かつ厳重な管理をお願いします。

6

第 2 章 学校 CMS の基本サイト(3) 基本サイトのレイアウト
学校 CMS サイトでは、ページごとに下の 16 パターンのレイアウトを選択することができます

左図のレイアウトの場合、上下を三分割し、上部を「ヘッダー」と呼び、下部を「フッター」と呼びます。中央部はさらに三分割して、左側を「左カラム」、右側を「右カラム」、中央を「センターカラム」と呼びます。
基本サイトのトップページは、右カラムのないもので作成しています。
レイアウトを変更するには、下記の方法で行います。
① ［ページ設定］をクリックします。
② 編集するページの[編集]をクリックします。
③ [レイアウト編集]をクリックします。

各学校のニーズに応じてレイアウトは変更してください7

第 2 章 学校 CMS の基本サイト(4) 各フレームの横幅の設定
NetCommons2 で設定されていた場合、各フレームの横幅の設定を探されるかもしれません。
しかし、NetCommons3 では、横幅の設定は廃止され、自動になりました。
これは、タブレットやスマートフォンなどに対応するための機能変更となるものです。
【パソコンでの表示】【スマートフォンでの表示】自由に設定はできませんが、NetCommons2 でよくあったように、画面幅がまちまちでデザインが崩れているように見えるという問題は解消されました。

8

第 3 章 プラグインの追加・削除

学校ＣＭＳでは、ページに配置したプレゼントの場所（位置）を「フレーム」と呼びます。
フレームを追加したり削除したりする場合には、画面の右上にある［セッティングモード］をクリックします。

(1) プラグイン（フレーム）の追加
追加したいカラムの上部の［プラグイン追加］をクリックします。
プラグイン（フレーム）はカラムごとに追加することになります。

作りたい内容に応じたプラグインを選びます。

9

第 3 章 プラグインの追加・削除(2) プラグイン（フレーム）の削除
セッティングモードにすると、各フレームの右上に［編集アイコン］と［削除アイコン］が表示されます。[削除アイコン]をクリックするとブロックが削除されます。

フレームを削除しても、データは残っています。
（※ NetCommons2 とは異なります。
）
誤って削除した場合は、再度プラグインを配置し、データ（ブロック）を指定しなおします。

お知らせプラグインのフレームの編集を開いたところ。表示したいデータ（ブロック）を指定しなおせば、復活できます。

10

第 3 章 プラグインの追加・削除(3) 基本サイトのメニュー

基本サイトでは、左カラムに左図のようなメニューが作られています。

○ 学校概要・・・学校の概要についての情報を記載。
○ 本校の教育・・・伝統的教育活動や行事・地域との連携等、特長的な教育について記載。
○ 行事予定・・・学校の行事予定を月ごとに記載。
○ 学校生活・・・学校の日々の活動を記載します。ブログ的な活用。
○ 行事アルバム・・・複数の画像をカテゴリごとに表示。
○ 学校からのおたより・・・「学校だより」や「保健だより」等、学校からの通信などを記載。

このメニューのそれぞれのカテゴリは、メニューモジュールの編集機能で増やしたり、削除したり、非表示にしたりすることができます。
ここにないカテゴリを運用したい場合はカテゴリを追加し、運用しないカテゴリは削除したり、非表示にしたりします。
(4) 基本サイトのメニューの編集
ページ上部の[ページ設定]をクリックします。

11

第 3 章 プラグインの追加・削除

メニューに新しくページを追加する場合は、[＋ページ追加]をクリックします。
ルームにページを追加する場合は、ルームの[ページ設定]をクリックしてから、[＋ページ追加]を行います。
ルームに関しての説明は「学校 CMS 管理者用［運用編］マニュアル」の「ルーム管理」を参照してください。

ページを削除するには、ページの[編集]で編集画面を開き、[ページ編集]タブの下部にある[削除処理]から削除してください。
ページは削除すると元に戻すことはできません。十分ご注意ください。
（プラグイン単位のデータは残っていますが、レイアウトなどは削除されます。
）

12

第 3 章 プラグインの追加・削除(5) メニューからページを隠したい場合ページを削除するわけではなく、メニューから隠したい場合もあります。
そのような場合は、セッティングモードにして、メニューフレームの設定変更をクリックすると、メニューの設定画面が開きます。
メニューから隠したい（非表示にしたい）ページやルームのチェックを外し、[決定]をクリックすると、メニューから隠すことができます。

13

第 4 章 トップページの作成・編集 学校 CMS トップページの作成例(1) 学校 CMS トップページの作成例１
学校ＣＭＳのトップページは、そのサイトの顔です。見に来てくれる人が興味を持ってくれるように工夫したいものです。
ここでは、その一例として、下図のようなトップページの作成をもとに、その作成手順について説明します。

※ 事前に、ページ設定→レイアウト編集で３段カラムを選択してください。

14

第 4 章 トップページの作成・編集 学校 CMS トップページの作成例① 中央カラムにアイキャッチとなる画像を挿入します。
［プラグイン追加（センター）］から［お知らせ］プラグインを選択します。
② ［お知らせ］プラグインの[編集]から［画像の挿入］ボタンをクリックします。
［参照］をクリックして画像を指定します。

③ 画像の挿入完了。編集画面の下にある［決定］をクリックします。

15

第 4 章 トップページの作成・編集 学校 CMS トップページの作成例④ ブロック上部の［お知らせ］をここでは、［今週のベストショット］と入力します。
フレームの編集アイコンをクリック

フレームタイトルを入力して[決定]をクリック

今後、運用していく上では、「今週のベストショット」の画像として、一週間に一回入れ替えたりすることで、有効なアイキャッチとなります。

16

第 4 章 トップページの作成・編集 学校 CMS トップページの作成例(2) 学校 CMS トップページの作成例 2
基本サイトの学校名のところに下図のように画像を使った学校バナーを設置することも効果的です。

学校バナーは、トップページで一番目立つ部分、アイキャッチとなる重要なブロックです。キャッチ
コピーを入れたり、学校名を入れたりして、工夫しましょう。
※ 学校バナー用の画像は画像処理ソフト等を使い、作成してください。
※ 上記例は、青の学校名と写真の部分を横幅の異なる別の画像にして、一つのお知らせプラグインの中に挿入しています。そうすることで、以下のようにスマートフォンで参照した時に、学校名が小さくなることを防いでいます。

17

第 4 章 トップページの作成・編集 ［トピックス］作成・編集の手順(3) ［トピックス］作成・編集の手順
３段カラムにした場合の右カラムに設置した［トピックス］フレーム作成の手順を説明します。
トピックスフレームある位置は右カラムと呼ばれるページの右サイドになります。また、この右カラムは、３列組のすべてのページに表示されることができます。
どんな学校情報をトピックスに掲載するかが大切です。

右カラムのトピックスフレームは、［お知らせ］プラグインを使っています。
使い方は他の［お知らせ］プラグインで作成しているフレームと共通です。

※ 必要なければ、レイアウトから２段カラムのレイアウトを選択して、隠すこともできます。

トピックスフレーム例○［今日の給食］
毎日の給食メニューを伝えます。
［お知らせ］モジュールまたは［日誌］モジュールで作成します。
○［カレンダー］
ページに常にカレンダーを表示するようにします。
［カレンダー］モジュールで作成します。
○［期間限定の情報の告知］
文化祭の案内ポスター等の掲載。バナー的な活用。
［お知らせ］モジュールで作成。

18

第 5 章 メニューコンテンツの作成・編集 ［学校の概要］
・［本校の教育］作成・編集の手順(1) ［学校の概要］・［本校の教育］作成・編集の手順
メニューカテゴリの［学校の概要］、［本校の教育］の作成手順を説明します。
［学校の概要］、［本校の教育］ともに同じ作成方法のため、ここでは、［学校の概要］の作成を例に説明します。
［学校概要］フレーム右上の［編集］をクリックします。

［学校概要］として、学校の基本情報等を記載します。
この［学校概要］フレームは、［お知らせ］プラグインを使って作成しています。
使い方は、他の［お知らせ］プラグインを使ったフレームと共通です。

19

第 5 章 メニューコンテンツの作成・編集 ［行事予定］作成・編集の手順(2) ［行事予定］作成・編集の手順
学校の行事予定をお知らせするための、カレンダー形式のページ作成の手順を説明します。下図のようなページを作成します。

このページは[カレンダー]プラグインを使用して作られています。

20

第 5 章 メニューコンテンツの作成・編集 ［行事予定］作成・編集の手順① ログインしてから再度ページを表示します。

② 日付の右上の[＋]マークをクリックして、予定を登録します。

「件名」を登録します。
ここでは例として「終業式」と入力しました。
期間・時間の指定をチェックすると、From-Toでの日付指定や時間の指定ができます。

予定の詳細は WYSIWYG テキスト形式のため、文字の装飾や画像の表示、PDF ファイルの添付などが可能です。

入力したら、[決定]ボタンで保存します。

21

第 4 章 トップページの作成・編集 ［学校生活］作成・編集の手順(3) ［学校生活］作成・編集の手順
メニューカテゴリの［学校生活］ページの作成の手順について説明します。
下図のような学校での出来事を日誌風に紹介するページを作成します。
この［学校生活］フレームは、［ブログ］プラグインを使って作られています。

① ログインして［学校生活］ページを開くと、[＋追加]ボタンが表示されます。

22

第 4 章 トップページの作成・編集 ［学校生活］作成・編集の手順② 記事を入力します。
タイトル、本文、日付を入力します。



本文には写真の挿入ができます。本文は WYSIWYG エディタ形式になっているので、他の部分と共通です。

「続きを書く」をクリックすると、さらに詳細な内容を記載する欄が表示されます。



入力したら、[決定]で登録します。権限によっては承認待ちになります。

23

第 4 章 トップページの作成・編集 ［行事アルバム］作成・編集の手順(4) ［行事アルバム］作成・編集の手順
学校での出来事を画像で公開するための、「行事アルバム」ページの作成を、例に手順を説明します。
下図のようなページを作成します。公開したい複数の画像を準備してください。
行事アルバムは「フォトアルバム」プラグインで作成されています。このプラグインには文字等を挿入することはできませんが、多量の画像をスライドショーとして表示させることができます。

① アルバムの作成
ログインして、権限があれば[＋アルバム作成]ボタンが表示されます。

24

第 4 章 トップページの作成・編集 ［行事アルバム］作成・編集の手順② アルバムの登録
アルバム名、写真の選択を行って、アルバムを登録します。

写真の追加やアルバムの編集も可能です。

25

第 4 章 トップページの作成・編集 ［学校からのおたより］作成・編集の手順(5) ［学校からのおたより］作成・編集の手順※ 公開するための文書は事前にＰＤＦに変換しておいてください。

① ［メニュー］から、［学校からのおたより］をクリックすると、右に［学校からのおたより］が表示されます。

② ブロック右上の［編集］をクリックし、［学校からのおたより］の中の文章を消去し、下図を参考に、配布物の情報を入力します。

26

第 4 章 トップページの作成・編集 ［学校からのおたより］作成・編集の手順③ 次に、学校だより（PDF ファイル）にリンクをつけます。
クリップのアイコンをクリックし、［ファイル］ダイアログ画面を表示させます。

ファイルを指定して[OK]をクリックすると、ファイル名でリンクがつきます。
ファイル名は日本語で分かりやすく付けておくと、リンクが楽になります。

④ リンクの設定が終了したら、［決定］をクリックして完了です。

27

サポート会社

学校 CMS に関してのサポート業者は以下になります。
学校 CMS で不明点などがある場合は、問合せフォーム、メール、電話、FAX で質問することができます。
【サポート業者】
株式会社オープンソース・ワークショップ
住所：〒104-0031 東京都中央区京橋 2 丁目 8 番 4 号 オックスフォードビル 2F

電話番号：03-5534-8088
FA

X：03-5534-8188

Web：https://opensource-workshop.jp/【問合せフォーム】
http://www.higo.ed.jp/colas/ ＞ お問い合わせ【電話でのサポート】
平日の午前９時から午後５時を受付時間としております。
ただし、緊急の場合は時間外でも問題ございません。
【メール】
support@opensource-workshop.jp

28