新CMSによる

新しい学校Webページ作成

新しいバージョンのCMS(Movable Type ver.7)による学校Webページの作成方法を動画で説明しています。各動画の番号に沿って作業を進めてください。動画は今後追加していく予定です。

※動画は「設定」から「再生速度」の変更が可能です。

基本操作編

1.サインインとサインアウト.mp4

1.サインインとサインアウト(3分24秒)

新Webページにサインインする際、動画ではブラウザのアドレス欄に「new.test.open.ed.jp」と入れていますが、これは検証用サイトのURLです。各学校に「new.○○○.open.ed.jp」(○○○の部分は現在の学校HPのURLと同じ)といった「new」が付いたURLを配布しています。

管理画面へのサインインとサインアウト(PDF)

2.テーマの適用.mp4

2.テーマの適用(8分11秒)

新Webページの作成を始める前に、ページ全体のテーマ(デザイン)決めます。後からテーマの変更を行うと、レイアウトが初期状態に戻ってしまので、最初で確実にテーマを決めてください。

テーマの選択と適用(PDF)

3.サイトロゴの作成.mp4

3.サイトロゴの作成(7分33秒)

4.スマートフォン用メニューボタンの表示.mp4

4.スマホ用メニューボタンの表示
(5分23秒)

動画内で使用されているスマートフォン用の「メニュー」「閉じる」ボタン画像(pngファイル)は、Teamsの「新学校Webページ移行支援」チームの「ファイル」→「4.スマホ用メニューボタンの表示」フォルダの中にあります。

スマホ用メニューボタンの表示(PDF)

5.スライドショーの設定.mp4

5.スライドショーの設定(8分00秒)

動画内で「スライドに使用する画像の高さは560ピクセル」と説明していますが、560だと画像の上下が少し切れるようです。画像の高さは400ピクセル程度で調整してください。

スライドショーの設定(PDF)

6.トップページの整理①メインの整理.mp4

6.トップページの編集①メイン部分の整理(11分15秒)

7.トップページの整理②「アーカイブへ」の非表示.mp4

6.トップページの編集②「アーカイブへ」の非表示(4分36秒)

8.サイドバーの編集①基本の操作.mp4

7.サイドバーの編集①ウィジェットに関する基本操作(5分49秒)

8.サイドバーの編集②「最近の記事」.mp4

7.サイドバーの編集②「最近の記事」の編集(11分38秒)

動画内で「『書き換え用』ファイルは『沖縄県立学校ネットワーク情報』チームにある」と説明していますが、新学校Webページ移行支援」チームの「ファイル」→「7.サイドバーの編集②「最近の記事」の編集」フォルダの中にもあります。

8.サイドバーの編集③「リンク」.mp4

7.サイドバーの編集リンク」の編集

(7分48秒)

8.フッターの編集.mp4

8.フッターの編集(5分59秒)

9.記事の作成①文字入力について.mp4

9.記事の作成①文字の入力について

(12分19秒)

文字の入力について現行バージョンと特に大きな変更はありませんが、「見出し2」を設定した場合、文字の背景に自動で色が着く設定となっています。(「見出し2」は動画後半で説明)

記事の作成(文字の入力とカテゴリ)(PDF)

9.記事の作成②表の挿入.mp4

9.記事の作成②表の挿入(13分11秒)

9.記事の作成③画像の挿入.mp4

9.記事の作成③画像の挿入(14分26秒)

10.ウェブページの作成.mp4

10.ウェブページの作成(7分27秒)

11.ナビゲーションボタンの設定①ボタンの文字の変更.mp4

11.ナビゲーションの設定①ボタンの文字の変更(6分34秒)

11.ナビゲーションボタンの設定②メニューの文字の変更.mp4

11.ナビゲーションの設定②ドロップダウンメニューの文字の変更(6分58秒)

11.ナビゲーションの設定③ウェブページへのリンク.mp4

11.ナビゲーションの設定③ウェブページへのリンク(13分42秒)

「相対パス」の説明で、「○○.html」と入力している箇所があります。相対パスは「./○○.html」と説明されることもありますが、同じ階層のファイルにアクセスする場合「./」は省略可能です。

絶対パスと相対パス | HTML 入門 | レッスン | CreatorQuest 

相対パスの書き方(特に`./`と `../`)を段階的に学ぶ記事 - Qiita 

11.ナビゲーションの設定④PDFファイルのリンク.mp4

11.ナビゲーションの設定④PDFファイルへのリンク(9分12秒)

トピックスの表示の変更方法

トピ1.記事全文の表示.mp4

1.記事全文の表示(5分24秒)

現在の学校Webページと同じように、ページトップのトピックスに記事の全文表示する方法の説明です。

トピ2.省略された文の表示.mp4

.省略された文の表示(7分42秒)

ページトップのトピックスに記事の省略された文(IT教育班のページを参照 http://it.edu-c.open.ed.jp/ 表示する方法説明です

応用編

応1.リンクに画像を利用.mp4

1.サイドバーのリンクに画像を利用

(15分46秒)

<注意!>
動画内で「./画像ファイル名」と説明していますが、他のページに移動すると画像の表示が消える現象が生じたため、現在ダウンロードするtxtファイル内のコードを「/」(ドットを消してスラッシュのみ)に変更しています。/画像ファイル名」だと画像が消える現象は生じませんので、ダウンロードしたコードを動画の説明通りにコピー&ペーストしてください。

新ページ移行に関する操作

移行1.記事のコピー方法.mp4

1.記事のコピー方法(9分57秒)

現在のページある記事(1つの記事)を新ページにコピーする基本的な操作方法を説明しています。
※現在のページにあるウェブページを新ページにコピー場合もこの方法になります。

移行2.全記事のエクスポートとインポート.mp4

2.記事のエクスポートと新ページへのインポート(7分14秒)

現在のページある記事(全記事)を一括でエクスポートし、新ページにインポートする方法を説明しています。
※一括でエクスポート、インポートできるのは「記事」のみです。「ウェブページ」については、新ページにインポートする機能は無いようです。

移行3.アセットの一括ダウンロードについて.mp4

3.アイテムの一括ダウンロード(8分02秒)

現在のページにあるアイテムを一括でダウンロードする方法を説明しています。