静的ページの入力

Size: px

Start display at page:

Download "静的ページの入力"

あきたけひのと
7 years ago
Views:

1 めぐろすくナビ更新マニュアル平成 25 年 4 月 8 日株式会社まちづくり三鷹

2 目次ログイン... 3 ログイン方法... 3 記事の更新 ( すくなび記事 / キッズレポート )... 4 新規作成... 5 記事の入力... 7 タイトルと内容の入力...7 入力時の注意点改行の方法... 8 段落番号の設定箇条書きの設定リンクの設定スタイルの設定フォーマットの設定セルの結合ヘッダの設定ファイルの管理ファイルのアップロードファイルの貼付添付画像のサイズ変更記事設定分野を設定する属性を設定する新着記事表示記事一覧表示イベントカレンダーを設定する表示端末を設定する地図を表示する表示中のマップ情報マーカーの設定マップの設定公開日時設定表示日時公開開始日時公開終了日時承認設定承認者記事を登録する下書き保存承認待ち

3 プレビュー画面の確認登録した記事の編集今月のめぐろすくナビ ( すくナビアルバム ) の更新画像ファイルのアップロード新規作成画像ファイルの登録フォルダファイル登録した画像ファイルの編集削除編集削除アップロードした画像ファイルの追加編集 44 本文の編集今月のめぐろすくナビバックナンバーの追加修正複製 ( 更新用 ) の作成複製 ( 更新用 ) の編集本文の編集承設定承認者保存 59 下書き保存承認待ち

ログインログイン方法 1. 下記の URL にアクセス http:// sukunavi.megurokodomo.

4 ログインログイン方法 1. 下記の URL にアクセス sukunavi.megurokodomo.net/_system/login 2. ZOMEKI ログイン画面にユーザ ID とパスワードを入力し [ ログイン ] をクリックユーザ名パスワードログイン情報 3

5 記事の更新 ( すくなび記事 / キッズレポート ) 枠で囲まれた範囲に表示されます赤 [ すくなび記事 ] 緑 [ イベント情報 ] 青 [ キッズレポート ] 4

6 新規作成 1. コンセプトをすくなび記事に変更イベント情報の場合はイベント情報キッズレポートの場合はキッズレポートに変更 (1) (2) 2. [ コンテンツ ] をクリック 5

7 3. コンテンツ名 [ すくなび記事 ( 分野 ) ] をクリックイベント情報の場合はイベント情報記事キッズレポートの場合は [ キッズレポート ] をクリック (3) 4. [ 新規作成 ] をクリック (4) 6

8 記事の入力タイトルと内容の入力 1. タイトルを入力タイトルは必須項目です (1) 2. 内容の入力コマンドボタンを使用して入力した文字列に装飾や配置の設定変更を行います (2) コマンドボタンここに文字を入力 7

9 入力時の注意点改行の方法改行の方法は 2 通りありますが表示方法が異なります改行 [Enter] キーを押す段落内改行 [Shift] キーを押しながら [Enter] キーを押す <HTML 表記 > [Enter] ~ ( 段落 ) [Enter] で改行を行った場合改行された部分の前と後で段落が変わります [Shift]+[Enter] ( 改行 ) [Shift]+[Enter] で改行を行った場合その段落の中で改行されますプレビュー表示約 1 行分の行間が空きますほとんど行間は空きません 8

入力時の注意点環境依存文字 ( 機種依存文字 ) について記事の内容に環境依存文字が入力されているとエラーとなります環境依存文字とは閲覧者の使用環境に影響し特定の環境以外では表示が変化したり正常に表示できなくなる文字のことです上記のメッセージが表示された場合は内容から環境依存文字を削除するか別の表記 (1 1.

10 入力時の注意点環境依存文字 ( 機種依存文字 ) について記事の内容に環境依存文字が入力されているとエラーとなります環境依存文字とは閲覧者の使用環境に影響し特定の環境以外では表示が変化したり正常に表示できなくなる文字のことです上記のメッセージが表示された場合は内容から環境依存文字を削除するか別の表記 (1 1. など ) に置き換えることで解決しますまた環境依存文字はインターネット上で利用できる検出ツールで簡単に探すことができます参考さぶみっと!JAPAN 機種依存文字チェッカーコマンドボタンの機能解説一覧ボタンボタン名解説ソース HTML ソースを直接編集することができます保存下書きとして保存されますタイトルの入力が必須新しいページ白紙の状態になります 9

11 プレビューテンプレート ( 雛形 ) 切り取り作成している資料登録をブラウザ (WEB 表示 ) で確認できますテンプレートを挿入します選択した範囲を切り取りますコピー選択した範囲をコピーします貼り付けプレーンテキスト貼り付け元に戻すコピー ( または切り取り ) をした内容を貼り付けますコピー ( または切り取り ) をした内容を書式無しで貼り付けます直前の操作を取り消して元に戻しますやり直し直前の [ 元に戻す ] 操作を取り消しますボタンボタン名解説検索文章から指定した文字を検索します置き換え文章から指定した文字を検索し別の文字に置き換えますすべて選択入力されている文字や画像をすべて選択します太字選択した文字を太字にします斜体選択した文字を斜体にします下線選択した文字に下線を引きます打ち消し線選択した文字に打ち消し線を引きます添え字選択した文字が下付き文字になります上付き文字選択した文字が上付き文字になりますフォーマット削除選択した文字に設定した書式を解除します段落番号選択した段落に段落番号を設定します参照 - リストの設定 10

12 箇条書き選択した段落に箇条書きを設定します ( リストマークは黒丸など ) インデント解除選択したインデントが解除されますインデント選択した段落に対してインデント ( 字下げ ) が設定されますブロック引用選択した段落に対して字下げ ( 引用文章 ) が設定されます左揃え選択した段落に対して文字列の配置を左に揃えます ( 初期状態 ) 中央揃え選択した段落に対して文字列の配置を中央に揃えます右揃え選択した段落に対して文字列の配置を右に揃えます両端揃え選択した段落に対して両端揃えになりますボタンボタン名解説リンク挿入 / 編集選択した文字にリンクを設定します参照 - リンクの設定リンク解除アンカー挿入 / 編集イメージ選択したリンクを解除します文字を選択した状態でアイコンをクリックすると文字にアンカーが挿入されます画像の挿入または編集をします Flash テーブル横罫線絵文字特殊文字挿入スタイルフォーマット Flash の挿入又は挿入した Flash の情報編集 ( 詳細設定 ) ができますテーブル ( 表 ) の挿入又は挿入したテーブルの編集 ( 詳細設定 ) ができます参照 - 表の作成 : 挿入アイコンをクリックすると横罫線が挿入されますアイコンをクリックすると絵文字パレットが表示され絵文字を挿入できますアイコンをクリックすると特殊文字パレットが表示され特殊文字を挿入できます選択した文字 ( または段落 ) に登録されている書式を設定します参照-スタイルの設定選択した段落に見出しを設定します参照 -フォーマットの設定 11

13 フォント選択した文字の種類を変更しますサイズ選択した文字の大きさを変更しますテキスト色背景色最大化選択した文字の色を変更します文字を選択した状態でアイコンをクリックするとカラーパレットが表示され文字の背景に好きな色を設定できますアイコンをクリックすると内容のコマンド欄と入力欄がブラウザ全体に表示されます 12

14 段落番号の設定 1. 書式を設定したい文字列をドラッグで範囲選択 2. [ 段落番号 ] をクリック (2) (1) 段落番号を解除する場合はもう一度 [ 段落番号 ] をクリックしてください [Enter] と [Shift]+[Enter] の違い Enter の場合段落番号を設定した文末で [Enter] を押すと次の行に番号が挿入されますこの位置で [Enter] Shift + Enter の場合段落番号を設定した文末で [Shift]+[Enter] を押すと次の行にカーソルが移動しますが番号は挿入されませんこの位置で [Shift]+[Enter] 13

15 プレビュー表示 14

16 箇条書きの設定 1. 書式を設定したい文字列をドラッグで範囲選択 2. [ 箇条書き ] をクリック (2) (1) 箇条書きを解除する場合はもう一度 [ 段落番号 ] をクリックしてください [Enter] と [Shift]+[Enter] の違い Enter の場合箇条書きを設定した文末で [Enter] を押すと次の行に番号が挿入されますこの位置で [Enter] Shift + Enter の場合段落番号を設定した文末で [Shift]+[Enter] を押すと次の行にカーソルが移動しますが番号は挿入されませんこの位置で [Shift]+[Enter] 15

17 プレビュー表示 16

URL にサイト URL http://www.city.meguro.tokyo.

18 リンクの設定 1. リンクを設定したい部分をドラッグで範囲選択 2. [ リンク挿入 / 編集 ] をクリック (2) (1) 3. URL にサイト URL と入力 4. [OK] をクリック (3) は [ プロトコル ] で選択するので含まない (4) 17

19 外部サイトのリンクについて外部サイトにリンクする場合はアクセスした際閲覧しているウィンドウ ( タブ ) とは別に新しいウィンドウ ( タブ ) を開いて外部サイトを表示しましょう [ ターゲット ] タブのターゲットのをクリックしドロップダウンリストから [ 新しいウィンドウ (_ 空白 )] を選択 18

20 プレビュー表示クリッククリック外部サイトは新しいウィンドウ ( タブ ) に表示 19

21 スタイルの設定 1. 書式を設定したい文字列をドラッグで範囲選択 2. [ スタイル ] のをクリック (2) (1) 3. ドロップダウンリストから該当する書式を選択 (3) ブロックスタイルは段落全体(~) に書式が設定されますインラインスタイルはドラッグで選択した文字列に書式が設定されます 20

22 フォーマットの設定 1. 書式を設定したい文字列をドラッグで範囲選択 2. [ 標準 ( フォーマット )] のをクリック (2) (1) 3. ドロップダウンリストから該当する書式を選択 (3) 21

23 プレビュー表示 22

24 表の作成 1. 挿入したい場所にクリックでカーソルを置き [ テーブル ] をクリック (1) クリック 2. [ テーブルプロパティ ] タブの行列を入力 3. [ テーブルの概要 ] を入力し幅の値を削除 4. [OK] をクリック (2) (3) (3) テーブルの概要( サマリー ) とは表の情報を要約したもので表のタイトルのようなものです (4) 5. 挿入された表に文字を入力 (5) 23

25 セルの結合 1. 結合したいセルをドラッグで範囲選択 (1) 2. 範囲選択したセルの上で右クリックし [ セル ] [ セルの結合 ] をクリック右クリック (2) 24

26 ヘッダの設定 1. ヘッダの設定をする表内で右クリックし [ セル ] [ テーブルプロパティ ] をクリック右クリックの位置は表内ならどこでも構いません右クリック (1) 2. [ テーブルプロパティ ] タブのテーブルヘッダ (th) のをクリックしドロップダウンリストから [ 初めの列のみ ] を選択 3. [OK] をクリック (2) (3) 25

27 ファイルの管理ファイルのアップロード記事に挿入する画像ファイルや PDF ファイル等はファイル管理へアップロードする必要があります 1. [ 開く ] をクリック (1) 2. ファイルの [ 参照 ] をクリック (2) 3. アップロードするファイルを選択し [ 開く ] をクリック (3) 26

28 4. 表示ファイル名に日本語でファイルの名前を入力 5. [ アップロード ] をクリック (4) (5) 下部にファイルがアップロードされますファイルの貼付添付 6. ファイルを挿入したい場所をクリック (6) 7. アップロードしたファイルの [ 貼付 ] または [ 添付 ] をクリック画像を挿入する場合は [ 貼付 ] PDF などのファイルを挿入する場合は [ 添付 ] をクリックします (7) (7) 27

29 ファイルが挿入されます [ 貼付 ] をクリックした場合 [ 添付 ] をクリックした場合画像のサイズ変更マウスポインターを使う方法ハンドル挿入した画像をクリックすると画像の周囲八箇所に白い ( ハンドル ) が表示されますこのハンドルにマウスポインターを合わせるとマウスポインターが双方向矢印に変わります双方向矢印の状態でドラッグするとサイズが変更できます角のハンドルを使用すると縦横比が変わりません 28

このような大きな画像ファイルをアップロードするとサーバのディスク容量を圧迫しシステムトラブルの原因ともなりますめやすとして幅 700

30 ダイアログボックスを使う方法クリック編集したい画像を選択し [ イメージ ] をクリックしますこのダイアログボックスでもサイズの変更ができますそのほか代替テキストの変更配置枠線リンクの設定ができます幅高さの値を変更します大きな画像はあらかじめ縮小するデジタルカメラ等で撮影された写真のサイズは数千ピクセルの大きさになる場合がありますこのような大きな画像ファイルをアップロードするとサーバのディスク容量を圧迫しシステムトラブルの原因ともなりますめやすとして幅 700 ピクセルを超えるものはあらかじめリサイズしてからアップロードしてください小さな画像を拡大しない古い携帯電話等で撮影された写真はパソコンの画面では非常に小さく見えますこうした小さな画像を編集画面で引き伸ばすと非常に粗い画像となりますのでご注意ください 29

4 の枠内 ) での表示設定をしますこの項目を非表示に設定した場合でも通常の記事一覧ページには表示されます記事一覧表示 4.

31 記事設定地域の項目は使用しません分野を設定する 1. 分野のをクリックしドロップダウンリストから該当する項目を選択 (1) 属性を設定する 2. 属性のをクリックしドロップダウンリストから該当する項目を選択 (2) 新着記事表示 3. 新着記事一覧 (P.4 の枠内 ) での表示設定をしますこの項目を非表示に設定した場合でも通常の記事一覧ページには表示されます記事一覧表示 4. 記事一覧ページでの表示設定をします上記 3. の手順で表示に設定した場合でもこの項目を非表示にすると新着記事一覧を含む全ての記事一覧ページで非表示となりますただしイベントカレンダーの一覧は除く 30

32 イベントカレンダーを設定するイベント情報記事のみ 5. [ イベントカレンダー表示 ] の [ 表示 ] を選択 6. [ イベント日付 ] のテキストボックスをクリックしイベントの日付を選択クリック 7. 選択した日付が挿入されます 8. 記事公開後自動的にイベントカレンダーに表示されます 31

33 関連ワードを設定する 9. 入力フォームをクリックし文字を入力 (9) 関連ワードは 3 つまで入力できます関連ワードを設定する場合は後に検索するために統一した表記で登録してください例 ) [ 子どもこども ] [ 障がい障害 ] など関連記事を設定する 10. 関連記事のをクリックしドロップダウンリストから該当する項目を選択 (10) 表示端末を設定する 11. 該当する項目をクリック (11) 基本的には全てに表示を選択してください 32

34 地図を表示する表示中のマップ情報 1. 地名で検索に地名または住所を入力し検索をクリック検索をクリックすると検索した位置がマップの中央に移動します 1 2. マップから目的の位置を確認しクリッククリックした位置に水色のマーカーが付きます 2 クリック 33

35 マーカーの設定 3. マーカーの位置を確認し [ クリックした座標を設定する] をクリッククリックするとマーカーの色が赤くなり座標が設定されます 4. マーカーの設定の名称を入力 (3) 座標が設定されます (4) 2 つ以上のマーカーを設定する場合は再度 2.~4. の手順を繰り返しますマップの設定 5. マップ名を入力 (5) 34

36 6. マップの座標と縮尺を調整座標( 表示位置 ) はマップ上をドラッグで調整します縮尺はマップ左上のボタンで調整します (6) 7. [ 現在の座標と縮尺を設定する ] をクリック (7) 座標縮尺が設定されます 35

公開日時設定表示日時表示日時をクリックするとカレンダーが表示されるので記事作成日を設定新着記事一覧等では日付が新しいもの程上部に表示されますクリック公開開始日時公開終了日時記事の公開期間を設定することができます [ 公開開始日時 ] 設定した日時になると

37 公開日時設定表示日時表示日時をクリックするとカレンダーが表示されるので記事作成日を設定新着記事一覧等では日付が新しいもの程上部に表示されますクリック公開開始日時公開終了日時記事の公開期間を設定することができます [ 公開開始日時 ] 設定した日時になると自動的に記事が公開状態になりますただし設定された記事の状態が公開待ちになっている必要があります [ 公開終了日時 ] 設定した日時になると自動的に記事が非公開状態になります公開開始日時公開終了日時ともに表示日時と操作手順は同じです必要に応じて設定してください 36

38 承認設定承認者 1. 承認者をクリックで選択 2. [ 追加 ] をクリック (1) (2) クリック承認者を解除する場合は右フォームに表示されている承認者を選択し [ 除外 ] をクリックします記事を登録する下書き保存 [ 下書き保存 ] は WEB ページに公開されません保留の記事や作成途中の記事は下書き保存にしましょう承認待ち [ 承認待ち ] は承認者が設定されている場合のみ使用できます承認待ちにした記事は設定した承認者から承認されないと WEB へ公開できません 37

39 プレビュー画面の確認実際に WEB ページに表示される画面の確認を行います 1. 登録した記事を確認 (1) 2. プレビューの [PC] をクリック 3. プレビュー画面を確認 38

40 登録した記事の編集 1. 編集したい記事の [ 詳細 ] をクリック編集できる記事はログインしているアカウントと同じ所属のものに限ります (1) 2. [ 編集 ] をクリック (2) 3. 記事を編集新規作成の画面と編集画面は画面構成作業手順ともに同じです 39

41 フォトコーナーの更新赤枠で囲んだ箇所を編集します画像ファイルのアップロード新規作成 1. コンセプトをトップページに変更 2. [ データ ] をクリック (1) (2) 40

42 3. [ ファイル ] をクリック 4. [ 新規作成 ] をクリック (3) (4) 画像ファイルの登録フォルダ 1. フォルダのをクリックしドロップダウンリストから [album: 今月のめぐろすくナビアルバム ] を選択 (1) 41

43 ファイルアップロードする画像ファイルの横幅は 180px 以内にリサイズしてください 2. ファイルの [ 参照 ] をクリック (2) 3. アップロードするファイルを選択し [ 開く ] をクリック (3) 4. 表示ファイル名に日本語でファイルの名前を入力 5. [ 登録する ] をクリック (4) (5) 6. 一覧に画像ファイルが追加されたことを確認 (6) 42

44 登録した画像ファイルの編集削除 1. 編集または削除したい画像ファイルの [ 詳細 ] をクリック (1) 編集 [ 編集 ] をクリックすると画像ファイルの登録画面とほぼ同じ画面が表示されます登録内容を修正し [ 編集する ] をクリックすると編集が完了します削除 [ 削除 ] をクリックすると登録した画像ファイルが一覧から削除されます 43

45 アップロードした画像ファイルの追加編集 1. コンセプトをトップページに変更 2. [ デザイン ] をクリック (1) (2) 3. [ ピース ] をクリック 4. ピース名子どものいる風景の [ 詳細 ] をクリック (3) (4) 5. [ 編集 ] (5) 44

本文の編集本文以外は変更しないでください 1. 本文の img[2] = '<img src="/_files/00000420/img_pict03.

46 本文の編集本文以外は変更しないでください 1. 本文の img[2] = '<img src="/_files/ /img_pict03.jpg" alt=" 写真投稿 omatu3 号 " /> 写真投稿 omatsu3 号さん '; をドラッグで範囲選択し右クリック [ コピー ] を選択 ([Ctrl]+[C]) (1) 右クリック [ コピー ] ([Ctrl]+[C]) 2. ドラッグで選択した範囲の後ろを [Enter] で改行し右クリック [ 貼り付け ] を選択 ([Ctrl]+[V]) この位置で [Enter] 右クリック [ 貼り付け ]([Ctrl]+[V]) 45

47 3. 貼り付けた img[2] = '<img src="/_files/ /img_pict03.jpg" alt=" 写真投稿 omatu3 号 " /> 写真投稿 omatu3 号さん '; の修正 img[2] img[3] omatu3 号さん sample01 さん 4. ファイルの [ 開く ] をクリック (4) 5. 一覧から追加する画像ファイルの [URL] をクリックし右クリック [ コピー ] を選択 ([Ctrl]+[C]) (5) 6. コピーされた [URL] を img[3] = '<img src="/_files/ /img_pict03.jpg" alt=" 写真投稿 sample01" /> 写真投稿 sample01 さん '; の /_files/ /img_pict03.jpg の箇所をドラッグで範囲選択し右クリック [ 貼り付け ] を選択 ([Ctrl]+[V]) (6) 7. [ 編集する ] をクリック上記以外の部分を修正削除してしまった場合は [ 編集する ] をクリックせずに [ 一覧 ] をクリックして作業をやり直してください (7) 46

48 追加した画像ファイルはトップページの今月のめぐろすくナビにランダムで表示されます 47

49 今月のめぐろすくナビバックナンバーの追加修正複製 ( 更新用 ) の作成 1. コンセプトをトップページに変更 2. [ ディレクトリ ] をクリック (1) (2) 48

50 3. タイトル今月のめぐろすくナビバックナンバーのファイル名 [gallery] をクリック (3) 4. タイトル今月のめぐろすくナビバックナンバーの [ 詳細 ] をクリック (4) 5. [ 複製 ( 更新用 )] をクリック (5) 49

51 6. [OK] をクリック (6) 複製 ( 更新用 ) の編集 1. タイトル今月のめぐろすくナビバックナンバー ( 更新用 ) の [ 詳細 ] をクリック (1) 2. [ 編集 ] をクリック (2) 50

52 本文の編集本文以外は変更しないでください 1. 本文の一番上にある月のめぐろすくナビの先頭で [Enter] 改行を 2 回行う (1) この位置で 2 回 [Enter] 改行 2 行の間隔を空ける 51

53 2. 月のめぐろすくナビのテキストを範囲選択し右クリック [ コピー ]([Ctrl]+[C]) (2) 右クリック [ コピー ]([Ctrl]+[V]) 3. 改行で空いた行の一行目にコピーしたテキストを右クリック [ 貼り付け ]([Ctrl]+[V]) で貼り付け月の箇所を更新時の月に変更 (3) 52

54 4. 2 行目の空白行にカーソルを配置しコマンドボタンの [ テーブル ] をクリック (4) 53

55 5. [ テーブルプロパティ ] に以下のように設定し [OK] をクリック行 2 の倍数 ( 画像と投稿者名のため ) 最低値 2 列最低値 1 テーブルヘッダなしボーダーサイズ 0 行揃えなし上記以外は基本的に空白となります ( 初期値が入っている場合は値を削除してください ) 必要に応じて任意に調整してください (5) 54

56 6. ファイルの [ 開く ] をクリックしファイルの一覧を表示 (6) 7. 一覧から該当する画像ファイルの URL をクリックし右クリック [ コピー ]([Ctrl]+[C]) (7) の手順で挿入されたテーブルの上段セルにカーソルを配置しコマンドボタン [ イメージ ] をクリック (8) 上段に配置 55

57 9. [ イメージプロパティ ] に以下のように必要に応じて設定し [OK] をクリック URL 7. の手順でコピーした URL を右クリック [ 貼り付け ]([Ctrl]+[V]) 代替テキスト投稿者: さんを入力行揃え < なし > 上記以外は基本的に空白となります ( 初期値が入っている場合は値を削除してください ) 必要に応じて任意に調整してください (9) 56

58 10. セルの下段に投稿者 : さんを入力 (10) 11. 投稿者 : さんをドラッグで範囲選択し [ サイズ ] から [16px] を選択クリック 57

59 承設定承認者 1. 承認者をクリックで選択 2. [ 追加 ] をクリック (1) (2) クリック承認者を解除する場合は右フォームに表示されている承認者を選択し [ 除外 ] をクリックします 58

60 保存下書き保存 [ 下書き保存 ] は WEB ページに公開されません保留の記事や作成途中の記事は下書き保存にしましょう承認待ち [ 承認待ち ] は承認者が設定されている場合のみ使用できます承認待ちにした記事は設定した承認者から承認されないと WEB へ公開できません 59

地域ポータルサイト「こむねっとひろしま」

地域ポータルサイト「こむねっとひろしま」 5.1. エディタとは? NetCommons の全モジュールで共通する編集画面です 5.2. 通常のエディタの使い方 (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17)(18) (19) (20) (21) (22) (23) (24) (1) 書式設定左からフォントサイズスタイルを設定するためのプルダウンメニューです