WEB ページの構成 パソコン版トップページ構成 PC 版は, ページ幅が 960 ピクセルと決まっていますが, 縦は最大でブログ 10 件分が表示されます 1 件のブログに多く写真を追加すると, 見る側のネット環境によっては表示に時間がかかる場合がありますので注意してください - 1- 幅 :96

Transcription

1 CONTENTS WEB ページの構成... 1 サイト内エリアの特徴... 2 管理メニューへのログイン... 4 管理メニューの見方... 5 ページ ブログの作成 編集 ( 新規作成の場合 )... 6 既存ページの修正 行事カレンダーの内容追加... 11

2 WEB ページの構成 パソコン版トップページ構成 PC 版は, ページ幅が 960 ピクセルと決まっていますが, 縦は最大でブログ 10 件分が表示されます 1 件のブログに多く写真を追加すると, 見る側のネット環境によっては表示に時間がかかる場合がありますので注意してください - 1- 幅 :960 ピクセル ヘッダー * 右側 ログイン で管理画面を表示 スライダー * 数枚の画像を切り替えて表示 px TOP のみ表示 カウンター * PC サイトのみ バナーエリア 1 小中一貫教育 * ブログ一覧 * 部活動ほか メニューエリア 学校通信 その他おたより PTA 活動 いじめ防止基本方針 * メインメニュー * 水戸市統一です 必要のない項目は非表示にする お知らせ欄 * 学校通信や, 今後の予定, お願いなど必要に応じて掲載 ブログは極力掲載しない ブログ欄 * 日々の出来事を写真等とともに定期的に掲載 PC レイアウトは幅が 700px 程度 * スマホレイアウトは約 300~450px カレンダー * メインメニューの行事カレンダーと同じ バナーエリア 2 市内統一バナー * ほか フッター * 変更しない メインメニューの項目 学校紹介 学校行事 学校自慢 インフォメーション 学区リンク * 学校概要 * 行事カレンダー * 地域自慢 * アクセス * 中学校 グランドデザイン * 年間行事一覧 * 輝く卒業生 サイトマップ * 小学校 学校要覧 * 校内案内 * サイトポリシー * 幼稚園 沿革 * 問い合わせ先 * 校歌 * * 印のついたメニューや項目は, 非表示もしくは変更不可

3 - 2- スマートフォン版トップページ構成 スマートフォン版は, ページ幅が携帯の表示サイズに依存していますが,320 ピクセル ~450 ピクセル程度で, 縦は最大でブログ 10 件分が表示されます 1 件のブログに多く写真を追加すると, 見る側のネット環境によっては表示に時間がかかる場合がありますので注意してください また, 写真等の掲載に罫線を利用すると PC 版との表示のズレがでるため利用しないようにします ヘッダー * デジタル校章入りログイン不可 幅 :400px 前後 スライダー * 数枚の画像を切り替えて表示縮小スタイル メニューエリア 小中一貫コーナー 掲示板 バナーエリア 2 ブログ一覧 * 市内統一バナー * ほか 行事カレンダー PC サイトと連携 お知らせ欄 * PC サイトと連携 ブログ欄 * PC サイトと連携写真がリサイズされ PC 版とは異なる カウンター * スマートフォンサイトのみ フッター * 変更しない サイト内エリアの特徴 ヘッダー部 メインメニュー PC 版 学校名の左側に校章が入ります 文字サイズでサイトの文字の大きさを変更可能です ログイン から, 管理者メニューに移動できます ログイン中は, 編集ページ が表示されます サブメニューについては, メインメニューの項目 を参考にしてください スマホ版 スマホ版は, タイトル上部に表示されている MENU ボタンからメニュー表示させます

4 - 3- スライダー 複数枚の画像を, 一定時間で切り替え表示ができます おすすめスライダー 校内案内, イベントの告知, 季節感を表現など カウンター PC 版用 スマホ版 PC 版とスマホ版が別々に用意されていて, それぞれのサイトでカウントしています トータルの件数を確認するときは, 両方のカウントを合計してください バナーエリア バナーエリア 1 は学校独自, バナーエリア 2 は市内共通です 必要と思われるバナーについては, ご相談ください メニューエリア 学校オリジナルのメニューを表示 メニュー数が多いと, スマートフォンサイトでのメニュー領域の割合が高く, ブログが見えづらくなるため, メニューの数は少なくしています 必要のあるメニューについては, ご相談ください カレンダー 行事カレンダーは, 上部のメインメニュー内の 行事カレンダー 項目と同様です 入力方法は, 行事カレンダーの入力 を確認してください お知らせ欄 お知らせ欄 は, ページ編集やブログ編集の際に, ページ設定 タブで お知らせ 表示するとすることで, 表示されます ブログ記事を表示させるとリンク先の動きがわかりづらくなるので, 極力避けてください また, 日付をコントロールすることで, 古い情報を非表示にできます 入力方法は, ページ ブログの作成 編集 で確認してください

5 - 4- ブログ欄 PC 版レイアウト 約 700 ピクセル幅 ブログ掲載は 文字列と写真 地図 ファイル などから構成されています 罫線表を多用すると スマートフォンサイトへ影響 がありますので確認しながら作成してください スマートフォン版レイアウト 約 400 ピクセル前後に縮小 入力の方法は ページ ブログの作成 編集 で確認してください フッター 学校住所 TEL メールが表示されています 英語表記を追加しても構いません フッターからもログインが可能 管理メニューへのログイン ログイン画面 ヘッダー右側 またはフッター左側から ログイ ン します ログイン名 パスワードについては 各学校配布 のものを使用してください わからない場合には 総研までご連絡ください ログイン中のヘッダーには 編集ページ ログ オフ と表示されます

6 - 5- 管理メニューの見方 管理メニュー ( 管理者権限 ) 編集 投稿者の場合は, 赤枠のメニューのみが表示されます 1 トップページ編集全体のレイアウトを編集する際に利用します PC 版, スマホ版の 2 種類を編集できます スライダーの変更等は自由に修正可能ですが, レイアウトの修正はご依頼ください 2 ページ編集 固定ページの作成や, お知らせ欄 へ表示させる記事の作成に利用します 3 ブログ編集日々の出来事を, 写真等を追加しながら作成できます 基本的にこちらをご利用ください 4 パスワード変更リセットすることができませんので, 漏えいの疑いがある場合を除いて, 初期パスワードのままご利用ください 5 アクセシビリティ設定共通ルールで設定してありますので, 変更しないでください 6 カテゴリー編集掲載に必要なカテゴリー分類をしておきますが, 特に増やす必要はありません 7 祝祭日編集祝日を年単位で設定してできます 学校単位での休日設定も, こちらで追加設定します 行事カレンダーに反映されます 8 元号編集ブログ下部に表示される, 日付の元号表記を修正できます 祝祭日の編集 運動会の振替休日など, 学校の休日の追加は, 新規 から行います 上部に表示された 年 を間違えないようにしてください

7 - 6- ページ ブログの作成 編集 ( 新規作成の場合 ) ページ ブログ編集 基本情報 表題をわかりやすく入れる 掲載期間が調整できる 未来の日付 その日に公開される過去の日付 掲載の順番を変更できる今日の日付 今日から掲載される 掲載期間を調整できる お知らせ 行事の当日までブログ等 無期限 本文 本文は, 文章のベタ打ちで入力すること ただし, や会話文の前後で改行することで, 読みやすくなる 環境依存文字 ( や 2) を利用しない 全角の空白を入れない 少し間を調整したい場合には, 半角空白を使う Shift + スペースで, 半角スペースが入ります ツールバーについて覚える 文章を字下げするインデント機能 2 イメージ, 表, 地図, 関連資料を文章中に挿入する機能 3 書式を解除する機能

8 1 インデント機能 先に文字列を選択しておく - 7- WEB ページ内で, 全角の空白を使うとチェックの際に削除されてしまいます そのため, インデント ( 左下げ機能 ) を利用して段落ごとに寄せて読みやすくします 使用例 会話文 箇条書きの項目等 2-1 イメージ ( 画像 ) の挿入 先にカーソルを配置してから, イメージボタンをクリックする 警告 写真の挿入は, あらかじめ写真のサイズを下げておく必要があります WEB 上のリサイズ機能は, 写真表示を小さくする機能で, 実サイズは下がりません そのまま掲載すると, 拡大して利用される場合がありますので注意してください 文章中の写真を挿入したい箇所に, カーソルを表示した状態で,[ イメージ ] ボタンをクリックします [ 画像の挿入 ] から,[ 選択 ] をクリックして画像を選択します 代替文字には, ファイル名が表示されますが, 必ずわかりやすく入力し直してください 実サイズが大きいと WEB 上で利用される場合があります 横幅 1300px を超える画像は,PC 画面全表示サイズです 表示サイズについては, ブログ幅を考慮して, 並べて 600 ピクセルを目安としてください PC 版の場合 1 枚のみ 600px 程度 2 枚並べる 300px*2 3 枚並べる 200px*3 4 枚並べる 150px*4 スマートフォン版で閲覧した場合は, 約 400px 以下の画像はそのまま表示され, サイズに入らない画像は, 閲覧幅に縮小表示されます 写真を並べて表示する際に, 間を開けるには半角スペースを利用してください 写真の配置に表組みを利用しないでください

9 表の挿入 文章中の表を挿入したい箇所に, カーソルを表示した状態で,[ 表 ] ボタンをクリックします 先にカーソルを配置してから, 表ボタンをクリックする [ 表のプロパティ ] から,[ 桁数 ][ 列数 ] を入力して [OK] をクリックします [ 幅 ] に数値を入力すると, 表示幅を調整できます 表の編集 表内で[ 右クリック ] するとコマンドが表示され, 行や列を [ 挿入 ][ 削除 ] することができます 表の右下にカーソルを配置して [ タブ ] キーを押すと, 次の行が作成されます 2-3 地図の挿入 文章中の地図を挿入したい箇所に, カーソルを表示した状態で,[ 地図 ] ボタンをクリックします [ 住所 ] と [ マーカー ] の位置を追加することができます

10 - 9- 地図を削除する場合は, 地図の右側をクリックし, カーソルを表示してから,[BackSpace] キーで削除できます 地図内で [ 右クリック ] すると,[ 地図挿入 ] のプロパティ画面が再表示されるので, 編集が可能です 2-4 関連資料の挿入 関連資料とは,PDF ファイルや,Excel で作成したファイル,Word ファイルなどを指します 一太郎で作成したファイルに関しては, アップロードしても相手側が閲覧できない可能性が高いので, 行わないでください 先に文字列を選択してから, 関連資料ボタンをクリックする 資料をクリックさせたい箇所の文字列を選択してから [ 関連資料 ] をクリックします ファイル名が, アップロードファイル名に変換されますが, そのまま [OK] してください 文字列を修正すると正しくアップロードされません アップするファイルを間違えたら リンクした文字列 ( 青い文字 ) にカーソルを置いてから, リンク解除ボタンを押します 間違えたリンクが残留しますので,PDF のアイコンは 1 回ごとに必ず削除してください リンクが複数行に表示される 文字列を選択した際に, ( 改行 ) を選択した状態で, リンクを貼ってしまうと複数行にわたって表示されることがあります 一度カーソルを置いて を削除すると, 文字列がつながります

11 - 10- カテゴリーの登録 ブログ編集の場合 基本的にカテゴリーを設定しないでください 幼小中一貫 PTA 活動 などのアイコンが表示され連携している場合には, カテゴリーを設定します ページ編集の場合 連携しているもののみ, カテゴリーを設定します 学校紹介 のカテゴリーは, 固定ページを分類するために作成してあります 通常は利用しないようにしてください ページ設定 [ 検索キーワード ] を入力します [ キーワード抽出 ] をクリックすると, 自動で文字列を拾います [ お知らせ ] の使い方今後の行事予定のお知らせや, お便り一覧の更新状況を伝えるために利用します ブログの記事は お知らせ に表示しない 学校だより等 表示する new 無期限 お知らせ等 表示する new 表示期限を設定 無期限 [ 基本情報 ] タグの [ 掲載期間 ] を変更することで, いつでも最新の情報に修正できます 新着欄を作成していませんので, チェックをしても反映されません 行事カレンダー 通常は設定しませんが, お知らせ記事に, 期間があり行事カレンダーに表示をさせたい場合にのみ指定します 例 テスト期間中のため部活がありません などのお知らせの場合, 期間を設けてカレンダーへ表示ができます WEB 上に公開する 公開するにして,[ 登録 ] する

12 - 11- 既存ページの修正 ページ編集 ログイン後, ページ編集で作成した画面には, 右上に [ 編集 ] ボタンが表示されます [ 識別 No.] の数字の左側へ を入れてから, [ 修正 ] をクリックすると, 記事編集画面へ移動します 修正中に [ 基本情報 ] タグの [ 掲載期間 ] を最新日付に修正することで, 最新情報として お知らせ 欄へ掲載することができます 学校だよりなどは, この機能を活用ください 行事カレンダーの内容追加 ログイン後, 行事カレンダーを表示します [ イベント情報一覧を表示 ] に切り替え, 各日の [ 編集 ] ボタンから, イベントを追加できます 学校の祝日などを赤色表示させる場合には, 管理者メニューの [ 祝祭日編集 ] から行ってください ログインは管理者ユーザーで行ってください ページのレイアウト変更, メニューの変更等は, 水戸市総合教育研究所 ICT 支援員までご連絡ください TEL