WEB ページの構成 ... 1 サイト内エリアの特徴 ... 2 管理メニューへのログイン... 4 管理メニューの見方 ... 5 ページ・ブログの作成・編集（新規作成の場合） ... 6 既存ページの修正 ... 11 行事カレンダーの内容追加 ... 11
CONTENTS
WEB ページの構成
●パソコン版トップページ構成
PC 版は，ページ幅が 960 ピクセルと決まっていますが，縦は最大でブログ 10 件分が表示されます。
1 件のブログに多く写真を追加すると，見る側のネット環境によっては表示に時間がかかる場合がありますので
注意してください。
○メインメニューの項目
▶学校紹介 ▶学校行事 ▶学校自慢 ▶インフォメーション ▶学区リンク* 学校概要* 行事カレンダー* 地域自慢* アクセス* 中学校 グランドデザイン* 年間行事一覧* 輝く卒業生 サイトマップ* 小学校 学校要覧* 校内案内* サイトポリシー* 幼稚園 沿革* 問い合わせ先* 校歌* *印のついたメニューや項目は，非表示もしくは変更不可。 ◎カウンター* PC サイトのみ ◎ヘッダー* 右側「ログイン」で管 理画面を表示 ◎バナーエリア① ・小中一貫教育* ・ブログ一覧* ・部活動ほか ◎お知らせ欄* 学校通信や，今 後の予定，お願い など必要に応じて 掲載 ※ブログは極力掲 載しない ◎ブログ欄* 日 々 の 出 来 事 を 写真等とともに定 期的に掲載 PC レイアウトは幅 が 700px 程度 *スマホレイアウトは 約 300~450px ◎フッター* 変更しない ◎カレンダー* メインメニューの行 事カレンダーと同じ ◎メインメニュー* 水戸市統一です。 必要のない項目は 非表示にする ◎スライダー* 数枚の画像を切り 替えて表示 980×200px TOP のみ表示 ◎メニューエリア ・学校通信 ・その他おたより ・PTA 活動 ・いじめ防止基本方針* ◎バナーエリア② ・市内統一バナー* ・ほか 幅：960 ピクセル●スマートフォン版トップページ構成 スマートフォン版は，ページ幅が携帯の表示サイズに依存していますが，320 ピクセル～450 ピクセル程度で，縦は最大でブ ログ 10 件分が表示されます。1 件のブログに多く写真を追加すると，見る側のネット環境によっては表示に時間がかかる場合 がありますので注意してください。 また，写真等の掲載に罫線を利用すると PC 版との表示のズレがでるため利用しないようにします。 サイト内エリアの特徴 ●ヘッダー部 ・学校名の左側に校章が入ります。 ・文字サイズでサイトの文字の大きさを変更可能で す。 ・「ログイン」から，管理者メニューに移動できます。 ログイン中は，「編集ページ」が表示されます。 ●メインメニュー 【PC 版】 【スマホ版】 ・サブメニューについては，「○メインメニューの項 目」を参考にしてください。 ・スマホ版は，タイトル上部に表示されている MENU ボタンからメニュー表示させます。 ◎ヘッダー* デジタル校章入り ログイン不可 ◎バナーエリア② ・ブログ一覧* ・市内統一バナー* ・ほか ◎行事カレンダー PC サイトと連携 ◎メニューエリア ・小中一貫コーナー ・掲示板 ◎スライダー* 数枚の画像を切り 替えて表示 縮小スタイル ◎お知らせ欄* PC サイトと連携 ◎ブログ欄* PC サイトと連携 写真がリサイズされ PC 版とは異なる ◎カウンター* スマートフォンサイトの み ◎フッター* 変更しない 幅：400px 前後
●スライダー ・複数枚の画像を，一定時間で切り替え表示が できます。 【おすすめスライダー】 校内案内，イベントの告知，季節感を表現など。 ●カウンター 【PC 版用】 【スマホ版】 ・PC 版とスマホ版が別々に用意されていて，それぞれのサイトでカウントしています。 ※トータルの件数を確認するときは，両方のカウン トを合計してください。 ●バナーエリア ・バナーエリア①は学校独自，バナーエリア②は市 内共通です。 ※必要と思われるバナーについては，ご相談くださ い。 ●メニューエリア ・学校オリジナルのメニューを表示。 ※メニュー数が多いと，スマートフォンサイトでのメニ ュー領域の割合が高く，ブログが見えづらくなる ため，メニューの数は少なくしています。 必要のあるメニューについては，ご相談ください。 ●カレンダー ・行事カレンダーは，上部のメインメニュー内の「行 事カレンダー」項目と同様です。 ※入力方法は，「行事カレンダーの入力」を確認 してください。 ●お知らせ欄 ・「お知らせ欄」は，ページ編集やブログ編集の際 に，「ページ設定」タブで「お知らせ」 ☑表示すると することで，表示されます。 ※ブログ記事を表示させるとリンク先の動きがわかり づらくなるので，極力避けてください。 また，日付をコントロールすることで，古い情報 を非表示にできます。 ※入力方法は，「ページ・ブログの作成・編集」で 確認してください。
●ブログ欄 【PC 版レイアウト】 約 700 ピクセル幅 【スマートフォン版レイアウト】 約 400 ピクセル前後に縮小 ・ブログ掲載は，文字列と写真，地図，ファイル などから構成されています。 ・罫線表を多用すると，スマートフォンサイトへ影響 がありますので確認しながら作成してください。 ※入力の方法は，「ページ・ブログの作成・編集」 で確認してください。 ●フッター ・学校住所，TEL，メールが表示されています。 ・英語表記を追加しても構いません。 ・フッターからもログインが可能。
管理メニューへのログイン
●ログイン画面 ・ヘッダー右側，またはフッター左側から「ログイ ン」します。 ・ログイン名，パスワードについては，各学校配布 のものを使用してください。わからない場合には， 総研までご連絡ください。 ・ログイン中のヘッダーには，「編集ページ」「ログ オフ」と表示されます。管理メニューの見方
●管理メニュー（管理者権限） ① トップページ編集 全体のレイアウトを編集する際に利用します。PC 版，スマホ版の 2 種類を編集できます。 ※スライダーの変更等は自由に修正可能ですが，レイアウトの修正はご依頼ください。 ② ページ編集・ 固定ページの作成や，「お知らせ欄」へ表示させる記事の作成に利用します。 ③ ブログ編集 日々の出来事を，写真等を追加しながら作成できます。基本的にこちらをご利用ください。 ④ パスワード変更 リセットすることができませんので，漏えいの疑いがある場合を除いて，初期パスワードのままご利用ください。 ⑤ アクセシビリティ設定 共通ルールで設定してありますので，変更しないでください。 ⑥ カテゴリー編集 掲載に必要なカテゴリー分類をしておきますが，特に増やす必要はありません。 ⑦ 祝祭日編集 祝日を年単位で設定してできます。学校単位での休日設定も，こちらで追加設定します。行事カレンダーに反映されま す。 ⑧ 元号編集 ブログ下部に表示される，日付の元号表記を修正できます。 ●祝祭日の編集 編集・投稿者の場合は，赤枠のメニュ ーのみが表示されます。 運動会の振替休日など，学校の休日 の追加は，「新規」から行います。 上部に表示された「年」を間違えないよう にしてください。ページ・ブログの作成・編集（新規作成の場合）
●ページ・ブログ編集 【基本情報】 ・表題をわかりやすく入れる。 ・掲載期間が調整できる。 未来の日付 その日に公開される 過去の日付 掲載の順番を変更できる 今日の日付 今日から掲載される ・掲載期間を調整できる。 お知らせ 行事の当日まで ブログ等 無期限 【本文】 ・本文は，文章のベタ打ちで入力すること。ただ し，「。」や会話文の前後で改行することで，読 みやすくなる。 ・環境依存文字 （♡や②）を利用しない。 ・「 」全角の空白を入れない。少し間を調整した い場合には，半角空白を使う。 ※Shift + スペースで，半角スペースが入ります。 ◎ツールバーについて覚える ① 文章を字下げするインデント機能。 ② イメージ，表，地図，関連資料を文章中に挿入する機能。 ③ 書式を解除する機能。①
②
③
①インデント機能 ・WEB ページ内で，全角の空白を使うとチェックの 際に削除されてしまいます。 そのため，インデント（左下げ機能）を利用して 段落ごとに寄せて読みやすくします。 【使用例】 ・会話文 ・箇条書きの項目等 ②-1 イメージ（画像）の挿入 【警告】 写真の挿入は，あらかじめ写真のサイズを下げて おく必要があります。 WEB 上のリサイズ機能は，写真表示を小さくする 機能で，実サイズは下がりません。 そのまま掲載すると，拡大して利用される場合があ りますので注意してください。 ・文章中の写真を挿入したい箇所に，「｜」カーソ ルを表示した状態で，［イメージ］ボタンをクリック します。 ・[画像の挿入]から，[選択]をクリックして画像を 選択します。 ・表示サイズについては，ブログ幅を考慮して，並 べて 600 ピクセルを目安としてください。 PC 版の場合 1 枚のみ 600px 程度 2 枚並べる 300px＊2 3 枚並べる 200px＊3 4 枚並べる 150px＊4 ※スマートフォン版で閲覧した場合は，約 400px 以下の画像はそのまま表示され，サイズに入ら ない画像は，閲覧幅に縮小表示されます。 ※写真を並べて表示する際に，間を開けるには半 角スペースを利用してください。 ※写真の配置に表組みを利用しないでください。 実サイズが大きいと WEB 上で 利用される場合があります。 横幅 1300px を超える画像 は，PC 画面全表示サイズです。 代替文字には，ファイル名が表示されます が，必ずわかりやすく入力し直してくださ い。 先に文字列を選択しておく。 先にカーソルを配置してから，イメ ージボタンをクリックする。
②-2 表の挿入 ・文章中の表を挿入したい箇所に，「｜」カーソル を表示した状態で，［表］ボタンをクリックします。 ・[表のプロパティ]から，[桁数][列数]を入力して [OK]をクリックします。 ・[幅]に数値を入力すると，表示幅を調整できま す。 【表の編集】 ・表内で[右クリック]するとコマンドが表示され，行や 列を[挿入][削除]することができます。 ②-3 地図の挿入 ・文章中の地図を挿入したい箇所に，「｜」カーソ ルを表示した状態で，［地図］ボタンをクリックし ます。 ・[住所]と[マーカー]の位置を追加することができま す。 表の右下にカーソルを配置して [タブ]キーを押すと，次の行が作成 されます。 先にカーソルを配置してから，表 ボタンをクリックする。
・地図を削除する場合は，地図の右側をクリックし， 「｜」カーソルを表示してから，[BackSpace]キーで 削除できます。 ②-4 関連資料の挿入 ・関連資料とは，PDF ファイルや，Excel で作成した ファイル，Word ファイルなどを指します。 ※一太郎で作成したファイルに関しては，アップロード しても相手側が閲覧できない可能性が高いので， 行わないでください。 ・資料をクリックさせたい箇所の文字列を選択してから [関連資料]をクリックします。 ※リンクが複数行に表示される 【アップするファイルを間違えたら】 リンクした文字列（青い文字）にカーソルを 置いてから， リンク解除ボタンを押しま す。 間違えたリンクが残留しますので，PDF のア イコンは 1 回ごとに必ず削除してください。 地図内で[右クリック]すると，[地 図挿入]のプロパティ画面が再表 示されるので，編集が可能で す。 先に文字列を選択してから，関 連資料ボタンをクリックする。 ファイル名が，アップロードファイル名に変 換されますが，そのまま[OK]してくださ い。 文字列を修正すると正しくアップロードさ れません。 文字列を選択した際に，「⤵（改行）」を選 択した状態で，リンクを貼ってしまうと複数行に わたって表示されることがあります。 一度カーソルを置いて「⤵」を削除すると，文 字列がつながります。
【カテゴリーの登録】 ブログ編集の場合 ・基本的にカテゴリーを設定しないでください。 ・「幼小中一貫」「PTA 活動」などのアイコンが表示さ れ連携している場合には，カテゴリーを設定します。 ページ編集の場合 ・連携しているもののみ，カテゴリーを設定します。 ※「学校紹介」のカテゴリーは，固定ページを分類 するために作成してあります。 通常は利用しないようにしてください。 【ページ設定】 ※新着欄を作成していませんので，チェックをしても反映されません。 ・[検索キーワード]を入力します。[キーワード抽出]を クリックすると，自動で文字列を拾います。 ・[お知らせ]の使い方 今後の行事予定のお知らせや，お便り一覧の更新 状況を伝えるために利用します。 学校だより等 お知らせ等 ☑表示する ☑表示する ☑new ☑new 表示期限を設定 ☑無期限 □無期限 ・[基本情報]タグの[掲載期間]を変更することで， いつでも最新の情報に修正できます。 【行事カレンダー】 ・通常は設定しませんが，お知らせ記事に，期間が あり行事カレンダーに表示をさせたい場合にのみ指定 します。 【例】 「テスト期間中のため部活がありません。」 などのお知らせの場合，期間を設けてカレンダーへ表 示ができます。 ●WEB 上に公開する ・☑公開する にして，[登録]する。 ブログの記事は「お知らせ」に表示しない。
