- 目次 - 1.CMS とは 2.Movable Type とは ( ブログとウェブページの違い ) p1 p1 3. ログイン方法 p1~2 4. テンプレートの選択 p3~4 5. 記事の作成編集 p5~ 新規作成 5-2 画像を含む記事の作成 5-3 動画 PDFへのリンク 5

Size: px

Start display at page:

Download "- 目次 - 1.CMS とは 2.Movable Type とは ( ブログとウェブページの違い ) p1 p1 3. ログイン方法 p1~2 4. テンプレートの選択 p3~4 5. 記事の作成編集 p5~ 新規作成 5-2 画像を含む記事の作成 5-3 動画 PDFへのリンク 5"

ひろみかに
5 years ago
Views:

1 学校 Web ページ作成 (CMS) CMS(MovableType) による学校 Web ページ作成操作手順書 Ver5 平成 29 年 4 月沖縄県立総合教育センター IT 教育班

2 - 目次 - 1.CMS とは 2.Movable Type とは ( ブログとウェブページの違い ) p1 p1 3. ログイン方法 p1~2 4. テンプレートの選択 p3~4 5. 記事の作成編集 p5~ 新規作成 5-2 画像を含む記事の作成 5-3 動画 PDFへのリンク 5-4 表の作成 5-5 編集 5-6 削除 6. カテゴリの作成 p14~15 7. ウェブページの活用 p16~ ウェブページの作成 7-2 ウェブページの活用 8. ウィジェットの活用 p21~ ウィジェットの基本 8-2 ウィジェットの編集 9. ヘッダーフッターの変更 p25~ その他 p29~37 記事一覧及びウェブページ一覧のフィルタ方法 Google カレンダーの埋め込みブログ記事日付の非表示バナーの掲載方法リンクした一太郎ファイルが開かない場合公開後正しく表示されない場合アンカーリンク MTに関するQ&A

3 1.CMS(Content Management System) とは CMS とはウェブサイトを構成するテキストや画像レイアウトなどを一元的に管理し編集構築するコンテンツ管理システムですサーバにインストールされている CMS を使用してあらかじめ用意されているテンプレートを選択簡単な設定を行うことでウェブサイトを構築することが可能です CMS と一般的なホームページ作成ツール ( ホームページビルダーなど ) との大きな違いはサイトの構築環境ですホームページ作成ツールでは PC 上でサイトページなどを編集した後関連する画像ファイルなどとともにサーバにアップします CMS は構築に関連するほとんどの作業をインターネットを通じて管理画面 ( ブラウザ ) 上から行うことができます 2.Movable Type について Movable Type は CMS の一つで記事 ( ブログ ) ウェブページアイテム ( ファイル ) という 3 種類のコンテンツを管理することでウェブサイト全体の効率的な構築が可能ですブログとウェブページの違い記事 ( ブログ ) 随時更新タイムリーな情報提供 ( 新着情報お知らせなど ) 頻繁に更新する新着順に記事がウェブサイトのトップページに表示されるカテゴリや投稿月などが同じコンテンツをアーカイブで分類整理し公開できるウェブページ管理のしやすさ定番情報の提供学校案内学校アクセス進路情報生徒会活動など定番な情報を個別ページで管理ができるフォルダで管理する 3. 管理画面へのログイン (1) 各学校のログインページ URL にアクセスするログイン画面にユーザ名とパスワードを入力しログインする 1

ログインすると下記の画面がでます上 : 学校名編集画面下 :URL 公開画面 (2)

をクリックする再構築後 ( サイトの表示 ) で変更結果の確認を行います再構築を行ったのに

4 ログインすると下記の画面がでます上 : 学校名編集画面下 :URL 公開画面 (2) 学校名をクリックすると管理画面 ( 編集画面 ) がひらきます記事のサブメニュー編集終了後サインアウトサイドメニュー記事など新規作成再構築サイトの表示編集した場合保存 ( 更新 ) などを行った上で再構築が終わったら閉じる ( サイトの再構築 ) をクリックする再構築後 ( サイトの表示 ) で変更結果の確認を行います再構築を行ったのにサイトの表示が変わらない場合はキャッシュが表示されている可能性がありますファンクションキー F5 を押して下さい 2

4. テンプレート ( テーマ ) の選択事前にテンプレート ( テーマ ) を 3 種類準備しています各テーマでブログ全体のデザインを選択することができますカラーはテーマごとに 3 色 ~5 色より選択できます詳細は下記の URL を参照して下さい ( スタイルシートをダウンロードします ) 教育センター IT 教育班沖縄県立学校 CMS(MovableType) 支援ページ

5 4. テンプレート ( テーマ ) の選択事前にテンプレート ( テーマ ) を 3 種類準備しています各テーマでブログ全体のデザインを選択することができますカラーはテーマごとに 3 色 ~5 色より選択できます詳細は下記の URL を参照して下さい ( スタイルシートをダウンロードします ) 教育センター IT 教育班沖縄県立学校 CMS(MovableType) 支援ページ注意サイトを作り込む前にテーマはよく検討して選択して下さいテーマを変更した際アイテムやテキストなどのコンテンツはバックアップされますがウィジェットなどレイアウトが崩れる可能性が大きいです (1) サイドメニューのデザインテーマをクリック (2) 利用可能なテーマから希望のテンプレート ( テーマ ) の適用ボタンをクリック ( 今回の研修は県立沖縄高等学校 A2 のテーマ 1.0 を適用して説明します他に県立沖縄高等学校 B のテーマ 1.0 と県立沖縄高等学校 C のテーマ 1.0 があります ) ここでは再構築は行いません (3) 各テンプレート ( テーマ ) の色を決めたらそのスタイルシートを3つ追加します 1common 2layout 3smartphone (4) サイドメニューのデザイン - テンプレートにてインデックステンプレートの作成をクリック 3

css と入力保存をクリック (7) 上部に次のメッセージが出たら再構築をクリック (8) 同様に (3)23 のスタイルシートを追加 ( サイトの再構築 ) をする (9) 右上

6 (5) テンプレート名 ( ここでは common) を入力後ダウンロードした同名ファイルのタグをコピー & ペーストするテンプレート名は必ず (3) のとおり (6) 同画面下の出力ファイル名に common.css と入力保存をクリック (7) 上部に次のメッセージが出たら再構築をクリック (8) 同様に (3)23 のスタイルシートを追加 ( サイトの再構築 ) をする (9) 右上 ( サイトの表示 ) をクリックしてテーマの変更結果を確認注意各テンプレートに対応したスタイルシートのため別のテンプレートを適用した時点で上記で作成した common layout smartphone は削除されます別のテンプレートに変更した場合は (1)~(8) をやり直して下さい < 実行結果 >A タイプ 2 カラムのグレー 4

5. 記事の作成編集 5-1 記事の新規作成 (1) サイドメニューの記事新規をクリック記事の入力を終えたらコメントのチェックをはずし最後に公開をクリック再構築記事の編集中直前の操作に戻る場合は Ctrl + z のキー操作で戻ります 1 タイトルを入力入力支援ツール 5 最後にクリック 2 記事の内容を入力 3

7 5. 記事の作成編集 5-1 記事の新規作成 (1) サイドメニューの記事新規をクリック記事の入力を終えたらコメントのチェックをはずし最後に公開をクリック再構築記事の編集中直前の操作に戻る場合は Ctrl + z のキー操作で戻ります 1 タイトルを入力入力支援ツール 5 最後にクリック 2 記事の内容を入力 3 カテゴリごとに記事を分類することも可能 ( 該当するカテゴリに ) 追加でカテゴリの新規作成も可能 4 チェックをはずす入力支援ツール文字色フォント種類とサイズ HTML ソースの編集表を挿入したときにアクティブになりますアイテムの挿入記事作成の全画面基本的にはワードの操作と同じですがシステムの裏では同時に HTML の編集が行われています操作方法に慣れる必要があります 5

font-size の pt 数値で文字サイズの変更や color のカラーコードで文字色の変更ができますカラーコードはこちらを参照原色大辞典 http://www.

8 記事の切り取りコピー貼り付けは右クリック操作で行えます Firefox では下記のようにショートカットで行います Ctrl + X 切り取り Ctrl + C コピー Ctrl + V 貼り付け HTML での編集 HTML またはフォーマットをなしに変更します < フォーマット : なしの場合 > HTML コードの font-size の pt 数値で文字サイズの変更や color のカラーコードで文字色の変更ができますカラーコードはこちらを参照原色大辞典公開項目下書き保存 ( 非公開 ) や日時指定の公開ができる日時指定は時間単位で設定 ( 分秒単位は不可 ) 保存せずに実際に公開される状態を確認できる 6

9 1 つの記事が長い場合続きを読む:~ を使いますトップページにタイトルとリード文のみを表示させ記事の本体を続きにすることができます (1) 本文タブの画面にリード文を入力します (2) 続きタブに記事の本体を入力します (3) 公開タブをクリック再構築後サイト確認を行うと次のようになりますクリックすると個別の記事画面が表示されます 7

10 5-2 画像ファイルを含む記事の作成 (1) ブログ記事の作成画面で画像の挿入ボタンをクリック画像の挿入 (2) 画像をアップロードアップロードするファイル名は半角英数字にして下さい (3) ファイルを選択をクリックし画像を選択 8

11 (4) 格納するフォルダを選択しアップロードボタンをクリックここでは新規に平成 28 年度と入力しフォルダを作成作成済みのフォルダを指定する場合は隣のフォルダの選択をクリック ( フォルダ名は年度または記事のカテゴリなど今後の管理を考えて作成するとよい ) (5) ファイルオプション画面では画像の処理方法を指定し完了ボタンをクリック (6) コメントのを外して公開ボタンをクリック 9

12 (7) 再構築後サイト画面で確認 5-3 PDF 動画ファイルへのリンクファイル等をリンクさせる記事を作成する場合の手順 1 該当ファイルをアップロード 2 記事作成 3リンク設定 (1) リンク先のファイルをアップロードしますアップロードするファイル名は半角英数字にして下さい (2) サイドメニューのアイテム新規をクリックアイテムのアップロード画面でファイルを選択ボタンをクリックしファイルを選択 (3) アップロード先を選択アップロードボタンをクリック完了すると画面上に緑色で囲まれたファイルのアップロードが完了しましたメッセージがでます複数ファイルの一括アップロードも可能です 10

13 (4) アップロード先の URL をコピーしますサイドメニューのアイテム一覧をクリックアイテムの管理画面でファイル名をクリック (5) アイテムの埋め込みにある URL をコピー (6) 次にリンク元である記事を作成します関連つけるテキストを選択後リンクボタンをクリック 11 2 リンク 1 関連つけるテキストを選択

サイトの表示が厳しいこともあるため ( 特にスマートフォン ) 表データを pdf ファイルとしてアップし記事からリンクさせる方法をお薦めします (1)

14 (7) リンクの URL に上記 (5) でコピーした URL を貼り付け更新ボタンをクリック 1 URL を貼り付け 2 新しいウィンドウで開く 3 更新 5-4 表の作成注意表作成については下記の方法と Excel 等で表を作成し画像として貼り付ける方法がありますしかしどちらの方法もブログ記事の幅の関係上サイトの表示が厳しいこともあるため ( 特にスマートフォン ) 表データを pdf ファイルとしてアップし記事からリンクさせる方法をお薦めします (1) プログ記事の作成画面で表作成ボタンをクリック表の列数や行数などを指定して挿入ボタンをクリック (2) 表が作成されるので文字等を入力し完成後公開ボタンをクリック 12

15 5-5 記事の編集 (1) サイドメニューのブログ記事一覧をクリック 1 編集する記事のタイトルをクリック (2) 本文などに修正を加えた後更新ボタンをクリック 5-6 記事の削除 (1) サイドメニューのブログ記事一覧をクリック削除するブログの先頭のチェックボックスをクリックし削除ボタンをクリック確認のメッセージが表示されたら OK ボタンをクリック 13

16 6. カテゴリの作成ブログ記事をカテゴリ別に分類することで特定の記事の閲覧が容易になりますカテゴリの作成には新規のブログ記事の作成時に同時に作成する方法 (p4 参照 ) とあらかじめカテゴリを作成する方法がありますこちらではあらかじめカテゴリを作成する方法を取り上げます (1) サイドメニューのカテゴリ一覧をクリック 14

17 (2) ルートの横画面にカテゴリ名を入力し追加ボタン変更を保存をクリック (3) サブカテゴリの作成は該当するカテゴリを選択しサブカテゴリ名を入力追加ボタン変更を保存ボタンをクリック 15

18 再構築後サイト画面で確認をしますカテゴリの並ベ替え上下で並び順の変更左右でメインかサブへの変更ができる 7. ウェブページの活用 7-1 ウェブページの作成 (1) サイドメニューのウェブページ新規作成をクリックしウェブページを作成します作成後公開ボタンをクリック作成方法は記事作成と同様です 16

任意での並べ替えやボタン配置なしのウェブページとして活用することができます 2カラムの場合 (3カラムはp19~) 1.

19 (2) 処理後画面上にウェブページを保存しましたというメッセージがでます (3) 再構築後サイトで確認します 7-2 ウェブページの活用デフォルトではウェブページを作成すると Web ページ上部にボタンが自動配置されそれをクリックすることでウェブページが表示されます ( ボタンの並びは表示名の昇順になっています ) 以下の方法により任意での並べ替えやボタン配置なしのウェブページとして活用することができます 2カラムの場合 (3カラムはp19~) 1. サイドメニューのデザインテンプレートのテンプレートモジュールのヘッドナビをコピーしてバックアップをとります (p3で県立沖縄高等学校 B のテーマ 1.0 を適用した場合ウェブページをコピーして下さい ) テンプレートの複製を選択し GO をクリック

20 2. ヘッドナビをクリックし次のように内容を編集しますタグの3 行目 11 行目を削除 7 行目をウェブページ数 ( 配置したいボタン数 ) コピーしてリンクする URL に書き換えます ( 県立沖縄高等学校 B のテーマ 1.0 を適用した場合ウェブページの 4 行目 12 行目を削除 8 行目をウェブページ数 ( 配置したいボタン数 ) コピーしてリンクする URL に書き換えます編集する行は異なるが下記と内容は同じ ) < 編集前 > 18

21 削除削除配置したいボタン数コピー < 編集後 > 1 <nav> 2 <mt:ifarchivetypeenabled archive_type="page"> 3 <mt:pagesheader> 4 <ul> 例 5 </mt:pagesheader> 6 <li><a href=" 学校長あいさつ </a></li> 7 <li><a href=" 進路指導 </a></li> 8 <li><a href=" 生徒指導部 </a></li> 9 <li><a href=" 保健室 </a></li> 10 <li><a href=" アクセス </a></li> 11 <mt:pagesfooter> 12 </ul> 13 </mt:pagesfooter> href= リンクさせるウェブページの URL 14 </mt:ifarchivetypeenabled> </a> の前にそのウェブページの表示名を入力 15 </nav> 並べたい順リンクさせるウェブページの URL はウェブページのパーマリンクをコピー & ペーストします 19

サイドメニューのデザインテンプレートのテンプレートモジュールにあるウェブページをコピーして

22 リンクさせるウェブページの URL をコピー 3. ヘッドナビ編集後は更新と再構築を行います編集前 ( 自動作成 ) 編集後 4. テンプレートモジュールでタグを書かなければウェブページはボタン化されないので 1 枚のページとして他のウェブページからのリンクなどに活用できます 3 カラムの場合 1. サイドメニューのデザインテンプレートのテンプレートモジュールにあるウェブページをコピーしてバックアップを取って下さい 3 テンプレートの複製を選択し GO をクリック 2 ウェブページのをいれる 2. ウェブページを下記のように編集します任意にウェブページのボタンを並べ替えることが 20

できます元タグの 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.

23 できます元タグの 3~11 行目と 13~19 行目を削除 12 行目をウェブページ数 ( ボタン配置したい数 ) コピーしてリンクする URL に書き換えます < 編集例 > 1 <mt:ifarchivetypeenabled archive_type="page"> 2 <ul> 3 <li><a href=" 学校長あいさつ </a></li> 4 <li><a href=" 進路指導 </a></li> 5 <li><a href=" 生徒指導部 </a></li> 6 <li><a href=" 保健室 </a></li> 7 <li><a href=" アクセス </a></li> 8 </ul> 9 </mt:ifarchivetypeenabled archive_type="page"> 並べたい順 href= リンクさせるウェブページの URL </a> の前にそのウェブページの表示名を入力リンクさせるウェブページ URL はウェブページのパーマリンクをコピー & ペーストしますリンクさせるウェブページの URL をコピー 3. ヘッドナビ編集後は更新と再構築を行います編集前 ( 自動作成 ) 編集後 4. テンプレートモジュールでタグを書かなければウェブページはボタン化されないので 1 枚のページとして他のウェブページからのリンクなどに活用できます 21

24 8. ウィジェットの活用ウィジェットとはブログ画面上で ( 主にサイドバー ) で特定の機能を提供する小規模なコンテンツをいいます以下ウィジットの編集について説明します 8-1 ウィジェットの基本上記画面の構成を確認します (1) デザインウィジットをクリック現在ブログに適用されているスタイルのレイアウトは2カラムなのでここでは 2カラムのサイドバーをクリック 22

(2) 必要なウィジェットを利用可能からインストール済みボックスにドラッグ & ドロップします ( 不要の場合は逆にインストール済から利用可能へ移動させます ) 初期設定では検索カレンダカテゴリ最近のブログ記事が活用できるようになっています変更した場合は変更を保存ボタンをクリックしますドラッグ & ドロップ 8-2

25 (2) 必要なウィジェットを利用可能からインストール済みボックスにドラッグ & ドロップします ( 不要の場合は逆にインストール済から利用可能へ移動させます ) 初期設定では検索カレンダカテゴリ最近のブログ記事が活用できるようになっています変更した場合は変更を保存ボタンをクリックしますドラッグ & ドロップ 8-2 ウィジェットの編集 ( ウェブサイトのリンク ) (1) 他のウェブページへリンクするウィジェットを作成します HTML の知識が必要ですが既に活用されているフリーコードをコピーして書き換えると効率的です (2) デザインウィジェットをクリックここでは最近のブログ記事をコピーして書き換えます最近のブログ記事横のを入れてテンプレートの複製を選択 GO をクリック 23

26 (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=" 教育センター </a></li> 5 <li><a href=" 県立総合教育センター </a></li> 6 <li><a href=" グーグルカレンダ </a></li> 7 </ul> 8 </section> 24

27 (5) 最後に 8-1 ウィジェットの基本を参照に作成したウィジェットをドラッグ & ドロップし変更を保存する (6) 再構築後サイトで確認 25

28 9. ヘッダーフッターの変更 9-1 ヘッダーの変更 (1) ヘッダーの画像を変更する場合アイテム新規画面でその画像をアップロードしますファイルを選択をクリックし画像を選択します (2) これまでと同様アップロード先を選択しアップロードボタンをクリックします (3) アイテム一覧をクリック画像ファイル名を選択 26

common ) (6) ソースコードの 117 行目 ( テーマ B の場合は 13 行目 3カラムの場合は 61 行目 ) の URL

29 (4) アイテムの埋め込みで URL をコピー (5) デザインテンプレートをクリックブログテンプレートの管理画面にあるインデックステンプレート中の layout テンプレートをクリック ( テーマ B の場合は common ) (6) ソースコードの 117 行目 ( テーマ B の場合は 13 行目 3カラムの場合は 61 行目 ) の URL を書き換える書き換える前にソースコードはコピーしてテキストエディタなどに貼り付けて注意適当な名前で保存しておくと安心です 2 カラム :117 行目 (3 カラム :61 行目 ) 27

30 < 書き換え前 > background: url(" center ~ < 書き換え後 > (7) background: 書き換え後変更を保存をクリック再構築を行う url(" ed.jp/items/tulip.jpg") center ~ (7) 書き換え後画面下の保存と再構築をクリック (8) 同様に smartphone テンプレートの 251 行目 (3 カラムの場合は 191 行目 ) を書き換える保存と再構築をクリックサイトを確認します 9-2 ヘッダー文字 ( 学校名 ) フォント変更 p26(5) と同様 layout のテンプレートのコードを変更します 2カラムは125 行目で文字サイズ 133~136 行目で文字の色が変更できます ( テーマ B の場合は35 行目で文字サイズ 54~57 行で文字の色を変更 ) (3 カラムは28 行目で文字サイズ 38~41 行目で文字の色を変更 ) 文字の大きさ Color: の後ろのカラーコードを変更するカラーコードはこちらを参照原色大辞典行目 link 元々の色 134 行目 visited (133 行目と同色指定 ) 135 行目 hover マウスを重ねた時の色 136 行目 active クリックしたとき時の色 28

31 9-2 フッターの変更 (1) デザインテンプレートをクリックブログテンプレートの管理画面にあるテンプレートモジュール中のバナーフッターファイルをクリック (2) コードの一部分 ( の部分 ) を書き換えて変更を保存をクリック再構築後サイトの変更を確認 ( デフォルトは学校名 ) <footer> <address>copyright(c) <a href="<$mt:blogurl$>"><$mt:blogname encode_html="1"$></a> All Rights Reserved.</address> </footer> 29

32 記事一覧及びウェブページ一覧のフィルタ方法 1 一覧画面でフィルタの行の右端にあるのアイコンをクリックしてフィルタ設定を開きます 2 フィルタ項目を選択して下さいのドロップダウンでカテゴリを選択しますカテゴリを選択 3 入力欄が表示されるのでフィルタするカテゴリ名を入力後適用ボタンを押しますフィルタリングするカテゴリを入力 30

ブログ記事日付の非表示ソースコードの編集により可能です変更方法を下記に記載致します変更する場合は事前にソースコードのバックアップもお願い致します ( マニュアルp17 のようにテンプレートをコピー ) 1.

行目にある同じソースを削除 8 行目 : (<abbr class="published" title="<$mt:entrydate format_name="iso8601"$>"><$mt:entrydate format="%x %X"$></abbr>) 10 行目 : <abbr class="published"

ブログ各記事内の日付を非表示にする場合以下の手順でソースコードを表示します [ デザイン ] [ テンプレート ] アーカイブテンプレートのブログ記事 2 カラムでは 37 行目と 39 行目のソースを削除します ( テーマ B の場合は 33 行目と 35 行目を削除 ) 3 カラムでは 38 行目と 40 行目にある同じソースを削除

33 ブログ記事日付の非表示ソースコードの編集により可能です変更方法を下記に記載致します変更する場合は事前にソースコードのバックアップもお願い致します ( マニュアル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) 31

バナーを TOP ページのサイド ( ウィジェット ) に掲載する例を紹介します今回は例として教県第

バナーをアイテムにアップロードします 2. デザインウィジェットウィジェットテンプレートの作成を選択 3.

例として教県第 2382 号掲載の中途退学対策ホームページへのリンクになっています 4 行目は PC 版 5

34 バナーを TOP ページのサイド ( ウィジェット ) に掲載する例を紹介します今回は例として教県第 2382 号掲載の中途退学対策ホームページへのリンクになっています 1. バナーをアイテムにアップロードします 2. デザインウィジェットウィジェットテンプレートの作成を選択 3. バナーウィジェットなど名前をつけ本文を添付のウィジェット data からコピー & ペーストしバナーの URL 部分を書き換えます ( 上記 1. バナーの URL) 保存再構築 < 本文解説 > href=~ バナーをクリックした際のリンク先今回は例として教県第 2382 号掲載の中途退学対策ホームページへのリンクになっています 4 行目は PC 版 5 行目携帯端末版 target="_blank" リンク先を別のウィンドウでひらく img src=~ バナーデータの保存先 ( 上記 1でアップしたアイテムの URL) 4. デザインウィジェットウィジェットセットレイアウトに応じて選択 32

35 各学校の HP レイアウトに応じて選択 3 カラム ( メイン ) は TOP ページの左側 ( サブ ) は右 5. 上記 3 で作成したウィジェットを右側の利用可能からインストール済みへドラッグ & ドロップ変更を保存再構築 6. サイトを表示しバナーの掲載中退 HP へのリンク等を確認して下さい 33

36 公開後正しく表示されない場合 CMS(MovableType) を公開した際キャッシュやテキストでの表示があります (IE はバージョン 10 以降に対応互換表示設定も併せて行って下さい ) Internet Explorer (1) Internet Explorer を起動し右上のアイコンをクリックし互換表示設定をクリック (2) 追加する Web サイト open.ed.jp を確認し追加をクリックし削除するを外し閉じるを 2 カ所外す進路相談システムの互換表示設定は運用支援ページをご参照下さい (2) 閲覧履歴を削除します ( 旧 Web ページのキャッシュが残っている可能性があるため ) 34

37 Firefox Google Chrome 閲覧履歴にをいれる

対象をファイルに保存をクリックし保存 2 IE の上部にあるメニューのツールアドオンの管理表示の下にあるすべてのアドオン

38 リンクした一太郎ファイルが開かない場合一太郎はブラウザを選びます Firefox は表示保存ともOK Chrome は文字化けが発生 InternetExplorer では下記の1または2どちらかで対応お願いします 1 ダウンロードしたい資料の上で右クリックし対象をファイルに保存をクリックし保存 2 IE の上部にあるメニューのツールアドオンの管理表示の下にあるすべてのアドオン右側にある JUSTSYSTEM~ の JSCNTBR BrowserHelper をクリックし有効にする再度 IE を起動資料を選択後 36 表示後保存してください

39 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 へ変更する際の手続き方法 37

40 A.1CMSによる学校 Webページが作成完了後 IT 教育センターネットワークWebページエリア及びメールアカウント利用申請書を提出 ( 申請内容を内容変更に ) 申請書よりダウンロード可能 2 教育センター側で 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> 38

- 目次 - 1.CMSとは 2.Movable Type とは (ブログとウェブページの違い) 3.ログイン方法 4.テンプレートの選択 p1 p1 p1~2 p3~4 5. 記事の作成編集 p5~13 5-1 新規作成 5-2 画像を含む記事の作

- 目次 - 1.CMSとは 2.Movable Type とは (ブログとウェブページの違い) 3.ログイン方法 4.テンプレートの選択 p1 p1 p1~2 p3~4 5. 記事の作成編集 p5~13 5-1 新規作成 5-2 画像を含む記事の作学校 Web ページ作成 (CMS) CMS(MovableType)による学校 Web ページ作成操作手順書 Ver4 平成 27 年 4 月沖縄県立総合教育センター IT 教育班 - 目次 - 1.CMSとは 2.Movable Type とは (ブログとウェブページの違い) 3.ログイン方法 4.テンプレートの選択 p1 p1 p1~2

- 目次 - 1.CMS とは 2.Movable Type とは ( ブログとウェブページの違い ) p1 p1 3. ログイン方法 p1~2 4. テンプレートの選択 p3~4 5. 記事の作成 編集 p5~ 新規作成 5-2 画像を含む記事の作成 5-3 動画 PDFへのリンク 5

- 目次 - 1.CMS とは 2.Movable Type とは ( ブログとウェブページの違い ) p1 p1 3. ログイン方法 p1~2 4. テンプレートの選択 p3~4 5. 記事の作成編集 p5~ 新規作成 5-2 画像を含む記事の作成 5-3 動画 PDFへのリンク 5