学校 CMS 活用マニュアル 作成編 2 contents 1. 日誌の作成 ( 応援メッセージ 学校生活 給食 生徒会 部活動 ) 1 2. トップページへの記事の移動 3 3. 時間割 月行事 給食献立 部活動計画 4 1 PDF ファイル のアップロード 2 画像ファイル のアップロード 4.

学校 CMS 活用マニュアル 作成編 2 contents 1. 日誌の作成 ( 応援メッセージ 学校生活 給食 生徒会 部活動 ) 1 2. トップページへの記事の移動 3 3. 時間割 月行事 給食献立 部活動計画 4 1 PDF ファイル のアップロード 2 画像ファイル のアップロード 4. 応援メッセージ 7 5. スクロール掲示板の変更 9 6. 画像へのリンクの追加 11

1. 日誌の作成 応援メッセージ 学校生活 給食 生徒会 部活動の記事を作成します 操作 1 それぞれのアカウントでログインする 説明 2 記事を作成したいメニューを選ぶ 3 記事を書く をクリックする 4 タイトル を記入する 1

5 写真を挿入する 1 画像の挿入 ( 山のアイコン ) を押す 2 ファイルを選択 を押して 挿入したい画像を選ぶ 3 詳細設定 を押して調整する 位置 左 右 文字の上部など 大きさ 350 ぐらい 高さ は空白 余白 4 文章との隙間ができて見やすい 4 画像の挿入 を押す 補足 CMS の仕様により 2 メガを超えるファイルはアップロードできません 画像ファイルは予め ペイントなどで開いてサイズを小さくしておきます 6 記事を書く 1 写真の右側にカーソルを持っていく 2 文字サイズを決める 12 14 ぐらいが見やすいです 3 記事を書く 4 決定 を押す 7 管理職の承認をもらう 未承認 の状態ではまだウェブ上に公開されていません 校長先生 ( 教頭先生 ) に口頭で伝えて 承認者のアカウントでログインしてもらい 承認ボタンを押してもらいます 2

2. トップページへの記事の移動 学校生活 生徒会等に書かれた日誌の記事をトップページに移動します 日誌を書いても自動的にはトップページに反映されません 手動でコピーして貼り付けます 1 管理者でログインする 操作説明 2 セッティングモード に切り替える 3 トップページに反映させたい記事を選択してコピーする 写真ごとコピーします 文末からドラッグして範囲選択するとやりやすいです 4 トップページに移動して 挿入したい お知らせ ブロックをダブルクリックする 5 編集画面になったら 新しい記事を貼り付ける 6 決定を押して終了する 3

3. 時間割 月行事 給食献立 部活動計画 1 PDF ファイル のアップロード操作 1 管理者でログインする 説明 2 セッティングモード に切り替える 3 メニューから 時間割 ( 月行事 給食 部活動など ) のページに入る 4 PDF をアップロードするブロックの編集ボタンをクリックする 5 ファイルを差し込みたい場所にカーソルを合わせて ファイルの挿入 ボタン ( クリップマーク ) を押す 6 差し込みたい PDF ファイルを選択して 開く を押す あらかじめ時間割の PDF ファイル名を前回までのものと統一した表記にしておくと便利です 文字サイズが揃うように調整します 7 OK を押してファイルをアップロードする 8 決定 を押して作業を終了 補足 2 メガを超えるファイルはアップロードできないのでサイズを小さくしておきます SmartPDF サイトが使いやすいです https://smallpdf.com/jp/pdf-to-jpg 4

2 画像ファイル での時間割 月行事のアップロード 操作 説明 1 時間割の PDF ファイルを JPEG( 画像 ) ファイルに変換する SmartPDF サイトが使いやすいです お気に入りに入れておくと便利です https://smallpdf.com/jp/pdf-to-jpg 1 時間割 PDF ファイルを黄色の枠にドロッ プ 2 ページ全体を抽出 オプションの選 択 3 左下に出るファイルの画像をクリック ダウンロードされる 2 時間割 JPEG ファイルの余白を切り取る 1 ペイントでひらく 2 表示 縮小 で全体が見えるように調整する 3 ホーム 選択 で必要な部分だけ範囲を指定する 4 名前をつけて保存する 3 管理者でログインする 4 セッティングモード に切り替える 5 メニューから 時間割 のページに入る 5

6 すでに表示されている先週の時間割の上でダブルクリックする 7 余白を切り取った時間割の JPEG ファイルをアップロードする 1 画像の挿入 ウィンドウで ファイルの選択 から 余白を切り取った時間割の JPEG ファイルを選ぶ 2 大きさ の 広さ はそのまま 高さ を空白にする サイズが調整されます 3 画像の挿入 をクリックする 4 決定 を押して作業完了 補足 月行事予定 の画像フィアルも同じ手順でアップロードできます 6

4. 応援メッセージ トップページのスライドショーにメッセージ画像を追加します 操作 1 応援メッセージの画像を作成する パワーポイントで作成して 画像として保存すると良いです 画像サイズを 700 395 ピクセルにあわせると 違和感なくスライドショーに差し込むことがができます 説明 2 西原中 CMS に管理者でログインする 3 感謝! 全国からの応援メッセージ! ブロックの編集ボタンを押す 4 フォトアルバム 創造的な復興に向けて 1 アルバムの編集 を押す 2 ( 旗のマーク ) を押す 5 新しく作成した応援メッセージの画像をアップロードする 1 タブ 写真の追加 を押す 2 ファイルの選択 を押す 3 決定 を押す 7

6 必要に応じて写真を並べ替える 1 写真の編集 を押す 2 写真の境目にポインタを合わせると太線になるので それをドラッグして 入れ込みたい箇所 ( 黄線で表示される ) に移動できる 3 決定を押して作業終了 8

5. スクロール掲示板の変更 トップページ上部のスクロール掲示板の内容を書き換えます 動きのある表示で時期的なお知らせや緊急の連絡を強調させます 操作 1 管理者でログインする 説明 2 セッティングモード に切り替える 3 編集ボタンを押す 4 下部の HTML タブを押す 5 文章を書き換える プレビュー タブを押すと 変更後の表示を確認できます 6 決定 を押して終了 補足 font color( 文字の色 ) は 編集 タブの 文字色 で好みの色の番号をコピーして差し替えると変更できます スクロールの速さは scrollamount="9" の数字を書き換えると変更できます 数字が大きいほど早くなります 9

スクロール掲示板のコード 1 以下の部分をお知らせブロックの HTML タブに貼り付ける 2 記入したい文言 の箇所に お知らせしたい内容を記入する <span style="color:rgb(255, 0, 0);" _extended="true"> <marquee style="height:90px;width:646px;" truespeed="true" _extended="true"> <span style="color:rgb(255, 108, 0);" _extended="true"> <span _extended="true"> <span _extended="true"> <span _extended="true"> <span style="font-size:18pt;" _extended="true"> _extended="true"> <h2 _extended="true"> <span style="font-size:24pt;" 記入したい文言 <br /> </h2> </marquee> <span _extended="true"> <span style="font-size:10pt;" _extended="true"> <br /> <br /> 10

6. 画像へのリンクの追加 画像そのものに他のウェブサイトにつながるリンクを貼ります 操作 1 管理者でログインする 説明 2 セッティングモード に切り替える 3 編集ボタンを押す 4 リンクを貼りたい画像をクリックして選択する 5 リンクの挿入 アイコンを押し, リンクを貼りたいアドレスを URL の枠に貼り付ける 6 リンクの挿入 決定 を押して, 作業完了 新しいウィンドウで開かせたいときは, ターゲット の設定を変更しておく 11