学校 Webページ作成（CMS）

CMS（MovableType）による学校 Web ページ作成操作手順書 Ver5

平成 29年 4月

沖縄県立総合教育センター ＩＴ教育班

－ 目次 －

１．ＣＭＳとは ・・・・・ｐ１

２．Movable Typeとは・・（ブログとウェブページの違い） ・・・・ ｐ１

３．ログイン方法 ・・・・・ｐ１～２

４．テンプレートの選択 ・・・・・ｐ３～４

５．記事の作成・編集 ・・・・・ｐ５～１３

５－１ 新規作成 ５－２ 画像を含む記事の作成 ５－３ 動画・ＰＤＦへのリンク

５－４ 表の作成 ５－５ 編集 ５－６ 削除

６．カテゴリの作成 ・・・・・ｐ１４～１５

７．ウェブページの活用 ・・・・・ｐ１６～２０

７－１ ウェブページの作成 ７－２ ウェブページの活用

８．ウィジェットの活用 ・・・・・ｐ２１～２４

８－１ ウィジェットの基本 ８－２ ウィジェットの編集

９．ヘッダー・フッターの変更 ・・・・・ｐ２５～２８

１０．その他 ・・・・・ｐ２９～３７

・記事一覧及びウェブページ一覧のフィルタ方法

・Googleカレンダーの埋め込み

・ブログ記事日付の非表示

・バナーの掲載方法

・リンクした一太郎ファイルが開かない場合

・公開後正しく表示されない場合

・アンカーリンク

・ＭＴに関するＱ＆Ａ

1

１．ＣＭＳ（Content Management System）とは

CMSとは、ウェブサイトを構成するテキストや画像、レイアウトなどを一元的に管理し、編集・構

築する「コンテンツ管理システム」です。サーバにインストールされている CMSを使用して、あらか

じめ用意されているテンプレートを選択、簡単な設定を行うことでウェブサイトを構築することが

可能です。

CMSと一般的なホームページ作成ツール（ホームページビルダーなど）との大きな違いはサイトの

構築環境です。ホームページ作成ツールでは、PC 上でサイトページなどを編集した後、関連する画

像ファイルなどとともに、サーバにアップします。CMSは、構築に関連するほとんどの作業をインタ

ーネットを通じて、管理画面（ブラウザ）上から行うことができます。

２．Ｍｏｖａｂｌｅ Ｔｙｐｅについて

Movable Typeは、CMSの一つで、「記事（ブログ）」「ウェブページ」「アイテム（ファイル）」と

いう 3種類のコンテンツを管理することで、ウェブサイト全体の効率的な構築が可能です。

ブログとウェブページの違い

◆ 記事（ブログ） → 随時更新、タイムリーな情報提供（新着情報、お知らせなど）

・頻繁に更新する。

・新着順に記事がウェブサイトのトップページに表示される。

・カテゴリや投稿月などが同じコンテンツをアーカイブで分類・整理し公開できる。

◆ ウェブページ → 管理のしやすさ、定番情報の提供

・学校案内、学校アクセス、進路情報、生徒会活動など定番な情報を個別ページで管理ができる。

・フォルダで管理する。

３．管理画面へのログイン

（１）各学校のログインページＵＲＬにアクセスする。

ログイン画面に「ユーザ名」と「パスワード」を入力し、

ログインする。

2

ログインすると、下記の画面がでます。

（２）学校名をクリックすると、管理画面（編集画面）がひらきます。

（サイトの再構築）をクリックする。編集した場合、保存（更新）などを行った上で、

再構築が終わったら、閉じる。

（サイトの表示）で変更結果の確認を行います。 再構築後、

「再構築を行ったのに、サイトの表示が変わらない」場合は、キャッシュが表示されてい

る可能性があります。ファンクションキー【Ｆ５】を押して下さい。

上：学校名 → 編集画面

下：URL → 公開画面

サイドメニュー

【記事】のサブメニュー

記事など新規作成 再構築 サイトの表示

編集終了後

サインアウト

3

４．テンプレート（テーマ）の選択

事前にテンプレート（テーマ）を３種類準備しています。各テーマで、ブログ全体のデザイ

ンを選択することができます。カラーはテーマごとに 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

（４）サイドメニューの「デザイン」－「テンプレー

ト」にて、インデックステンプレートの作成をクリ

ック

注 意

4

（５）テンプレート名（ここでは common）を入力後、ダ

ウンロードした同名ファイルのタグをコピー＆ペースト

する。

※ テンプレート名は必ず（３）のとおり

（６）同画面下の出力ファイル名に「common.css」と入力、【保存】

をクリック

（７）上部に次のメッセージが出たら、再構築をクリック

（８）同様に、（３）②③のスタイルシートを追加、 （サイトの再構築）をする。

（９）右上 （サイトの表示）をクリックして、テーマの変更結果を確認

各テンプレートに対応したスタイルシートのため、別のテンプレートを【適用】

した時点で、上記で作成した common、layout、smartphoneは削除されます。

別のテンプレートに変更した場合は（１）～（８）をやり直して下さい。

＜実行結果＞Ａタイプ２カラムのグレー

注 意

5

５．記事の作成・編集

５－１ 記事の新規作成

（１）サイドメニューの「記事」→「新規」をクリック

記事の入力を終えたら、コメントのチェックをはずし、最後に【公開】をクリック、再構築

※ 記事の編集中、直前の操作に戻る場合は【Ｃｔｒｌ】＋【ｚ】のキー操作で戻ります。

◆ 入力支援ツール

基本的には、ワードの操作と同じですが、システムの裏では同時にＨＴＭＬの編集が行われてい

ます。操作方法に慣れる必要があります。

※ 表を挿入したときにアクティブ

になります。

アイテムの挿入

記事作成の全画面

HTML ソースの編集

文字色 フォント種類とサイズ

④ チェックをはずす

① タイトルを入力

② 記事の内容を入力

③カテゴリごとに記事を分類することも可能(該

当するカテゴリに☑)

【追加】でカテゴリの新規作成も可能

入力支援ツール

⑤最後にクリック

6

記事の切り取り・コピー・貼り付けは、右クリック操作で行えます。

Firefox では、下記のようにショートカットで行います。

◇【Ｃtrl】＋【Ｘ】→切り取り ◇【Ｃtrl】＋【Ｃ】→コピー ◇【Ｃtrl】＋【Ｖ】→貼り付け

◆ ＨＴＭＬでの編集

ＨＴＭＬまたはフォーマットを【なし】に変更します。

＜フォーマット：なしの場合＞

HTMLコードの font-sizeの pt数値で文字サイズの変更や colorのカラーコードで文字色の変更がで

きます。

◎カラーコードはこちらを参照 → 原色大辞典 http://www.colordic.org/

◆ 公開項目

保存せずに実際に公開される状態を確認できる

下書き保存（非公開）や日時指定の公開ができる。

日時指定は時間単位で設定（分・秒単位は不可）

7

◆ 1つの記事が長い場合

「続きを読む：～」を使います。トップページにタイトルとリード文のみを表示させ、記事の本体

を「続き」にすることができます。

（１）【本文】タブの画面にリード文を入力します。

（２）【続き】タブに記事の本体を入力します。

（３）【公開】タブをクリック→再構築後、サイト確認を行うと、次のようになります。

クリックすると、個別の記事

画面が表示されます。

8

５－２ 画像ファイルを含む記事の作成

（１）ブログ記事の作成画面で、画像の挿入ボタンをクリック

（２）画像をアップロード

※ アップロードするファイル名は半角英数字に

して下さい。

（３）【ファイルを選択】をクリックし、画像を選択

画像の挿入

9

（４）格納するフォルダを選択し、【アップロード】ボタンをクリック

ここでは、新規に「平成 28 年度」と入力し、フォルダを作成。作成済みのフォルダを指定する場合

は、隣の【フォルダの選択】をクリック。（フォルダ名は年度または記事のカテゴリなど今後の管理

を考えて作成するとよい）

（５）ファイルオプション画面では、画像の処理方法を指定し、【完了】ボタンをクリック

（６）コメントの☑を外して、【公開】ボタンをクリック

10

（７）再構築後、サイト画面で確認

５－３ ＰＤＦ・動画ファイルへのリンク

ファイル等をリンクさせる記事を作成する場合の手順

①該当ファイルをアップロード → ②記事作成 → ③リンク設定

（１）リンク先のファイルをアップロードします。

※ アップロードするファイル名は半角英数字にして下さい。

（２）サイドメニューの「アイテム」→「新規」をクリック

アイテムのアップロード画面で【ファイルを選択】ボタンをクリックし、ファイルを選択

（３）アップロード先を選択、【アップロード】ボタンをクリック

完了すると、画面上に緑色で囲まれた「ファイルのアップロードが完了しました」メッセージ

がでます。複数ファイルの一括アップロードも可能です。

11

（４）アップロード先の URLをコピーします。

サイドメニューの「アイテム」→「一覧」をクリック、アイテムの管理画面でファイル名をクリ

ック

（５）アイテムの埋め込みにあるＵＲＬをコピー

（６）次にリンク元である記事を作成します。

関連つけるテキストを選択後、リンクボタンをクリック

②リンク

①関連つけるテキス

トを選択

12

（７）リンクのＵＲＬに上記（５）でコピーした URL を貼り付け、【更新】ボタンをクリック

５－４ 表の作成

表作成については、下記の方法と Excel 等で表を作成し、画像として貼り付ける方

法があります。

しかし、どちらの方法もブログ記事の幅の関係上､サイトの表示が厳しいこともある

ため（特にスマートフォン）、表データを pdf ファイルとしてアップし、記事からリ

ンクさせる方法をお薦めします。

（１）プログ記事の作成画面で、表作成ボタンをクリック、

表の列数や行数などを指定して、【挿入】ボタンをク

リック

（２）表が作成されるので、文字等を入力し、完成後【公開】ボタンをクリック。

②新しいウィンドウで開く

① URL を貼り付け

③更新

注意

13

５－５ 記事の編集

（１）サイドメニューの「ブログ記事」→「一覧」をクリック

（２）本文などに修正を加えた後、【更新】ボタンをクリック

５－６ 記事の削除

（１）サイドメニューの「ブログ記事」→「一覧」をクリック

削除するブログの先頭のチェックボックスをクリックし、【削除】ボタンをクリック

確認のメッセージが表示されたら【ＯＫ】ボタンをクリック

① 編集する記事のタイトルをクリック

14

６．カテゴリの作成

ブログ記事をカテゴリ別に分類することで、特定の記事の閲覧が容易になります。

カテゴリの作成には、新規のブログ記事の作成時に同時に作成する方法（ｐ４参照）とあらかじめ

カテゴリを作成する方法があります。 こちらでは、あらかじめカテゴリを作成する方法を取り上げ

ます。

（１）サイドメニューの「カテゴリ」→「一覧」をクリック

15

（２）ルートの横画面にカテゴリ名を入力し、【追加】ボタン→【変更を保存】をクリック

（３）サブカテゴリの作成は、該当するカテゴリを選択し、サブカテゴリ名を入力、【追加ボタン】

→【変更を保存】ボタンをクリック

16

再構築後、サイト画面で確認をします。

◆ カテゴリの並ベ替え

７.ウェブページの活用

７－１ ウェブページの作成

（１）サイドメニューの「ウェブページ」→「新規作成」をクリックし、ウェブページを作成します。

作成後【公開】ボタンをクリック。作成方法は記事作成と同様です。

上下で並び順の変更、左右でメインかサブへの変更ができる。

17

（２）処理後、画面上に「ウェブページを保存しました」というメッセージがでます。

（３）再構築後、サイトで確認します。

７－２ ウェブページの活用

デフォルトでは、ウェブページを作成すると、Web ページ上部にボタンが自動配置さ

れ、それをクリックすることで、ウェブページが表示されます（ボタンの並びは表示名

の昇順になっています）。

以下の方法により、任意での並べ替えやボタン配置なしのウェブページとして活用す

ることができます。

◆ ２カラムの場合（３カラムはｐ１９～）

１．サイドメニューの【デザイン】→【テンプレート】のテンプレートモジュールの「ヘッドナビ」

をコピーしてバックアップをとります。(ｐ３で県立沖縄高等学校 Bのテーマ 1.0を適用した場

合、「ウェブページ」をコピーして下さい)

① ③【テンプレートの複製】を選択

し、ＧＯをクリック

18

２．「ヘッドナ ビ」をクリックし、次のように内容を

編集します。

※ タグの３行目・11 行目を削除、7行目をウェブページ数（配置したいボタン数）コピーして、

リンクする URLに書き換えます。

（県立沖縄高等学校 B のテーマ 1.0 を適用した場合、「ウェブページ」の 4 行目・12 行目を削

除、８行目をウェブページ数（配置したいボタン数）コピーして、リンクする URL に書き換

えます。編集する行は異なるが、下記と内容は同じ）

＜編集前＞

19

＜編集後＞

1 <nav>

2 <mt:IfArchiveTypeEnabled archive_type="Page">

3 <mt:PagesHeader>

4 <ul>

5 </mt:PagesHeader>

6 <li><a href="http://lecture.open.ed.jp/post-4.html">学校長あいさつ</a></li>

7 <li><a href="http://lecture.open.ed.jp/post5.html">進路指導</a></li>

8 <li><a href="http://lecture.open.ed.jp/post-1.html">生徒指導部</a></li>

9 <li><a href="http://lecture.open.ed.jp/post-2.html">保健室</a></li>

10 <li><a href="http://lecture.open.ed.jp/post-3.html">アクセス</a></li>

11 <mt:PagesFooter>

12 </ul>

13 </mt:PagesFooter>

14 </mt:IfArchiveTypeEnabled>

15 </nav>

※リンクさせるウェブページの URLは、【ウェブページ】のパーマリンクをコピー＆ペーストします。

並べたい順

削除

削除 配置したいボタン数コピー

例

・href=”リンクさせるウェブページの URL”

・</a>の前に、そのウェブページの表示名を入力

20

３．ヘッドナビ編集後は、更新と再構築を行います。

○ 編集前（自動作成） ○ 編集後

４．テンプレートモジュールでタグを書かなければ、ウェブページはボタン化されないので、1枚の

ページとして他のウェブページからのリンクなどに活用できます。

◆ ３カラムの場合

１．サイドメニューの【デザイン】→【テンプレート】のテンプレートモジュールにある「ウェブペ

ージ」をコピーして、バックアップを取って下さい。

２．「ウェブページ」を下記のように編集します。任意にウェブページのボタンを並べ替えることが

リンクさせるウェブページの URL をコピー

②ウェブページの✔をいれる

③【テンプレートの複製】を選択

し、ＧＯをクリック

21

できます。

※ 元タグの 3～11 行目と 13～19 行目を削除、12 行目をウェブページ数（ボタン配置したい

数）コピーしてリンクする URLに書き換えます。

＜編集例＞

1 <mt:IfArchiveTypeEnabled archive_type="Page">

2 <ul>

3 <li><a href="http://lecture.open.ed.jp/post-4.html">学校長あいさつ</a></li>

4 <li><a href="http://lecture.open.ed.jp/post5.html">進路指導</a></li>

5 <li><a href="http://lecture.open.ed.jp/post-1.html">生徒指導部</a></li>

6 <li><a href="http://lecture.open.ed.jp/post-2.html">保健室</a></li>

7 <li><a href="http://lecture.open.ed.jp/post-3.html">アクセス</a></li>

8 </ul>

9 </mt:IfArchiveTypeEnabled archive_type="Page">

※ リンクさせるウェブページ URLは、【ウェブページ】のパーマリンクをコピー＆ペーストします。

３．ヘッドナビ編集後は、更新と再構築を行います。

○ 編集前（自動作成） ○ 編集後

４．テンプレートモジュールでタグを書かなければ、

ウェブページはボタン化されないので、1 枚のページとして他のウェブページからのリンクなど

に活用できます。

並べたい順

リンクさせるウェブページの URL をコピー

・href=”リンクさせるウェブページの URL”

・</a>の前に、そのウェブページの表示名を入力

22

８．ウィジェットの活用

「ウィジェット」とは、ブログ画面上で(主にサイドバー)で特定の機能を提供する小規模なコンテン

ツ を い い ま す。

以下、ウィジットの編集について説明します。

８－１ ウィジェットの基本

上記画面の構成を確認します

（１）「デザイン」→「ウィジット」をクリック

現在、ブログに適用されているスタイルのレイアウトは２カラムなので、ここでは、

【２カラムのサイドバー】をクリック

23

（２） 必要なウィジェットを「利用可能」から「インストール済み」ボックスにドラッグ＆ドロップ

します。（不要の場合は逆に「インストール済」から「利用可能」へ移動させます）

初期設定では、「検索」「カレンダ」「カテゴリ」「最近のブログ記事」が活用できるようになって

います。変更した場合は、【変更を保存】ボタンをクリックします。

８－２ ウィジェットの編集（ウェブサイトのリンク）

（１） 他のウェブページへリンクするウィジェットを作成します。

HTML の知識が必要ですが、既に活用されているフリーコードをコピーして書き換えると効率的

です。

（２） 「デザイン」→「ウィジェット」をクリック、

ここでは、最近のブログ記事をコピーして書き換

えます。

「最近のブログ記事」横の☑を入れて、テンプレ

ートの複製を選択、【GO】をクリック

ドラッグ＆ドロップ

24

（３）「最近のブログ記事のコピー」ファイルが確認できたら、クリックします。

（４）タイトル名とコードを書き換えて、【変更を保存】【再構築】

＜書き換え前＞ 1行目～3行目､7行目、9行目、12～14行目は削除、8行目をコピーして追加

（テーマ Bの場合は 1行目、5行目、7行目を削除、6行目をコピーして追加）

＜書き換え後＞

1 <mt:If tag="BlogEntryCount">

2 <mt:Entries lastn="10">

3 <mt:EntriesHeader>

4 <section class="widget-recent-entries widget-archives widget">

5 <h1 class="widget-header">最近のブログ記事</h1>

6 <ul>

7 </mt:EntriesHeader>

8 <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>

9 <mt:EntriesFooter>

10 </ul>

11 </section>

12 </mt:EntriesFooter>

13 </mt:Entries>

14 </mt:If>

1 <section class="widget-recent-entries widget-archives widget">

2 <h1 class="widget-header">ウェブページのリンク</h1>

3 <ul>

4 <li><a href="http://www.open.ed.jp">ＩＴ教育センター</a></li>

5 <li><a href="http://www.edu-c.open.ed.jp">県立総合教育センター</a></li>

6 <li><a href="http://mt-test.open.ed.jp/test7/google.html">グーグルカレンダ</a></li>

7 </ul>

8 </section>

リンク先アドレスと表示名を入力

25

（５）最後に８－１ ウィジェットの基本 を参照に、作成したウィジェットをドラッグ＆ドロッ

プし、【変更を保存】する。

（６） 再構築後、サイトで確認

26

９．ヘッダー・フッターの変更

９－１ ヘッダーの変更

（１） ヘッダーの画像を変更する場合、「アイテム」→「新規」画面でその画像をアップロードしま

す。【ファイルを選択】をクリックし、画像を選択します。

（２）これまでと同様アップロード先を選択し、【アップロードボタン】をクリックします。

（３）「アイテム」→「一覧」をクリック、画像ファイル名を選択

27

（４）アイテムの埋め込みで、URLをコピー

（５） 「デザイン」→「テンプレート」をクリック

ブログテンプレートの管理画面にあるインデックステンプレート中の【layout】テンプレ

ートをクリック（テーマ Bの場合は【common】）

（６）ソースコードの 117 行目（テーマ Bの場合は 13行目、３カラムの場合は 61行目）の URLを書

き換える。

書き換える前に、ソースコードはコピーしてテキストエディタなどに貼り付けて、

適当な名前で保存しておくと安心です。

2 カラム：117 行目

(3 カラム：61 行目)

注意

28

＜書き換え前＞

＜書き換え後＞

（７）書き換え後、【変更を保存】をクリック、再構築を行う

（７）書き換え後、画面下の【保存と再構築】をクリック

（８）同様に、smartphone テンプレートの 251行目（３カラムの場合は 191行目）を書き換える。

【保存と再構築】をクリック、サイトを確認します。

９－２ ヘッダー文字(学校名)フォント変更

ｐ２６（５）と同様、【ｌａｙｏｕｔ】のテンプレートのコードを変更します。

２カラムは１２５行目で文字サイズ、１３３～１３６行目で文字の色が変更できます。

（テーマ Bの場合は３５行目で文字サイズ、５４～５７行で文字の色を変更）

（3 カラムは２８行目で文字サイズ、３８～４１行目で文字の色を変更）

Color：の後ろのカラーコードを変更する。

◎カラーコードはこちらを参照 → 原色大辞典 http://www.colordic.org/

133 行目 link → 元々の色

134 行目 visited → 〃（133 行目と同色指定）

135 行目 hover → マウスを重ねた時の色

136 行目 active → クリックしたとき時の色

background: url("http://mt-edu.open.ed.jp/yoseyamaA2/files/top.jpg") center ～

background: url("http://lecture.open. ed.jp/items/tulip.jpg") center ～

文字の大きさ

29

９－２ フッターの変更

（１）「デザイン」→「テンプレートをクリック、ブログテンプレートの管理画面にあるテンプレー

トモジュール中の【バナーフッター】ファイルをクリック

（２）コードの一部分（ の部分）を書き換えて、【変更を保存】をクリック、再構築後、サ

イトの変更を確認(デフォルトは学校名)

<footer>

<address>Copyright(C) <a href="<$mt:BlogURL$>"><$mt:BlogName encode_html="1"$></a>

All Rights Reserved.</address>

</footer>

30

記事一覧及びウェブページ一覧のフィルタ方法

① 一覧画面で、フィルタの行の右端にある「▼」のアイコンをクリックしてフィルタ設定を開

きます。

② 「フィルタ項目を選択して下さい」のドロップダウンでカテゴリを選択します。

③ 入力欄が表示されるのでフィルタするカテゴリ名を入力後、適用ボタンを押します。

カテゴリを選択

フィルタリングするカテゴリを入力

31

ブログ記事日付の非表示

ソースコードの編集により可能です。変更方法を下記に記載致します。

変更する場合は、事前にソースコードのバックアップもお願い致します。

(マニュアルｐ17 のようにテンプレートをコピー)

1．TOP 画面のブログ記事の日付を非表示にする場合

以下の手順でソースコードを表示します。

[デザイン]→[テンプレート]→テンプレートモジュールの「ブログ記事の概要」

● 2 カラムでは 8 行目と 10 行目のソースを削除します（テーマ B の場合は 7 行目と 9 行目を削除）。

※3 カラムでは 6 行目と 8 行目にある同じソースを削除

8 行目：

(<abbr class="published" title="<$mt:EntryDate

format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)

10 行目：

<abbr class="published" title="<$mt:EntryDate

format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>

2．ブログ各記事内の日付を非表示にする場合

以下の手順でソースコードを表示します。

[デザイン]→[テンプレート]→アーカイブテンプレートの「ブログ記事」

●2 カラムでは 37 行目と 39 行目のソースを削除します（テーマ B の場合は 33 行目と 35 行目を削除）。

※3 カラムでは 38 行目と 40 行目にある同じソースを削除

37 行目：

<span class="vcard author"><$mt:EntryAuthorLink

show_hcard="1"$></span> (<abbr class="published" title="<$mt:EntryDate

format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>)

39 行目：

<abbr class="published" title="<$mt:EntryDate

format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>

日付が非表示

バナーの掲載方法(MovableType)

32

※ バナーを TOPページのサイド（ウィジェット）に掲載する例を紹介します。

※今回は、例として教県第 2382号掲載の中途退学対策ホームページへのリンクになっています。

１．バナーをアイテムにアップロードします。

２．デザイン→ウィジェット→ウィジェットテンプレートの作成を選択

３．バナーウィジェットなど名前をつけ、本文を添付のウィジェット dataからコピー＆ペーストし、

バナーの URL部分を書き換えます（上記１．バナーの URL）。→ 保存 → 再構築

＜本文解説＞

■ href=～ ⇒ バナーをクリックした際のリンク先

※今回は、例として教県第 2382号掲載の中途退学対策ホームページへのリンクになっています。

4 行目は PC版、5行目携帯端末版

■ target="_blank" ⇒ リンク先を別のウィンドウでひらく

■ img src=～ ⇒ バナーデータの保存先（上記１でアップしたアイテムの URL）

４．デザイン→ウィジェット→ウィジェットセット→レイアウトに応じて選択

33

５．上記 3 で作成したウィジェットを右側の【利用可能】から【インストール済み】へドラッグ＆ド

ロップ

→ 変更を保存 → 再構築

６．サイトを表示し、バナーの掲載、中退 HPへのリンク等を確認して下さい。

各学校の HP レイアウトに応じて選択。

3 カラム（メイン）は TOP ページの左側、（サブ）は右

34

公開後正しく表示されない場合

※ CMS（MovableType）を公開した際、キャッシュやテキストでの表示があります。

（IEはバージョン 10以降に対応、互換表示設定も併せて行って下さい）

【Internet Explorer】

(1) Internet Explorer を起動し、右上のアイコンをクリックし、「互換表示設定」をクリック

(2) 追加する Webサイト「open.ed.jp」を確認し、「追加」をクリックし、「削除」する。

✔を外し、閉じる。

※ 進路相談システムの互換表示設定は、運用支援ページをご参照下さい。

(2) 閲覧履歴を削除します（旧 Webページのキャッシュが残っている可能性があるため）

✔を 2 カ所外す

35

【Firefox】

【Google Chrome】

１

２

２

１

２ ４．閲覧履歴に✔をいれる

５

３

.

．

３

.

．

４

５

36

リンクした一太郎ファイルが開かない場合

一太郎はブラウザを選びます。

○ Firefoxは表示、保存ともＯＫ

○ Chromeは文字化けが発生

○ InternetExplorerでは下記の１または２どちらかで対応お願いします。

１ ダウンロードしたい資料の上で右クリックし、【対象をファイルに保存】をクリックし、保存。

２ IE の上部にあるメニューの「ツール」→「アドオンの管理」→表示の下にある【すべてのアド

オン】→右側にある JUSTSYSTEM～の【JSCNTBR BrowserHelper】をクリックし、【有効】にする。

再度ＩＥを起動、資料を選択後、

表示後、保存してください。

37

ＭＴに関する Q＆A

Ｑ１ PC できれいにみえている画像が smartphone では画像が切れている。画像もそのまま小さく

ならないのか？

◆２カラム サイドメニューのデザイン→テンプレート→インデックステンプレート→

【smartphone】

252 行目 background-size:cover; の cover を 100% 100% へ変更

◆３カラム サイドメニューのデザイン→テンプレート→インデックステンプレート→

【smartphone】

191～192 行目 ～ top center no-repeat #eee; のうしろに background-size:100% 100%; を

挿入

Ｑ２ ウェブページからトップに戻れるか

Ａ．学校名をクリックすると、Web ページ TOP にくるが、閲覧者にはわかりにくい。TOP ボタ

ンをつくる方法で解決できる。(マニュアルｐ17～ｐ20)

Ｑ３ ウェブページボタンで「PTA」をクリックすると、リンクでは無く、pdf ファイルそのものが

表

できるようにできるか？

Ａ．可能。テンプレートモジュールのヘッドナビ（2 カラム）、ウェブページ（3 カラム）のタグに、

該当する pdf ファイルのパーマリンク先をコピー＆ペーストすれば良い。上記２と同様。（マニュア

ルｐ１７～ｐ２０）

Ｑ４ １ページ内での記事が多くなった場合、スクロールせずにみたい項目へとばせる事ができる

か

Ａ．そのページ内にアンカーリンクを設定することで、同ページ内のみたい項目へリンクさせるこ

とができる。しかし、現在ページ TOP に戻る点で少し課題を残している。

Ｑ５ ヘッダー部分領域の高さを変更したい。

Ａ．スタイルシート（layout）を下記のとおり編集します。

2 カラム・・116 行目 header 部分の height の数値を変更（初期値 300px）

3 カラム・・60 行目 topImg 部分の height の数値を変更（初期値 300px）

Ｑ６ CMS へ変更する際の手続き方法

38

Ａ．①ＣＭＳによる学校Ｗｅｂページが作成完了後、「ＩＴ教育センターネットワークＷｅｂペー

ジエリア及びメールアカウント利用申請書」を提出（申請内容を内容変更に○）

申請書→http://it.open.ed.jp/school_lan/よりダウンロード可能

②教育センター側で CMS ページの外部公開作業を行う。CMS ページ公開に伴い、FTP 利用

のページは閉鎖される（閉鎖する日程は要相談）。

Ｑ７ CMS に関する問い合わせ先

Ａ．メールにてお願いします。メールアドレス：cmsadmin@open.ed.jp

ヘッダーにある学校名の削除

サイドメニューの デザイン＞テンプレート＞テンプレートモジュール にある

【バナーヘッダー】の２行目を下記のとおり書き換えて下さい（現在はブログ名、つまり学校名が自

動的に入るようになっています）

<h1><a href="<$mt:BlogURL$>"><$mt:BlogName encode_html="1"$></a></h1>

↓

<h1><a href=""></a></h1>

ウィジェットでのテキスト表示

<section class="widget-recent-entries widget-archives widget">

<h1 class="widget-header">ウィジェット名</h1>

<ul>

<p><font size="文字サイズ">テキスト</font></p>

<p><font size="文字サイズ">テキスト</font></p>

<p><font size="文字サイズ">テキスト</font></p>

</ul>

</section>