学校 Web ページ作成（CMS）
CMS（MovableType）による学校 Web ページ作成操作手順書 Ver４
平成 27 年 4 月
沖縄県立総合教育センター ＩＴ教育班
－
目次
－
１．ＣＭＳとは
・・・・・ｐ１
２．Movable Type とは・・
（ブログとウェブページの違い）
・・・・ ｐ１
３．ログイン方法
・・・・・ｐ１～２
４．テンプレートの選択
・・・・・ｐ３～４
５．記事の作成・編集
・・・・・ｐ５～１３
５－１ 新規作成
５－２ 画像を含む記事の作成
５－３ 動画・ＰＤＦへのリンク
５－４ 表の作成
５－５ 編集
５－６ 削除
６．カテゴリの作成
・・・・・ｐ１４～１５
７．ウェブページ
７－１ ウェブページの作成
・・・・・ｐ１６～２０
７－２ ウェブページの活用
８．ウィジットの活用
８－１ ウィジェットの基本
・・・・・ｐ２１～２４
８－２ ウィジェットの編集
９．ヘッダー・フッターの変更
９－１ ヘッダー画像の変更
・・・・・ｐ２５～２８
９－２ ヘッダー文字フォントの変更
９－３ フッター変更
１０．その他
・一太郎ファイルが開かない場合
・公開後正しく表示されない場合
・・・・・ｐ２９～３１
１．ＣＭＳ（Content
Management
System）とは
CMS とは、ウェブサイトを構成するテキストや画像、レイアウトなどを一元的に管理し、編集・構
築する「コンテンツ管理システム」です。サーバにインストールされている CMS を使用して、あらか
じめ用意されているテンプレートを選択、簡単な設定を行うことでウェブサイトを構築することが可
能です。
CMS と一般的なホームページ作成ツール（ホームページビルダーなど）との大きな違いはサイトの
構築環境です。ホームページ作成ツールでは、PC 上でサイトページなどを編集した後、関連する画
像ファイルなどとともに、サーバにアップします。CMS は、構築に関連するほとんどの作業をインタ
ーネットを通じて、管理画面（ブラウザ）上から行うことができます。
２．Ｍｏｖａｂｌｅ
Ｔｙｐｅについて
Movable Type は、CMS の一つで、
「記事（ブログ）」「ウェブページ」「アイテム（ファイル）」
という 3 種類のコンテンツを管理することで、ウェブサイト全体の効率的な構築が可能です。
ブログとウェブページの違い
◆ 記事（ブログ） → 随時更新、タイムリーな情報提供（新着情報、お知らせなど）
・頻繁に更新する。
・新着順に記事がウェブサイトのトップページに表示される。
・カテゴリや投稿月などが同じコンテンツをアーカイブで分類・整理し公開できる。
◆ ウェブページ → 管理のしやすさ、定番情報の提供
・学校案内、学校アクセス、進路情報、生徒会活動など定番な情報を個別ページで管理ができる。
・フォルダで管理する。
３．管理画面へのログイン
（１）各学校のログインページＵＲＬにアクセスする。
ログイン画面に「ユーザ名」と「パスワード」を入力し、
ログインする。
1
ログインすると、下記の画面がでます。
上：学校名 → 編集画面
下：URL → 公開画面
（２）学校名をクリックすると、管理画面（編集画面）がひらきます。
【記事】のサブメニュー
編集終了後
サインアウト
サイドメニュー
記事など新規作成
編集した場合、保存（更新）などを行った上で、
再構築
サイトの表示
（サイトの再構築）をクリックする。
再構築が終わったら、閉じる。
再構築後、
（サイトの表示）で変更結果の確認を行います。
「再構築を行ったのに、サイトの表示が変わらない」場合は、キャッシュが表示されてい
る可能性があります。ファンクションキー【Ｆ５】を押して下さい。
2
４．テンプレート（テーマ）の選択
事前にテンプレート（テーマ）を３種類準備しています。各テーマで、ブログ全体のデザイ
ンを選択することができます。カラーはテーマごとに 3 色～5 色より選択できます。
詳細は、下記の URL を参照して下さい。
（スタイルシートをダウンロードします）
教育センター → ＩＴ教育班 → 沖縄県立学校ＣＭＳ（MovableType）支援ページ
http://it.edu-c.open.ed.jp/cmsmovabletypeweb.html
注 意
サイトを作り込む前に、テーマはよく検討して選択して下さい。
テーマを変更した際、アイテムやテキストなどのコンテンツは、バックアップされ
ますが、ウィジェットなどレイアウトが崩れる可能性が大きいです。
（１）サイドメニューの「デザイン」→「テーマ」をクリック
（２）利用可能なテーマから、希望のテンプレート（テーマ）の【適用】ボタンをクリック
（今回の研修は、県立沖縄高等学校 A2 のテーマ 1.0 を適用して説明します。他に、県立沖縄高
等学校 B のテーマ 1.0 と県立沖縄高等学校 C のテーマ 1.0 があります）
※ ここでは、再構築は行いません。
（３）各テンプレート(テーマ)の色を決めたら、そのスタイルシートを３つ追加します。
①common
②layout
③smartphone
（４）サイドメニューの「デザイン」－「テンプレー
ト」にて、インデックステンプレートの作成をク
リック
3
（５）テンプレート名（ここでは common）を入力後、ダ
ウンロードした同名ファイルのタグをコピー＆ペー
ストする。
※ テンプレート名は必ず（３）のとおり
（６）同画面下の出力ファイル名に「common.css」と入力、
【保存】
をクリック
（７）上部に次のメッセージが出たら、再構築をクリック
（８）同様に、
（３）②③のスタイルシートを追加、
（９）右上
注 意
（サイトの再構築）をする。
（サイトの表示）をクリックして、テーマの変更結果を確認
各テンプレートに対応したスタイルシートのため、別のテンプレートを【適用】
した時点で、上記で作成した common、layout、smartphone は削除されます。
別のテンプレートに変更した場合は（１）～（８）をやり直して下さい。
＜実行結果＞Ａタイプ２カラムのグレー
4
５．記事の作成・編集
５－１
記事の新規作成
（１）サイドメニューの「記事」→「新規」をクリック
記事の入力を終えたら、コメントのチェックをはずし、最後に【公開】をクリック、再構築
※ 記事の編集中、直前の操作に戻る場合は【Ｃｔｒｌ】＋【ｚ】のキー操作で戻ります。
① タイトルを入力
入力支援ツール
⑤最後にクリック
② 記事の内容を入力
③カテゴリごとに記事を分類することも可能(該
当するカテゴリに☑)
④ チェックをはずす
【追加】でカテゴリの新規作成も可能
◆ 入力支援ツール
文字色
HTML ソースの編集
※
表を挿入したときにアクティブ
アイテムの挿入
記事作成の全画面
になります。
基本的には、ワードの操作と同じですが、システムの裏では同時にＨＴＭＬの編集が行われてい
ます。操作方法に慣れる必要があります。
5
記事の切り取り・コピー・貼り付けは、右クリック操作で行えます。
Firefox では、下記のようにショートカットで行います。
◇【Ｃtrl】＋【Ｘ】→切り取り
◇【Ｃtrl】＋【Ｃ】→コピー ◇【Ｃtrl】＋【Ｖ】→貼り付け
◆ ＨＴＭＬでの編集
ＨＴＭＬまたはフォーマットを【なし】に変更します。
＜フォーマット：なしの場合＞
HTML コードの font-size の pt 数値で文字サイズの変更や color のカラーコードで文字色の変更
ができます。
◎カラーコードはこちらを参照 → 原色大辞典 http://www.colordic.org/
◆ 公開項目
下書き保存（非公開）や日時指定の公開が指定ができる
保存せずに実際に公開される状態を確認できる
6
◆ 1 つの記事が長い場合
「続きを読む：～」を使います。トップページにタイトルとリード文のみを表示させ、記事の本体
を「続き」にすることができます。
（１）
【本文】タブの画面にリード文を入力します。
（２）
【続き】タブに記事の本体を入力します。
（３）
【公開】タブをクリック→再構築後、サイト確認を行うと、次のようになります。
クリックすると、個別の記事
画面が表示されます。
7
５－２
画像ファイルを含む記事の作成
（１）ブログ記事の作成画面で、画像の挿入ボタンをクリック
画像の挿入
（２）画像をアップロード
※
アップロードするファイル名は半角英数字に
して下さい。
（３）
【ファイルを選択】をクリックし、画像を選択
8
（４）格納するフォルダを選択し、
【アップロード】ボタンをクリック
ここでは、新規に「items」と入力し、フォルダを作成。作成済みのフォルダを指定する場合は、
隣の【フォルダの選択】をクリック。
（５）ファイルオプション画面では、画像の処理方法を指定し、
【完了】ボタンをクリック
（６）コメントの☑を外して、
【公開】ボタンをクリック
9
（７）再構築後、サイト画面で確認
５－３
ＰＤＦ・動画ファイルへのリンク
（１）リンク先のファイルをアップロードします。
※
アップロードするファイル名は半角英数字にして下さい。
（２）サイドメニューの「アイテム」→「新規」をクリック
アイテムのアップロード画面で【ファイルを選択】ボタンをクリックし、ファイルを選択
（３）アップロード先を選択、
【アップロード】ボタンをクリック
完了すると、画面上に緑色で囲まれた「アイテム～がアップロードされました」メッセージが
でます。
10
（４）アップロード先の URL をコピーします。
サイドメニューの「アイテム」→「一覧」をクリック、アイテムの管理画面でファイル名をクリ
ック
（５）アイテムの埋め込みにあるＵＲＬをコピー
（６）次にリンク元である記事を作成します。
関連つけるテキストを選択後、リンクボタンをクリック
②リンク
①関連つけるテキス
トを選択
11
（７）リンクのＵＲＬに上記（５）でコピーした URL を貼り付け、【更新】ボタンをクリック
① URL を貼り付け
②新しいウィンドウで開く
③更新
５－４
表の作成
表作成については、下記の方法と Excel 等で表を作成し、画像として貼り付ける方
注意
法があります。
しかし、どちらの方法もブログ記事の幅の関係上､サイトの表示が厳しいこともある
ため（特にスマートフォン）、表データを pdf ファイルとしてアップし、記事からリ
ンクさせる方法をお薦めします。
（１）プログ記事の作成画面で、表作成ボタンをクリック、
表の列数や行数などを指定して、【挿入】ボタンを
クリック
（２）表が作成されるので、文字等を入力し、完成後【公開】ボタンをクリック。
12
５－５
記事の編集
（１）サイドメニューの「ブログ記事」→「一覧」をクリック
① 編集する記事のタイトルをクリック
（２）本文などに修正を加えた後、
【更新】ボタンをクリック
５－６
記事の削除
（１）サイドメニューの「ブログ記事」→「一覧」をクリック
削除するブログの先頭のチェックボックスをクリックし、【削除】ボタンをクリック
確認のメッセージが表示されたら【ＯＫ】ボタンをクリック
13
６．カテゴリの作成
ブログ記事をカテゴリ別に分類することで、特定の記事の閲覧が容易になります。
カテゴリの作成には、新規のブログ記事の作成時に同時に作成する方法（ｐ４参照）とあらかじ
めカテゴリを作成する方法があります。 こちらでは、あらかじめカテゴリを作成する方法を取り上
げます。
（１）サイドメニューの「カテゴリ」→「一覧」をクリック
（２）ルートの横画面にカテゴリ名を入力し、【追加】ボタン→【変更を保存】をクリック
14
（３）サブカテゴリの作成は、該当するカテゴリを選択し、サブカテゴリ名を入力、【追加ボタン】
→【変更を保存】ボタンをクリック
再構築後、サイト画面で確認をします。
◆ カテゴリの並ベ替え
上下で並び順、左右でメインかサブへの変更ができる
15
７.ウェブページ
７－１ ウェブページの作成
（１）サイドメニューの「ウェブページ」→「新規作成」をクリックし、ウェブページを作成します。
作成後【公開】ボタンをクリック。作成方法は記事作成と同様です。
（２）処理後、画面上に「ウェブページを保存しました」というメッセージがでます。
（３）再構築後、サイトで確認します。
16
７－２
ウェブページの活用
デフォルトでは、ウェブページを作成すると、Web ページ上部にボタンが自動配置さ
れ、それをクリックすることで、ウェブページが表示されます（ボタンの並びは表示名
の昇順になっています）。
以下の方法により、任意での並べ替えやボタン配置なしのウェブページとして活用す
ることができます。
◆
２カラムの場合（３カラムはｐ１９～）
１．サイドメニューの【デザイン】→【テンプレート】のテンプレートモジュールの「ヘッドナビ」
をコピーしてバックアップをとります。
③【テンプレートの複製】を選択
①
し、ＧＯをクリック
② ヘッドナビの✔をいれる
17
２．
「ヘッドナビ」をクリックし、次のように内容を編集します。
※ タグの３行目・11 行目を削除、7 行目をウェブページ数（ボタン配置したい数）コピーして、
リンクする URL に書き換えます。
＜編集後＞
1 <nav>
2 <mt:IfArchiveTypeEnabled archive_type="Page">
3 <mt:PagesHeader>
4 <ul>
例
5 </mt:PagesHeader>
6 <li><a href="http://www.awase-sh.open.ed.jp/post-6.html">学校評価</a></li>
7 <li><a href="http://www.awase-sh.open.ed.jp/post-4.html">アクセス</a></li>
8 <li><a href="http://www.awase-sh.open.ed.jp/post-3.html">問い合わせ</a></li>
9 <mt:PagesFooter>
並
べ
た
い
順
10 </ul>
11 </mt:PagesFooter>
・href=”リンクさせるウェブページの URL”
12 </mt:IfArchiveTypeEnabled>
・</a>の前に、そのウェブページの表示名を入力
13 </nav>
※ リンクさせるウェブページの URL は、【ウェブページ】のパーマリンクをコピー＆ペーストしま
す。
リンクさせるウェブページの URL をコピー
３．ヘッドナビ編集後は、更新と再構築を行います。
○ 編集前（自動作成）
○ 編集後
４．テンプレートモジュールでタグを書かなければ、ウェブページはボタン化されないので、1 枚の
ページとして他のウェブページからのリンクなどに活用できます。
18
◆
３カラムの場合
１．サイドメニューの【デザイン】→【テンプレート】のテンプレートモジュールにある「ウェブペ
ージ」をコピーして、バックアップを取って下さい。
③【テンプレートの複製】を選択
し、ＧＯをクリック
②ウェブページの✔をいれる
２．
「ウェブページ」を下記のように編集します。任意にウェブページのボタンを並べ替えることが
できます。
※ 元タグの 3～11 行目を削除、12 行目をウェブページ数（ボタン配置したい数）コピーして
リンクする URL に書き換えます。元タグの 13～19 行目も削除。
＜編集例＞
1
<mt:IfArchiveTypeEnabled archive_type="Page">
2
<ul>
3
<li><a href="http://www.awass.open.ed.jp/post-6.html" terget="_blank">学校評価</a></li>
4
<li><a href="http://www.awash.open.ed.jp/post-4.html" terget="_blank">アクセス</a></li>
5
<li><a href="http://www.awa.open.ed.jp/post-3.html" terget="_blank">問い合わせ</a></li>
6
</ul>
7
</mt:IfArchiveTypeEnabled archive_type="Page">
・href=”リンクさせるウェブページの URL”
・</a>の前に、そのウェブページの表示名を入力
19
※ リンクさせるウェブページ URL は、
【ウェブページ】のパーマリンクをコピー＆ペーストします。
リンクさせるウェブページの URL をコピー
３．ヘッドナビ編集後は、更新と再構築を行います。
○ 編集前（自動作成）
○ 編集後
４．テンプレートモジュールでタグを書かなければ、ウェブページはボタン化されないので、1 枚の
ページとして他のウェブページからのリンクなどに活用できます。
20
８．ウィジェットの活用
「ウィジェット」とは、ブログ画面上で(主にサイドバー)で特定の機能を提供する小規模なコンテン
ツをいいます。
以下、ウィジットの編集について説明します。
８－１
ウィジェットの基本
上記画面の構成を確認します
（１）
「デザイン」→「ウィジット」をクリック
現在、ブログに適用されているスタイルのレイアウトは２カラムなので、ここでは、
【２カラムのサイドバー】をクリック
21
（２） 必要なウィジェットを「利用可能」から「インストール済み」ボックスにドラッグ＆ドロップ
します。
（不要の場合は逆に操作します）
デフォルトで、現在のテンプレートは、
「検索」
「カレンダ」
「カテゴリ」
「最近のブログ記事」が
活用できるようになっています。変更した場合は、
【変更を保存】ボタンをクリックします。
ドラッグ＆ドロップ
８－２
ウィジェットの編集（ウェブサイトのリンク）
（１） 他のウェブページへリンクするウィジェットを作成します。
HTML の知識が必要ですが、既に活用されているフリーコードをコピーして書き換えると効率的
です。
（２） ここでは、最近のブログ記事をコピーして書
き換えます。
「最近のブログ記事」横の☑を入れて、テンプレ
ートの複製を選択、
【GO】をクリック
22
（３）
「最近のブログ記事のコピー」ファイルが確認できたら、クリックします。
（４）タイトル名とコードを書き換えて、【変更を保存】
【再構築】
リンク先アドレスと表示名を入力
＜書き換え前＞ 1 行目～3 行目､7 行目、9 行目、11～12 行目は削除、8 行目をコピーして追加
<mt:If tag="BlogEntryCount">
<mt:Entries lastn="10">
<mt:EntriesHeader>
<section class="widget-recent-entries widget-archives widget">
<h1 class="widget-header">最近のブログ記事</h1>
<ul>
</mt:EntriesHeader>
<li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
<mt:EntriesFooter>
</ul>
</section>
</mt:EntriesFooter>
</mt:Entries>
</mt:If>
＜書き換え後＞
<section class="widget-recent-entries widget-archives widget">
<h1 class="widget-header">ウェブページのリンク</h1>
<ul>
<li><a href="http://www.open.ed.jp">ＩＴ教育センター</a></li>
<li><a href="http://www.edu-c.open.ed.jp">県立総合教育センター</a></li>
<li><a href="http://mt-test.open.ed.jp/test7/google.html">グーグルカレンダ</a></li>
</ul>
</section>
23
（５）最後に ８－１
ウィジェットの基本
を参照に、作成したウィジェットをドラッグ＆ドロッ
プし、
【変更を保存】する。
（６） 再構築後、サイトで確認
24
９．ヘッダー・フッターの変更
９－１
ヘッダー画像の変更
（１） ヘッダーの画像を変更する場合、
「アイテム」→「新規」画面でその画像をアップロードしま
す。
【ファイルを選択】をクリックし、画像を選択します。
（２）これまでと同様アップロード先を選択し、
【アップロードボタン】をクリックします。
（３）
「アイテム」→「一覧」をクリック、画像ファイル名を選択
25
（４）アイテムの埋め込みで、URL をコピー
（５） 「デザイン」→「テンプレート」をクリック
ブログテンプレートの管理画面にあるインデックステンプレート中の【layout】テンプレ
ートをクリック
（６）ソースコードの 117 行目（３カラムの場合は 61 行目）の URL を書き換える。
注意
書き換える前に、ソースコードはコピーしてテキストエディタなどに貼り付けて、
適当な名前で保存しておくと安心です。
117 行目
26
＜書き換え前＞
background: url("http://mt-edu.open.ed.jp/yoseyamaA2/files/top.jpg") center
～
ｐｐ26（４）でコピーしたＵＲＬを貼り付け
＜書き換え後＞
background: url("http://lecture.open.
ed.jp/items/tulip.jpg") center
（７）書き換え後、
【変更を保存】をクリック、再構築を行う
～
（７）書き換え後、画面下の【保存と再構築】をクリック
（８）同様に、smartphone テンプレートの 251 行目（３カラムの場合は 191 行目）を書き換える。
【保存と再構築】をクリック、サイトを確認します。
９－２
ヘッダー文字フォント変更
ｐ２６（５）と同様、
【ｌａｙｏｕｔ】のテンプレートのコードを変更します。
２カラムは１２５行目で文字サイズ、１３３～１３６行目で文字の色が変更できます。
（3 カラムは２８行目で文字サイズ、３８～４１行目で文字の色を変更）
文字の大きさ
Color：の後ろのカラーコードを変更する。
◎カラーコードはこちらを参照 → 原色大辞典 http://www.colordic.org/
133 行目 link → 元々の色
134 行目 visited → 〃（133 行目と同色指定）
135 行目 hover → マウスを重ねた時の色
136 行目 active → クリックしたとき時の色
27
９－３
フッターの変更
（１）
「デザイン」→「テンプレートをクリック、ブログテンプレートの管理画面にあるテンプレ
ートモジュール中の【バナーフッター】ファイルをクリック
（２）コードの一部分（
の部分）を書き換えて、
【変更を保存】をクリック、再構築後、サ
イトの変更を確認(デフォルトは学校名)
<footer>
<address>Copyright(C) <a href="<$mt:BlogURL$>"><$mt:BlogName encode_html="1"$></a>
All Rights Reserved.</address>
</footer>
28
一太郎ファイルが開かない場合
一太郎はブラウザを選びます。
○ Firefox は表示、保存ともＯＫ
○ Chrome は文字化けが発生
○ InternetExplorer では下記の１または２どちらかで対応お願いします。
１
ダウンロードしたい資料の上で右クリックし、【対象をファイルに保存】をクリックし、保存。
２
IE の上部にあるメニューの「ツール」→「アドオンの管理」→表示の下にある【すべてのアド
オン】→右側にある JUSTSYSTEM～の【JSCNTBR BrowserHelper】をクリックし、
【有効】にする。
再度ＩＥを起動、資料を選択後、
表示後、保存してください。
29
公開後正しく表示されない場合
※ CMS（MovableType）を公開した際、キャッシュやテキストでの表示があります。
（IE はバージョン 10 以降に対応、互換表示設定も併せて行って下さい）
【Internet Explorer】
(1) Internet Explorer を起動し、右上のアイコンをクリックし、「互換表示設定」をクリック
(2) 追加する Web サイト「open.ed.jp」を確認し、
「追加」をクリックし、
「削除」する。
✔を外し、閉じる。
✔を 2 カ所外す
※ 進路相談システムの互換表示設定は、運用支援ページをご参照下さい。
(2) 閲覧履歴を削除します（旧 Web ページのキャッシュが残っている可能性があるため）
30
【Firefox】
１
３
.．
２
４
５
【Google Chrome】
１
３
.．
４．閲覧履歴に✔をいれる
２
２
５
31
© Copyright 2026 Paperzz
