「学校 Web ページ」作成
CMS（Movable Type ver.7）
操作手順書

２０２４年 1 月
沖縄県立総合教育センター IT 教育班
1

目次

CMS（Movable Type）概要説明

・・・３

１．管理画面へのサインイン、サインアウト方法

・・・４

２．テーマの選択と適用

・・・５

３．サイトロゴの作成

・・・７

４．スマホ用メニューボタンの表示

・・・10

５．スライドショーの設定

・・・12

６．トップページの編集（メイン部分の整理）

・・・16

７．サイドバーの編集

・・・19

８．フッターの編集

・・・25

９．記事の作成 ①文字の入力とカテゴリ

・・・27②表と画像の挿入

・・・31

10．ウェブページの作成と更新

・・・33

11．ナビゲーションの設定

・・・37

2

CMS とは
CMS とは、Contents Management System（コンテンツ・マネジメント・システム）の略で、Web サイトを構成するテキストや画像、レイアウト情報などを専用のサーバで一元的に管理し、Web サイトの構築や編集を行うコンテンツ管理システム。
CMS を利用することで、専用のホームページ作成ソフトを使用せず、インターネットを通じてブラウザ上でWeb サイトの編集を行うことができる。

Movable Type について
沖縄県立総合教育センターが採用している CMS の名称で、国内でも多くのサイトで導入されている。「記事」「ウェブページ」「アセッツ」といった３種類のコンテンツを管理し、サイト全体の構築・編集を効率的に行うことができる。

○記事（トピックス）
新着順に Web サイトのトップページに表示される。タイムリーな情報を提供し、比較的頻繁に更新する場
所。カテゴリや投稿月などで整理し、管理することができる。

投稿すると TOP ページに表示される。

○ウェブページ
学校案内、学校アクセス、進路情報、生徒会活動など、どの学校においても定番とされる情報を個別のページでまとめて管理する際に利用する。

ナビゲーションのボタン等とリンクさせて定番の表示する。

○アセット
記事やウェブページで表示する画像や PDF ファイル、ダウンロードして利用する Word や Excel のファイ
ル等を「アセット」でまとめて管理する。

3

１．管理画面へのサインイン、サインアウト方法①各学校の Web ページを開く。
②各学校の URL の後ろに「/mt-admin」と入力し、Enter キーを押す。

③サインイン画面で、各学校に配布されている「ユーザ名」「パスワード」を入力してサインインする。

④サインインすると図のような画面となる。自分が所属する学校名をクリックすると編集画面に入る。

4

⑤編集画面の構成は図のとおり。

ここが学校名になっているか確認！

Web ページを編集するための各メニューボタン

⑥サインアウトをする場合は、画面左下のユーザ名をクリックし、サインアウトを選択。

5

２．テーマの選択と適用
テーマ（Web ページのレイアウト）は２種類用意している。２カラムのサイドバーが左、メインが右のタイプと、２カラムのメインが左、サイドバーが右のタイプです。それぞれ色を青、緑、オレンジ、黄の４色から選択できる。

＜注意！＞
学校 Web ページを作り込んでいく前に、どのテーマにするか十分に検討して、適用すること。一旦テーマを適用した後、別のテーマに変更すると、レイアウトが初期化されてしまう。
編集画面の左上の「サイトの表示」をクリックすると、実際の Web ページが開く。

テーマ選択前の初期画面

テーマの適用方法は以下のとおり。
①サイドメニューのデザイン→テーマをクリック。

②テーマ一覧の中の利用可能なテーマから、利用を希望するテーマの適用ボタンをクリック。利用可能なテーマは以下の８つのテーマ。
・ITCTemplate_Blue_右 1.0

・ITCTemplate_Blue_左 1.0

・ITCTemplate_Green_右 1.0

・ITCTemplate_Green_左 1.06

・ITCTemplate_Orange_右 1.0
・ITCTemplate_Yellow_右 1.0

・ITCTemplate_Orange_左 1.0
・ITCTemplate_Yellow_左 1.0

この例では、「ITCTemplate_Blue_右 1.0」を適用する例を説明する。
③画面上部に「テーマ“ITCTemplate_Blue_右”を適用しました（１つの警告）。設定を有効にするために再構築をしてください。」のメッセージが表示される。画面左上の「再構築」をクリック。
※「（１つの警告）」は特に問題ないので無視してよい。
④「再構築」が終わったら「閉じる」をクリック。

⑤サイトの表示をクリック。選択したテーマが適用されているか確認する。

※再構築を行っても、サイトのレイアウトが変わらない場合は、「ページの更新」（F5 キーや Ctrl＋F5 キー）や「ブラウザの履歴削除」を行う。

7

３．サイトロゴの作成
初期状態では、学校 Web ページの左上に学校名が文字で表示されている。サイトロゴの画像を作成し、この部分に表示させる。サイトロゴは画像処理ソフト等で作成できるが、ここでは Power Point を使って作成する方法を説明する。
①Power Point を起動する。
②「挿入」→「図形」→「正方形/長方形」をクリック。

③描画ツールの下の「書式」をクリック。

④サイズを高さ「2.4cm」、幅「16ｃｍ」程度にする。（高さ、幅はだいたいの目安です）⑤スライドに配置した四角形の上にテキストボックスや画像を重ねて、学校のロゴをデザインする。図形の色も変更する。背景を白くする場合は、図形の塗りつぶしを「白」または「塗りつぶしなし」にする。

8

⑤スライドに配置した図形、文字、イラスト等を全てマウスで選択する。右クリック→図として保存をクリック。
ファイル名を「siteLOGO」等として、デスクトップ等の分かりやすい場所に保存する。

「図として保存」をクリック。

⑥学校 Web ページの編集画面を開き、「アセット」→「アップロード」をクリック。

⑦PowerPoint で作成したサイトロゴをドラッグ＆ドロップでアセットにアップロードする。

9

⑧「アセット」の「一覧」をクリック。アップロードした画像ファイルをクリックで開く。

⑨タグの欄に半角英数で「@LOGO」と入力し、画面下の「変更を保存」→画面左上の「再構築」をクリック。

⑩実際の Web ページを開くと、画面左上にサイトロゴが表示されたのが確認できる。

10

４．スマホ用メニューボタンの表示
学校 Web ページをスマートフォンで表示したときの「メニュー」ボタンと「閉じる」ボタンを表示させる。
①「メニュー」ボタン、「閉じる」ボタンで利用する画像ファイルを用意する。画像ファイルは Teams の「新学校Web ページ移行支援」チームの「ファイル」タブにあるので、そこからダウンロードする。

②学校 Web ページの編集画面→「アセット」→「アップロード」をクリック。アップロード先に「assets/img」と入力する。

③２つのファイルをドラッグ＆ドロップでアセットにアップロードする。

11

④実際の Web ページで確認する。画面の幅を狭くすると、スマートフォン用の「メニュー」ボタンと「閉じる」ボタンが表示されることがわかる。

12

5．スライドショーの設定
学校 Web ページ TOP の上部にあるスライドショーの設定方法を説明する。
スライドショーで使用する画像を用意する。スライドショーには「横 1920px」、「縦４００px」の横長の画像を利用する。スライドショーで使用したい画像をグラフィックソフト等を使って横長の画像に加工する。

（１）Adobe Express を利用した画像の加工方法①Adobe Express は Open アカウントで利用できる無料のオンラインデザインツール。ブラウザを起動し、検索エンジンで「Adobe Express」を検索する。検索結果の中の「無料のオンライン写真/デザインツール| Adobe Express」をクリック。

②右上の「ログイン」をクリック。

③「Google でログイン」をクリック。

13

④Open アカウントを入力。「Google Workspace アカウント」をクリック。

○○○○⑤Microsoft３６５サインイン画面が開くので、Open アカウント、パスワードを入力し、サインイン。

○○○○

○○○○

⑥「自分の写真から開始」をクリック。

⑦スライドショーに利用したい画像を選択して、開く。

14

⑧「新規作成」→「サイズを指定」をクリック。

⑨幅「１９２０」、高さ「４００」と入力し、「新規ファイルを作成」をクリック。

⑩画像の四隅、縦、横にあるハンドルをドラッグして、画像のサイズを白いエリアに合わせる。

⑪「ダウンロード」をクリック。ファイルの形式を選んでダウンロードする。加工された画像が自分の PC にダウンロードされる。同じ手順で、スライドショーで利用する複数枚の画像を用意する。

15

（２）学校 Web ページ側でのスライドショーの設定①「編集画面」→「アセット」→「アップロード」をクリック。

②加工した画像をまとめてドラッグ＆ドロップでアップロードする。

③「アセット」→「一覧」をクリック。アップロードしたスライドショー用の画像を開き、「タグ」に英数半角」で「@SITE_SLIDE_IMAGE」と入力して、画面下の「変更を保存」→画面左上の「再構築」をクリック。

④他の画像のタグにも同じように「@SITE_SLIDE_IMAGE」と入力し、画面下の「変更を保存」→画面左上の「再構築」をクリック。アセットの一覧に並んだ順番に画像が表示される。

16

６．トップページの編集（メイン部分の整理）
学校 Web ページのメイン部分で使用しないものを非表示にし、トピックス（記事）の部分だけが表示されるようにする。
①「編集画面」→「デザイン」→「テンプレート」を開き、インデックステンプレート内の「メインページ」をクリック。

②２２行目「<$mt:Include module="お知らせ"$>」、２４行目「<$mt:Include widget="Google
カレンダー"$>」のそれぞれの行を挟むように、図のように「<!--」「-->」を上下の行に入力する。

22 行目、26 行目に「<!--」 、24 行目、28 行目に「-->」を入力。
表示したくない行を象の行を「<!--」「-->」で挟むことで「コメント化」され、実際のページでも非表示となる。

17

③画面下の「保存と再構築」をクリック。

④実際のページの表示を確認する。メイン部分が全て消えていることがわかる。

メイン部分の表示が全て消える。

⑤表示確認のため、編集画面から「記事」→「新規」でテスト記事を作成する。

⑥画面右の「公開」をクリックすると、実際のページにも表示される。

18

⑦トピックスの下に表示されている「アーカイブへ」を非表示にする。（「アーカイブ」は後でサイドバーに追加可能） 「デザイン」→「テンプレート」→インデックステンプレート内の「メインページ」をクリック。さらに、画面右のインクルードテンプレート内の「トピックス」をクリック。

⑧２３行目～２５行目を図のように「<!--」「-->」で挟む。

⑨画面下の「変更を保存」をクリック。再構築を行う。実際の画面を開くと、「アーカイブへ」が非表示となる。

②

①

19

７．サイドバーの編集（１）「最近の記事」の表示
サイドバーの初期設定は左図のようになっている。最初に①（次ページ）以下の手順で右図のように整理する。

①編集画面から「デザイン」→「テンプレート」→ウィジェットセットの「２カラムのサイドバー」をクリック。

②ウィジェットセットの編集画面で、「インストール済み」の中の「案内リスト」を左側の「利用可能」にドラッグ＆ドロップで移動させる。（「インストール済み」は「その他」だけにする）③画面下の「変更を保存」→画面左上の「再構築」をクリック。実際のページを開くとサイドバーが「その他」のみの表示となっている。

20

④「ウィジェットセットの編集」に戻り、「利用可能」の中にある「最近の記事」の右端の編集ボタンをクリック。

⑤画面右下の「アクション」をクリック。「テンプレートの複製」を選び、「GO」ボタンをクリック。

⑥「ウィジェットセットの編集」に戻ると「利用可能」の中に「最近の記事のコピー」が作成されている。「最近の記事のコピー」は、「最近の記事」に不具合が生じた場合のバックアップ用として置いておく。

⑦「ウィジェットセットの編集」の「利用可能」の中の「最近の記事」を「インストール済み」にドラッグ＆ドロップで移動させ、画面下の「変更を保存」→画面左上の「再構築」をクリック。

21

⑧実際の Web ページを開くと図のように小さく表示されるので、次ページの⑨以下の手順で表示の修正を行う。

⑨「ウィジェットセットの編集」に戻る。「インストール済み」の中の「最近の記事」の編集ボタンをクリック。

⑩「最近の記事」の「テンプレートの内容」を図のように変更し、画面下の「変更を保存」をクリック。
※「最近の記事」書き換え用のファイルは Teams の「新学校 Web ページ移行支援」チームの「ファイル」の中の「３．サイドバーの編集②「最近の記事」の編集」フォルダにあるので、そのファイルの内容をコピー＆ペーストしてもよい。

追加で入力
追加で入力
入力内容変更追加で入力「list-link-01」を追加で入力

追加で入力

22

⑪画面左上の「再構築」をクリック。実際の Web ページを開くと、図のようの「最近の記事」の表示が修正されている。

（２）「その他」の編集サイドバーの「その他」を「リンク」に変更し、それぞれのボタンにリンク先を設定する。
①編集画面から「デザイン」→「テンプレート」→ウィジェットセットの「２カラムのサイドバー」をクリック。
②「インストール済み」の中の「その他」の編集ボタンをクリック。

③テンプレート名と<h2></h2>で囲まれている箇所の文字「その他」を、図のように「リンク」に変更し、画面下の「変更を保存」→画面左上の「再構築」をクリック。実際の Web ページの文字も変更される。

④７行目～１０行目の各行の<li></li>で囲まれた文字を変更することで、リンクのボタンの文字の変更ができる。

23

⑤７行目～１０行目の各行の<a href=””>の「””」の部分にリンク先の URL を入れて、リンクのボタンをクリックした後に開くサイトや Web ページを設定する。「変更を保存」→「再構築」をクリック。

⑥リンクのボタンを増やしたい場合は以下の手順で行う。
・キーボードの入力を「半角英数」にする。
・リンクのボタンを設定している行（<li>から始まっている行）をコピーする。

・リンクのボタンを設定している最後の行（⑤の図では 10 行目）の後ろにカーソルを置いて、Enter キーを押す。これで、1 行スペースができる。

1 行空ける。

・スペースを空けた行にコピーした<li>の行をペーストする。

コピーした行をペースト。

24

・ボタンの文字、リンク先の URL を変更する。「変更を保存」→「再構築」をクリック。

25

８．フッターの編集初期状態では、左図のように Web ページ下部に県立総合教育センター各班の連絡先等の不要な部分が表示されている。①以下の手順で右図のように整理する。

①編集画面から「デザイン」→「テンプレート」→インデックステンプレートの中の「メインページ」をクリック。

②画面右のインクルードテンプレートの中の「バナーフッター」をクリック。

③図のように<$my:Indlude widget=”総合案内フッター”を「<!--」「-->」で挟み、画面下の「変更と保存」をクリック。

26

④画面右のインクルードテンプレートの中の「Powered By」をクリック。
図のように５行目の<ul class="m-list">から８行目の</ul>までを「<!--」「-->」で挟んでコメント化（非表示）にする。画面下の「変更を保存」→画面左上の「再構築」をクリック。

⑤実際の Web ページを開くと、図のようにフッターの不要な部分が非表示となっている。

27

９．記事の作成 ①文字の入力とカテゴリ（１）文字の入力と記事の公開
新しい記事を作成し、文字を入力を入力する。
①「編集画面」→「記事」→「新規」をクリック。

②タイトル、本文を入力する。

③画面右の公開をクリックすると、実際のページで記事が公開される。

デフォルトでは記事本文へのリンクの形式で表示される。

28

④「記事」→「一覧」を開くと、公開されている記事の一覧を見ることができる。

⑤フォントのサイズはメニューボタンの「段落」から変更することができる。

⑥「見だし２」については、フォントサイズが大きくなるだけでなく、装飾もできる設定となっている。

⑦メニューボタンは他にも太字にしたり、アンダーラインを引いたり、フォントカラーの変更等ができる。

29

⑧編集画面右のステータスで、「公開」「未公開」の設定ができる。

⑨「公開日」で事前に作成した記事の公開の日時指定ができる。

（２）「カテゴリ」について①「デザイン」→「テンプレート」→「２カラムのサイドバー」を開き、ウィジェットセットの編集画面から、「利用可能」にある「カテゴリアーカイブ」を「インストール済み」に追加しておくと、記事のカテゴリ分けができる。（ウィジェットセットの編集方法については、「７．サイドバーの編集」を参照）②「編集画面」→「記事」→「カテゴリ」をクリック。「カテゴリの管理」が開くので、必要なカテゴリの追加や、不要なカテゴリの削除を行う。

30

③サイドバーにカテゴリを追加し、記事を新規で作成した後、画面右下のカテゴリから、記事のカテゴリ分けを行い、「公開」または「更新」を押すと、実際のページで記事のカテゴリごとの表示ができるようになる。

31

９．記事の作成 ②表と画像の挿入（１）表の挿入①記事の編集画面のメニューボタンから表が挿入できる。

②表の挿入から、「セル」「行」「列」に対して着色、削除、挿入等の操作ができる。

（２）画像の挿入①記事の編集画面のメニューボタンから画像が挿入できる。

②をクリックすると、画像の挿入画面が開く。記事に挿入したい画像をドラッグ＆ドロップする。

32

③「挿入」をクリックする。

④挿入オプションから様々な設定を行うことができる。「完了」をクリック。記事の編集画面で「公開」または「更新」をクリックすると、記事に画像が挿入される。

＜注意！＞
記事の編集画面のメニューに「左揃え」「中央揃え」「右揃え」のボタンがあるが、表、画像を「左揃え」「右揃え」にすると記事のエリアからはみ出る。位置の指定を行わないか、「中央揃え」を指定した場合は、記事のエリアからはみ出さない。

画像を右揃えにした場合。記事のエリアからはみ出ている。

33

10．ウェブページの作成と更新（１）ウェブページの作成①ウェブページを新しく作成する場合は、「編集画面」→「ウェブページ」の「新規」をクリック。

②タイトル、本文を入力して、「公開」をクリックすると、新しいウェブページが作成される。「ウェブページ」→「一覧」をクリックすると、作成したウェブページの一覧が表示される。

③ウェブページの作成画面の上部のメニューボタンから、記事の作成画面と同じく、太字、アンダーライン、フォントカラーの設定、表や画像の挿入等ができる。

34

単にウェブページを作成しただけでは、どこにもリンクされていないため、すぐに表示することはできない。ヘッダーナビのボタンやサイドバーのボタンにリンクを設定して利用する。

＜ヘッダーナビのボタンにリンクさせる方法＞①ヘッダーナビのボタンにリンクさせたいウェブページを一覧から開く。
②パーマリンクをカーソルでなぞり、コピーする。

③「デザイン」→「テンプレート」を開き、「テンプレートモジュール」の中の「ヘッダーナビ」をクリック。

④リンクさせたいボタンの<a href=”〇〇〇”>の部分に、コピーしたウェブページのパーマリンクを貼り付
け、画面下の「変更を保存」→画面左上の「再構築」をクリック。

35

⑤実際のページのヘッダーナビのボタンをクリックすると、作成したウェブページを表示することができるようになる。

＜サイドバーのボタンにリンクさせる方法＞①ヘッダーナビのボタンにリンクさせたいウェブページを一覧から開く。
②パーマリンクをカーソルでなぞり、コピーする。
③「デザイン」→「テンプレート」を開き、「２カラムのサイドバー」をクリック。

④「インストール済み」の中のから、新しく作成したウェブページのリンクを設定したいウィジェットの編集ボタンをクリックし、編集画面を開く。ここでは「その他」にリンクを設定する。

⑤リンクさせたいボタンの<a href=”〇〇〇”>の部分に、コピーしたウェブページのパーマリンクを貼り付
け、画面下の「変更を保存」→画面左上の「再構築」をクリック。

36

（２）ウェブページの更新既存のウェブページの更新方法を説明する。
①「編集画面」→「ウェブページ」→「一覧」をクリック。公開されているウェブページ一覧が表示される。

②編集したいウェブページを一覧から探し、クリックで開く。ウェブページの内容を変更し、「更新」をクリックする。

37

1１．ナビゲーションの設定
ページトップのナビゲーションとドロップダウンメニューのボタンの設定方法を説明する。

この部分（１）ナビゲーションのボタンとドロップダウンメニューの文字の変更①「編集画面」→「デザイン」→「テンプレート」をクリック。

②「テンプレートモジュール」の中の「ヘッダーナビ」をクリック。

38

③赤線の箇所がナビゲーションやドロップダウンメニューのボタンに表示される文字。ボタンの文字を変える
場合は、赤線の箇所の文字を変更する。

（２）ボタンにリンクを設定する方法（ウェブページへのリンクの例）①ヘッダーナビのボタンにリンクさせたいウェブページを一覧から開く。
②パーマリンクをカーソルでなぞり、コピーする。

③「デザイン」→「テンプレート」をクリック。「テンプレートモジュール」の中の「ヘッダーナビ」をクリック。
④赤線の箇所がナビゲーションやドロップダウンメニューのボタンをクリックした後に表示されるページのリンク。赤線の箇所にコピーしたウェブページのリンクを貼り付ける。

39

（３）ボタンにリンクを設定する方法（PDF ファイルへのリンクの例）①「アセット」→「アップロード」をクリック。ナビゲーションボタンにリンクさせたい PDF ファイルをアップロードする。

②リンクさせたい PDF ファイルをクリックで開き、「アセットの埋め込み」のをクリック。このボタンをクリックすることで、PDF ファイルのリンクがコピーされる。

③赤線の箇所がナビゲーションやドロップダウンメニューのボタンをクリックした後に表示されるページのリンク。赤線の箇所にコピーした PDF ファイルのリンクを貼り付ける。

40