View
2
Download
0
Category
Preview:
Citation preview
学校 Webページ作成(CMS)
CMS(MovableType)による学校 Web ページ作成操作手順書 Ver5
平成 29年 4月
沖縄県立総合教育センター IT教育班
- 目次 -
1.CMSとは ・・・・・p1
2.Movable Typeとは・・(ブログとウェブページの違い) ・・・・ p1
3.ログイン方法 ・・・・・p1~2
4.テンプレートの選択 ・・・・・p3~4
5.記事の作成・編集 ・・・・・p5~13
5-1 新規作成 5-2 画像を含む記事の作成 5-3 動画・PDFへのリンク
5-4 表の作成 5-5 編集 5-6 削除
6.カテゴリの作成 ・・・・・p14~15
7.ウェブページの活用 ・・・・・p16~20
7-1 ウェブページの作成 7-2 ウェブページの活用
8.ウィジェットの活用 ・・・・・p21~24
8-1 ウィジェットの基本 8-2 ウィジェットの編集
9.ヘッダー・フッターの変更 ・・・・・p25~28
10.その他 ・・・・・p29~37
・記事一覧及びウェブページ一覧のフィルタ方法
・Googleカレンダーの埋め込み
・ブログ記事日付の非表示
・バナーの掲載方法
・リンクした一太郎ファイルが開かない場合
・公開後正しく表示されない場合
・アンカーリンク
・MTに関するQ&A
1
1.CMS(Content Management System)とは
CMSとは、ウェブサイトを構成するテキストや画像、レイアウトなどを一元的に管理し、編集・構
築する「コンテンツ管理システム」です。サーバにインストールされている CMSを使用して、あらか
じめ用意されているテンプレートを選択、簡単な設定を行うことでウェブサイトを構築することが
可能です。
CMSと一般的なホームページ作成ツール(ホームページビルダーなど)との大きな違いはサイトの
構築環境です。ホームページ作成ツールでは、PC 上でサイトページなどを編集した後、関連する画
像ファイルなどとともに、サーバにアップします。CMSは、構築に関連するほとんどの作業をインタ
ーネットを通じて、管理画面(ブラウザ)上から行うことができます。
2.Movable Typeについて
Movable Typeは、CMSの一つで、「記事(ブログ)」「ウェブページ」「アイテム(ファイル)」と
いう 3種類のコンテンツを管理することで、ウェブサイト全体の効率的な構築が可能です。
ブログとウェブページの違い
◆ 記事(ブログ) → 随時更新、タイムリーな情報提供(新着情報、お知らせなど)
・頻繁に更新する。
・新着順に記事がウェブサイトのトップページに表示される。
・カテゴリや投稿月などが同じコンテンツをアーカイブで分類・整理し公開できる。
◆ ウェブページ → 管理のしやすさ、定番情報の提供
・学校案内、学校アクセス、進路情報、生徒会活動など定番な情報を個別ページで管理ができる。
・フォルダで管理する。
3.管理画面へのログイン
(1)各学校のログインページURLにアクセスする。
ログイン画面に「ユーザ名」と「パスワード」を入力し、
ログインする。
2
ログインすると、下記の画面がでます。
(2)学校名をクリックすると、管理画面(編集画面)がひらきます。
(サイトの再構築)をクリックする。編集した場合、保存(更新)などを行った上で、
再構築が終わったら、閉じる。
(サイトの表示)で変更結果の確認を行います。 再構築後、
「再構築を行ったのに、サイトの表示が変わらない」場合は、キャッシュが表示されてい
る可能性があります。ファンクションキー【F5】を押して下さい。
上:学校名 → 編集画面
下:URL → 公開画面
サイドメニュー
【記事】のサブメニュー
記事など新規作成 再構築 サイトの表示
編集終了後
サインアウト
3
4.テンプレート(テーマ)の選択
事前にテンプレート(テーマ)を3種類準備しています。各テーマで、ブログ全体のデザイ
ンを選択することができます。カラーはテーマごとに 3色~5色より選択できます。
詳細は、下記の URLを参照して下さい。(スタイルシートをダウンロードします)
教育センター → IT教育班 → 沖縄県立学校CMS(MovableType)支援ページ
http://it.edu-c.open.ed.jp/cmsmovabletypeweb.html
サイトを作り込む前に、テーマはよく検討して選択して下さい。
テーマを変更した際、アイテムやテキストなどのコンテンツは、バックアップされま
すが、ウィジェットなどレイアウトが崩れる可能性が大きいです。
(1)サイドメニューの「デザイン」→「テーマ」をクリック
(2)利用可能なテーマから、希望のテンプレート(テーマ)の【適用】ボタンをクリック
(今回の研修は、県立沖縄高等学校 A2のテーマ 1.0 を適用して説明します。他に、県立沖縄高
等学校 Bのテーマ 1.0 と県立沖縄高等学校 Cのテーマ 1.0があります)
※ ここでは、再構築は行いません。
(3)各テンプレート(テーマ)の色を決めたら、そのスタイルシートを3つ追加します。
①common ②layout ③smartphone
(4)サイドメニューの「デザイン」-「テンプレー
ト」にて、インデックステンプレートの作成をクリ
ック
注 意
4
(5)テンプレート名(ここでは common)を入力後、ダ
ウンロードした同名ファイルのタグをコピー&ペースト
する。
※ テンプレート名は必ず(3)のとおり
(6)同画面下の出力ファイル名に「common.css」と入力、【保存】
をクリック
(7)上部に次のメッセージが出たら、再構築をクリック
(8)同様に、(3)②③のスタイルシートを追加、 (サイトの再構築)をする。
(9)右上 (サイトの表示)をクリックして、テーマの変更結果を確認
各テンプレートに対応したスタイルシートのため、別のテンプレートを【適用】
した時点で、上記で作成した common、layout、smartphoneは削除されます。
別のテンプレートに変更した場合は(1)~(8)をやり直して下さい。
<実行結果>Aタイプ2カラムのグレー
注 意
5
5.記事の作成・編集
5-1 記事の新規作成
(1)サイドメニューの「記事」→「新規」をクリック
記事の入力を終えたら、コメントのチェックをはずし、最後に【公開】をクリック、再構築
※ 記事の編集中、直前の操作に戻る場合は【Ctrl】+【z】のキー操作で戻ります。
◆ 入力支援ツール
基本的には、ワードの操作と同じですが、システムの裏では同時にHTMLの編集が行われてい
ます。操作方法に慣れる必要があります。
※ 表を挿入したときにアクティブ
になります。
アイテムの挿入
記事作成の全画面
HTML ソースの編集
文字色 フォント種類とサイズ
④ チェックをはずす
① タイトルを入力
② 記事の内容を入力
③カテゴリごとに記事を分類することも可能(該
当するカテゴリに☑)
【追加】でカテゴリの新規作成も可能
入力支援ツール
⑤最後にクリック
6
記事の切り取り・コピー・貼り付けは、右クリック操作で行えます。
Firefox では、下記のようにショートカットで行います。
◇【Ctrl】+【X】→切り取り ◇【Ctrl】+【C】→コピー ◇【Ctrl】+【V】→貼り付け
◆ HTMLでの編集
HTMLまたはフォーマットを【なし】に変更します。
<フォーマット:なしの場合>
HTMLコードの font-sizeの pt数値で文字サイズの変更や colorのカラーコードで文字色の変更がで
きます。
◎カラーコードはこちらを参照 → 原色大辞典 http://www.colordic.org/
◆ 公開項目
保存せずに実際に公開される状態を確認できる
下書き保存(非公開)や日時指定の公開ができる。
日時指定は時間単位で設定(分・秒単位は不可)
7
◆ 1つの記事が長い場合
「続きを読む:~」を使います。トップページにタイトルとリード文のみを表示させ、記事の本体
を「続き」にすることができます。
(1)【本文】タブの画面にリード文を入力します。
(2)【続き】タブに記事の本体を入力します。
(3)【公開】タブをクリック→再構築後、サイト確認を行うと、次のようになります。
クリックすると、個別の記事
画面が表示されます。
8
5-2 画像ファイルを含む記事の作成
(1)ブログ記事の作成画面で、画像の挿入ボタンをクリック
(2)画像をアップロード
※ アップロードするファイル名は半角英数字に
して下さい。
(3)【ファイルを選択】をクリックし、画像を選択
画像の挿入
9
(4)格納するフォルダを選択し、【アップロード】ボタンをクリック
ここでは、新規に「平成 28 年度」と入力し、フォルダを作成。作成済みのフォルダを指定する場合
は、隣の【フォルダの選択】をクリック。(フォルダ名は年度または記事のカテゴリなど今後の管理
を考えて作成するとよい)
(5)ファイルオプション画面では、画像の処理方法を指定し、【完了】ボタンをクリック
(6)コメントの☑を外して、【公開】ボタンをクリック
10
(7)再構築後、サイト画面で確認
5-3 PDF・動画ファイルへのリンク
ファイル等をリンクさせる記事を作成する場合の手順
①該当ファイルをアップロード → ②記事作成 → ③リンク設定
(1)リンク先のファイルをアップロードします。
※ アップロードするファイル名は半角英数字にして下さい。
(2)サイドメニューの「アイテム」→「新規」をクリック
アイテムのアップロード画面で【ファイルを選択】ボタンをクリックし、ファイルを選択
(3)アップロード先を選択、【アップロード】ボタンをクリック
完了すると、画面上に緑色で囲まれた「ファイルのアップロードが完了しました」メッセージ
がでます。複数ファイルの一括アップロードも可能です。
11
(4)アップロード先の URLをコピーします。
サイドメニューの「アイテム」→「一覧」をクリック、アイテムの管理画面でファイル名をクリ
ック
(5)アイテムの埋め込みにあるURLをコピー
(6)次にリンク元である記事を作成します。
関連つけるテキストを選択後、リンクボタンをクリック
②リンク
①関連つけるテキス
トを選択
12
(7)リンクのURLに上記(5)でコピーした URL を貼り付け、【更新】ボタンをクリック
5-4 表の作成
表作成については、下記の方法と Excel 等で表を作成し、画像として貼り付ける方
法があります。
しかし、どちらの方法もブログ記事の幅の関係上、サイトの表示が厳しいこともある
ため(特にスマートフォン)、表データを pdf ファイルとしてアップし、記事からリ
ンクさせる方法をお薦めします。
(1)プログ記事の作成画面で、表作成ボタンをクリック、
表の列数や行数などを指定して、【挿入】ボタンをク
リック
(2)表が作成されるので、文字等を入力し、完成後【公開】ボタンをクリック。
②新しいウィンドウで開く
① URL を貼り付け
③更新
注意
13
5-5 記事の編集
(1)サイドメニューの「ブログ記事」→「一覧」をクリック
(2)本文などに修正を加えた後、【更新】ボタンをクリック
5-6 記事の削除
(1)サイドメニューの「ブログ記事」→「一覧」をクリック
削除するブログの先頭のチェックボックスをクリックし、【削除】ボタンをクリック
確認のメッセージが表示されたら【OK】ボタンをクリック
① 編集する記事のタイトルをクリック
14
6.カテゴリの作成
ブログ記事をカテゴリ別に分類することで、特定の記事の閲覧が容易になります。
カテゴリの作成には、新規のブログ記事の作成時に同時に作成する方法(p4参照)とあらかじめ
カテゴリを作成する方法があります。 こちらでは、あらかじめカテゴリを作成する方法を取り上げ
ます。
(1)サイドメニューの「カテゴリ」→「一覧」をクリック
15
(2)ルートの横画面にカテゴリ名を入力し、【追加】ボタン→【変更を保存】をクリック
(3)サブカテゴリの作成は、該当するカテゴリを選択し、サブカテゴリ名を入力、【追加ボタン】
→【変更を保存】ボタンをクリック
16
再構築後、サイト画面で確認をします。
◆ カテゴリの並ベ替え
7.ウェブページの活用
7-1 ウェブページの作成
(1)サイドメニューの「ウェブページ」→「新規作成」をクリックし、ウェブページを作成します。
作成後【公開】ボタンをクリック。作成方法は記事作成と同様です。
上下で並び順の変更、左右でメインかサブへの変更ができる。
17
(2)処理後、画面上に「ウェブページを保存しました」というメッセージがでます。
(3)再構築後、サイトで確認します。
7-2 ウェブページの活用
デフォルトでは、ウェブページを作成すると、Web ページ上部にボタンが自動配置さ
れ、それをクリックすることで、ウェブページが表示されます(ボタンの並びは表示名
の昇順になっています)。
以下の方法により、任意での並べ替えやボタン配置なしのウェブページとして活用す
ることができます。
◆ 2カラムの場合(3カラムはp19~)
1.サイドメニューの【デザイン】→【テンプレート】のテンプレートモジュールの「ヘッドナビ」
をコピーしてバックアップをとります。(p3で県立沖縄高等学校 Bのテーマ 1.0を適用した場
合、「ウェブページ」をコピーして下さい)
① ③【テンプレートの複製】を選択
し、GOをクリック
18
2.「ヘッドナ ビ」をクリックし、次のように内容を
編集します。
※ タグの3行目・11 行目を削除、7行目をウェブページ数(配置したいボタン数)コピーして、
リンクする URLに書き換えます。
(県立沖縄高等学校 B のテーマ 1.0 を適用した場合、「ウェブページ」の 4 行目・12 行目を削
除、8行目をウェブページ数(配置したいボタン数)コピーして、リンクする 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
3.ヘッドナビ編集後は、更新と再構築を行います。
○ 編集前(自動作成) ○ 編集後
4.テンプレートモジュールでタグを書かなければ、ウェブページはボタン化されないので、1枚の
ページとして他のウェブページからのリンクなどに活用できます。
◆ 3カラムの場合
1.サイドメニューの【デザイン】→【テンプレート】のテンプレートモジュールにある「ウェブペ
ージ」をコピーして、バックアップを取って下さい。
2.「ウェブページ」を下記のように編集します。任意にウェブページのボタンを並べ替えることが
リンクさせるウェブページの URL をコピー
②ウェブページの✔をいれる
③【テンプレートの複製】を選択
し、GOをクリック
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は、【ウェブページ】のパーマリンクをコピー&ペーストします。
3.ヘッドナビ編集後は、更新と再構築を行います。
○ 編集前(自動作成) ○ 編集後
4.テンプレートモジュールでタグを書かなければ、
ウェブページはボタン化されないので、1 枚のページとして他のウェブページからのリンクなど
に活用できます。
並べたい順
リンクさせるウェブページの URL をコピー
・href=”リンクさせるウェブページの URL”
・</a>の前に、そのウェブページの表示名を入力
22
8.ウィジェットの活用
「ウィジェット」とは、ブログ画面上で(主にサイドバー)で特定の機能を提供する小規模なコンテン
ツ を い い ま す。
以下、ウィジットの編集について説明します。
8-1 ウィジェットの基本
上記画面の構成を確認します
(1)「デザイン」→「ウィジット」をクリック
現在、ブログに適用されているスタイルのレイアウトは2カラムなので、ここでは、
【2カラムのサイドバー】をクリック
23
(2) 必要なウィジェットを「利用可能」から「インストール済み」ボックスにドラッグ&ドロップ
します。(不要の場合は逆に「インストール済」から「利用可能」へ移動させます)
初期設定では、「検索」「カレンダ」「カテゴリ」「最近のブログ記事」が活用できるようになって
います。変更した場合は、【変更を保存】ボタンをクリックします。
8-2 ウィジェットの編集(ウェブサイトのリンク)
(1) 他のウェブページへリンクするウィジェットを作成します。
HTML の知識が必要ですが、既に活用されているフリーコードをコピーして書き換えると効率的
です。
(2) 「デザイン」→「ウィジェット」をクリック、
ここでは、最近のブログ記事をコピーして書き換
えます。
「最近のブログ記事」横の☑を入れて、テンプレ
ートの複製を選択、【GO】をクリック
ドラッグ&ドロップ
24
(3)「最近のブログ記事のコピー」ファイルが確認できたら、クリックします。
(4)タイトル名とコードを書き換えて、【変更を保存】【再構築】
<書き換え前> 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">IT教育センター</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
(5)最後に8-1 ウィジェットの基本 を参照に、作成したウィジェットをドラッグ&ドロッ
プし、【変更を保存】する。
(6) 再構築後、サイトで確認
26
9.ヘッダー・フッターの変更
9-1 ヘッダーの変更
(1) ヘッダーの画像を変更する場合、「アイテム」→「新規」画面でその画像をアップロードしま
す。【ファイルを選択】をクリックし、画像を選択します。
(2)これまでと同様アップロード先を選択し、【アップロードボタン】をクリックします。
(3)「アイテム」→「一覧」をクリック、画像ファイル名を選択
27
(4)アイテムの埋め込みで、URLをコピー
(5) 「デザイン」→「テンプレート」をクリック
ブログテンプレートの管理画面にあるインデックステンプレート中の【layout】テンプレ
ートをクリック(テーマ Bの場合は【common】)
(6)ソースコードの 117 行目(テーマ Bの場合は 13行目、3カラムの場合は 61行目)の URLを書
き換える。
書き換える前に、ソースコードはコピーしてテキストエディタなどに貼り付けて、
適当な名前で保存しておくと安心です。
2 カラム:117 行目
(3 カラム:61 行目)
注意
28
<書き換え前>
<書き換え後>
(7)書き換え後、【変更を保存】をクリック、再構築を行う
(7)書き換え後、画面下の【保存と再構築】をクリック
(8)同様に、smartphone テンプレートの 251行目(3カラムの場合は 191行目)を書き換える。
【保存と再構築】をクリック、サイトを確認します。
9-2 ヘッダー文字(学校名)フォント変更
p26(5)と同様、【layout】のテンプレートのコードを変更します。
2カラムは125行目で文字サイズ、133~136行目で文字の色が変更できます。
(テーマ Bの場合は35行目で文字サイズ、54~57行で文字の色を変更)
(3 カラムは28行目で文字サイズ、38~41行目で文字の色を変更)
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
9-2 フッターの変更
(1)「デザイン」→「テンプレートをクリック、ブログテンプレートの管理画面にあるテンプレー
トモジュール中の【バナーフッター】ファイルをクリック
(2)コードの一部分( の部分)を書き換えて、【変更を保存】をクリック、再構築後、サ
イトの変更を確認(デフォルトは学校名)
<footer>
<address>Copyright(C) <a href="<$mt:BlogURL$>"><$mt:BlogName encode_html="1"$></a>
All Rights Reserved.</address>
</footer>
30
記事一覧及びウェブページ一覧のフィルタ方法
① 一覧画面で、フィルタの行の右端にある「▼」のアイコンをクリックしてフィルタ設定を開
きます。
② 「フィルタ項目を選択して下さい」のドロップダウンでカテゴリを選択します。
③ 入力欄が表示されるのでフィルタするカテゴリ名を入力後、適用ボタンを押します。
カテゴリを選択
フィルタリングするカテゴリを入力
31
ブログ記事日付の非表示
ソースコードの編集により可能です。変更方法を下記に記載致します。
変更する場合は、事前にソースコードのバックアップもお願い致します。
(マニュアルp17 のようにテンプレートをコピー)
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号掲載の中途退学対策ホームページへのリンクになっています。
1.バナーをアイテムにアップロードします。
2.デザイン→ウィジェット→ウィジェットテンプレートの作成を選択
3.バナーウィジェットなど名前をつけ、本文を添付のウィジェット dataからコピー&ペーストし、
バナーの URL部分を書き換えます(上記1.バナーの URL)。→ 保存 → 再構築
<本文解説>
■ href=~ ⇒ バナーをクリックした際のリンク先
※今回は、例として教県第 2382号掲載の中途退学対策ホームページへのリンクになっています。
4 行目は PC版、5行目携帯端末版
■ target="_blank" ⇒ リンク先を別のウィンドウでひらく
■ img src=~ ⇒ バナーデータの保存先(上記1でアップしたアイテムの URL)
4.デザイン→ウィジェット→ウィジェットセット→レイアウトに応じて選択
33
5.上記 3 で作成したウィジェットを右側の【利用可能】から【インストール済み】へドラッグ&ド
ロップ
→ 変更を保存 → 再構築
6.サイトを表示し、バナーの掲載、中退 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】
1
2
2
1
2 4.閲覧履歴に✔をいれる
5
3
.
.
3
.
.
4
5
36
リンクした一太郎ファイルが開かない場合
一太郎はブラウザを選びます。
○ Firefoxは表示、保存ともOK
○ Chromeは文字化けが発生
○ InternetExplorerでは下記の1または2どちらかで対応お願いします。
1 ダウンロードしたい資料の上で右クリックし、【対象をファイルに保存】をクリックし、保存。
2 IE の上部にあるメニューの「ツール」→「アドオンの管理」→表示の下にある【すべてのアド
オン】→右側にある JUSTSYSTEM~の【JSCNTBR BrowserHelper】をクリックし、【有効】にする。
再度IEを起動、資料を選択後、
表示後、保存してください。
37
MTに関する Q&A
Q1 PC できれいにみえている画像が smartphone では画像が切れている。画像もそのまま小さく
ならないのか?
◆2カラム サイドメニューのデザイン→テンプレート→インデックステンプレート→
【smartphone】
252 行目 background-size:cover; の cover を 100% 100% へ変更
◆3カラム サイドメニューのデザイン→テンプレート→インデックステンプレート→
【smartphone】
191~192 行目 ~ top center no-repeat #eee; のうしろに background-size:100% 100%; を
挿入
Q2 ウェブページからトップに戻れるか
A.学校名をクリックすると、Web ページ TOP にくるが、閲覧者にはわかりにくい。TOP ボタ
ンをつくる方法で解決できる。(マニュアルp17~p20)
Q3 ウェブページボタンで「PTA」をクリックすると、リンクでは無く、pdf ファイルそのものが
表
できるようにできるか?
A.可能。テンプレートモジュールのヘッドナビ(2 カラム)、ウェブページ(3 カラム)のタグに、
該当する pdf ファイルのパーマリンク先をコピー&ペーストすれば良い。上記2と同様。(マニュア
ルp17~p20)
Q4 1ページ内での記事が多くなった場合、スクロールせずにみたい項目へとばせる事ができる
か
A.そのページ内にアンカーリンクを設定することで、同ページ内のみたい項目へリンクさせるこ
とができる。しかし、現在ページ TOP に戻る点で少し課題を残している。
Q5 ヘッダー部分領域の高さを変更したい。
A.スタイルシート(layout)を下記のとおり編集します。
2 カラム・・116 行目 header 部分の height の数値を変更(初期値 300px)
3 カラム・・60 行目 topImg 部分の height の数値を変更(初期値 300px)
Q6 CMS へ変更する際の手続き方法
38
A.①CMSによる学校Webページが作成完了後、「IT教育センターネットワークWebペー
ジエリア及びメールアカウント利用申請書」を提出(申請内容を内容変更に○)
申請書→http://it.open.ed.jp/school_lan/よりダウンロード可能
②教育センター側で CMS ページの外部公開作業を行う。CMS ページ公開に伴い、FTP 利用
のページは閉鎖される(閉鎖する日程は要相談)。
Q7 CMS に関する問い合わせ先
A.メールにてお願いします。メールアドレス:cmsadmin@open.ed.jp
ヘッダーにある学校名の削除
サイドメニューの デザイン>テンプレート>テンプレートモジュール にある
【バナーヘッダー】の2行目を下記のとおり書き換えて下さい(現在はブログ名、つまり学校名が自
動的に入るようになっています)
<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>
Recommended