和 光 市 市 民 活 動 支 援 サイト 新 掲 示 板 (FCKエディタ)について 通 常 ホームページを 作 成 するには HTML という 専 門 言 語 の 知 識 が 必 要 ですが FCK エディ タを 使 えば ワードやエクセルと 同 じ 感 覚 で タイトル 文 字 を 太 字 にしたり 表 を 作 成 したり 画 像 を 挿 入 したり 更 にはワードで 作 成 した 文 章 スタイルそのままにコピー&ペースト 機 能 でコ ピーすることもできます (WEB ページであるという 制 約 から 完 全 に 同 じ 見 た 目 にはなりません ) 新 掲 示 板 の 主 な 変 更 点 旧 掲 示 板 新 掲 示 板 画 像 リンクで 表 示 文 章 中 に 表 示 可 能 文 字 サイズや 色 文 変 更 できるがHTMLのタグで 表 示 プレビュー 画 面 に すぐに 反 映 字 など ワードからのコピ ー&ペースト 文 字 情 報 のみコピー 可 能 文 章 スタイルまでコピー 可 能 その 他 絵 文 字 やフラッシュなども 扱 えるようになりました
目 次 1. FCKエディタの 概 要... 3 1.1. FCKエディタでできること... 3 1.2. FCKエディタを 使 用 するには... 3 2. FCKエディタを 使 ってみる... 4 3. 具 体 的 な 使 用 方 法... 5 3.1. 画 像 + 文 章... 5 3.2.1 画 像 のアップロード... 6 3.2.2 文 章 の 装 飾... 13 3.2.3 文 章 内 にリンクを 設 定 する... 14 3.2.4 画 像 と 文 章 の 配 置 を 変 える... 17 3.2.5 画 像 に 対 する( 画 像 のサムネイル:クリックすると 拡 大 するように)リンクを 設 定 する 21 3.2. 表 を 配 置 する... 25 3.3. 箇 条 書 きを 作 成 する... 28 2
本 書 では 和 光 市 市 民 活 動 支 援 サイト( 以 下 本 システム)についての 説 明 をおこないます 1. FCK エディタの 概 要 1.1. FCK エディタでできること FCK エディタでは 以 下 のような 事 ができます 文 字 の 装 飾 (フォントサイズの 変 更 や 文 字 色 の 指 定 ) 画 像 の 貼 り 付 け 文 字 の 配 置 指 定 ( 右 寄 せ 左 寄 せなど) 表 の 配 置 など Microsoft 社 製 のワードやエクセルと 同 じ 感 覚 で 文 章 の 作 成 ができます 個 々の 機 能 に 関 しては 以 降 の 説 明 で 触 れていきます 1.2. FCK エディタを 使 用 するには FCK エディタを 使 用 するには Webブラウザの JavaScript が 有 効 となっている 必 要 があります ( 通 常 の Web ブラウザでは 有 効 となっています ) 3
2. FCK エディタを 使 ってみる 早 速 ですが FCK エディタを 使 ってみましょう まずは ログインを 行 い 所 属 グループのグルー プホームの 掲 示 板 で 新 しく メッセージ 作 成 を 選 択 して 下 さい 図 1 FCK エディタでの 掲 示 板 入 力 画 面 4
3. 具 体 的 な 使 用 方 法 下 記 ページを 例 として 基 本 的 な 使 用 方 法 を 示 します (A) 画 像 と 文 章 を 並 べて 表 示 する (B) 表 を 使 う (C) 箇 条 書 き (A) 画 像 + 文 章 (B) 表 それでは 順 次 (1)~(3)を 作 成 していきます 箇 条 書 き (C) 3.1. 画 像 + 文 章 最 初 の(A)は 左 寄 せの 画 像 と 右 に 回 りこんだ 文 章 で 成 り 立 っています( 下 の 図 を 参 照 ) また 文 章 の 一 部 を 斜 体 にし さらにリンクも 張 っています 画 像 斜 体 となっている 文 字 リンクとなっている 文 字 5
まずは 画 像 のアップロードをしてみます 3.2.1 画 像 のアップロード メニューバー 左 下 にある イメージ 挿 入 / 編 集 のアイコンをクリックします クリック! メニューバー 編 集 ウインドウ サーバーブラウザー ボタンをクリックします 6
新 たなウィンドウで Resources Browser が 立 ち 上 がります 画 面 右 下 の 参 照 ボタンをクリック します クリック! ファイルの 選 択 ウィンドウが 立 ち 上 がります アップロードしたい 画 像 を 選 択 します 注 意!! 現 在 画 像 ファイルに 日 本 語 を 含 むファイルをアップロードすると 正 しく 画 像 が 表 示 さ れません アップロードするファイル 名 を 半 角 英 数 字 にてアップロードして 下 さい 7
画 面 右 下 にある Upload ボタンをクリックします クリック! 8
ファイル 名 をクリックします アップロードしたファイルのファイル 名 とファイルサイズが 表 示 さ れます クリック! 9
URL 欄 にファイル 名 が 挿 入 され プレビュー 画 面 にアップロードした 画 像 が 表 示 されていることを 確 認 してください 代 替 テキスト 欄 に 画 像 の 簡 単 な 説 明 を 入 力 し 確 認 ができたら OK ボタンを 押 してください 編 集 ウインドウに 画 像 が 配 置 されます アップロードした 画 像 が 表 示 されます! 10
アップロードした 画 像 が 大 きい 場 合 そのまま 表 示 すると 大 き 過 ぎる 場 合 があります( 本 来 はアッ プロードする 前 に 画 像 処 理 ソフトなどを 用 いてサイズを 調 整 していただくことを 推 奨 します) FCK エディタ 上 で 画 像 サイズを 変 更 する 場 合 は まず 変 更 する 画 像 をクリックします すると 四 隅 とその 中 間 点 が 白 い 点 で 表 示 されるので その 点 をドラッグすることで 画 像 のサイズを 調 整 するこ とができます クリック & ドラック! 11
リサイズ 後 の 画 面 12
3.2.2 文 章 の 装 飾 次 に 文 章 の 入 力 を 行 います この 段 階 では 画 像 と 文 章 の 配 置 ( 回 り 込 み)が 下 図 のようになってい ます 学 名 の 部 分 を 斜 体 にしてみましょう まず 斜 体 にする 部 分 の 文 字 を 選 択 して 13
斜 体 ボタンをクリックします クリック! 3.2.3 文 章 内 にリンクを 設 定 する 文 章 内 にリンクを 設 定 する 時 も 前 項 と 同 様 に 範 囲 指 定 を 行 ってからメニューバーで 指 定 します リンクを 設 定 する 文 章 内 の 単 語 を 選 択 し メニューバーの リンク 挿 入 / 編 集 ボタンをクリック します クリック! 14
するとハイパーリンクウィンドウが 開 きますので 設 定 したいリンク 先 の URL を URL 部 分 に 入 力 します URL を 入 力 したら OK ボタンをクリックします クリック! 15
範 囲 選 択 していた 部 分 に 下 線 が 引 かれ 青 色 に 変 わります これで 文 章 内 にリンクを 設 定 できました 16
3.2.4 画 像 と 文 章 の 配 置 を 変 える ここでは 文 章 全 体 が 画 像 の 右 に 回 り 込 む 設 定 を 行 います まずは 画 像 を 選 択 して イメージ 挿 入 / 編 集 アイコンをクリック( 又 は 画 像 を 右 クリック) イメージプロパティ を 選 択 して イメージプロパティウインドウを 新 しく 開 きます クリック! 又 は 右 クリックしてイ メージプロパテ ィをクリック! イメージプロパティウインドウにある 行 揃 え で 左 を 選 択 します プレビュー 画 面 で 文 章 が 画 像 の 右 に 回 り 込 むのを 確 認 して OK ボタンを 押 します クリック! 17
これで 文 章 全 体 が 画 像 の 右 に 配 置 されました 行 揃 え は 左 以 外 に 以 下 の 様 な 選 択 項 目 があります 選 択 項 目 (なし) 下 部 ( 絶 対 的 ) 中 央 ( 絶 対 的 ) ベースライン 下 中 央 右 テキスト 上 部 上 文 章 と 画 像 の 表 示 位 置 関 係 文 章 とイメージの 位 置 に 変 化 はありません 最 初 の1 行 のみが 画 像 の 右 下 に 配 置 され あとは 画 像 の 下 に 回 り 込 む 見 栄 えになります その 行 のテキストや 画 像 の 中 央 に 該 当 の 画 像 を 合 わせる 見 栄 えとなりま す その 行 の 文 章 のベースラインと 画 像 の 下 端 を 合 わせます 文 字 の 下 端 に 画 像 の 下 端 を 合 わせます その 行 のベースラインに 画 像 の 中 央 を 合 わせます 右 を 指 定 した 場 合 右 上 から 始 まり 画 像 の 下 に 回 りこみます 最 も 背 の 高 いテキストの 上 端 に 画 像 を 合 わせます その 行 の 最 も 高 い 要 素 ( 画 像 か 文 章 )の 位 置 に 合 わせます 18
イメージプロパティの 行 揃 え にて 何 も 指 定 しない 場 合 文 章 とイメージの 位 置 に 変 化 はありません 表 示 されてい る 画 像 と 文 章 がそのまま 表 示 されます イメージプロパティの 行 揃 え にて 下 部 ( 絶 対 的 ) を 指 定 した 場 合 下 部 ( 絶 対 的 ) では 最 初 の1 行 のみが 画 像 の 右 下 に 配 置 され あとは 画 像 の 下 に 回 り 込 む 見 栄 えになります (HTML の img タグに 対 する align 属 性 に absbottom を 指 定 した 場 合 と 同 じ 見 栄 えになります ) イメージプロパティの 行 揃 え にて 中 央 ( 絶 対 的 ) を 指 定 した 場 合 中 央 ( 絶 対 的 ) を 指 定 した 場 合 その 行 のテキストや 画 像 の 中 央 に 該 当 の 画 像 を 合 わせる 見 栄 えとなります (HTML の img タグに 対 する align 属 性 に absmiddle を 指 定 した 場 合 と 同 じ 見 栄 えになります ) イメージプロパティの 行 揃 え にて ベースライン を 指 定 した 場 合 ベースライン を 指 定 した 場 合 その 行 の 文 章 のベー スラインと 画 像 の 下 端 を 合 わせます 基 本 的 に 下 と 同 じだが 文 字 と 画 像 が 下 ぞろえになります (HTML の img タグに 対 する align 属 性 に baseline を 指 定 した 場 合 と 同 じ 見 栄 えになります ) イメージプロパティの 行 揃 え にて 下 を 指 定 した 場 合 下 を 指 定 した 場 合 文 字 の 下 端 に 画 像 の 下 端 を 合 わせ ます ベースライン と 同 じ 様 な 見 栄 えとなります (HTML の img タグに 対 する align 属 性 に bottom を 指 定 した 場 合 と 同 じ 見 栄 えになります ) 19
イメージプロパティの 行 揃 え にて 中 央 を 指 定 した 場 合 中 央 を 指 定 した 場 合 その 行 のベースラインに 画 像 の 中 央 を 合 わせます (HTML の img タグに 対 する align 属 性 に middle を 指 定 した 場 合 と 同 じ 見 栄 えになります ) イメージプロパティの 行 揃 え にて 右 を 指 定 した 場 合 右 を 指 定 した 場 合 右 上 から 始 まり 画 像 の 下 に 回 りこ みます (HTML の img タグに 対 する align 属 性 に middle を 指 定 した 場 合 と 同 じ 見 栄 えになります ) イメージプロパティの 行 揃 え にて テキスト 上 部 を 指 定 した 場 合 テキスト 上 部 を 指 定 した 場 合 最 も 背 の 高 いテキスト の 上 端 に 画 像 を 合 わせます (HTML の img タグに 対 する align 属 性 に texttop を 指 定 した 場 合 と 同 じ 見 栄 えになります ) イメージプロパティの 行 揃 え にて 上 を 指 定 した 場 合 上 を 指 定 した 場 合 その 行 の 最 も 高 い 要 素 ( 画 像 か 文 章 )の 位 置 に 合 わせます (HTML の img タグに 対 する align 属 性 に top を 指 定 した 場 合 と 同 じ 見 栄 えになります ) 20
3.2.5 画 像 に 対 する( 画 像 のサムネイル:クリックすると 拡 大 するように)リンクを 設 定 する リンクを 設 定 したい 画 像 を 選 択 し イメージ 挿 入 / 編 集 アイコンをクリック( 右 クリックのイ メージプロパティ)します リンク タブをクリックします クリック! 21
リンク 先 となる 画 像 の 指 定 をします サーバーブラウザー ボタンをクリックします クリック! 22
画 面 左 上 にある Resource Type が Image となっていることを 確 認 し 元 の 画 像 を 選 択 します 確 認! クリック! 23
プレビュー 画 面 で 青 枠 に 囲 まれていることを 確 認 して OK ボタンをクリックします クリック! 24
3.2. 表 を 配 置 する メニューバーの テーブル 挿 入 / 編 集 ボタンをクリックします テーブルプロパティウインドウが 新 しく 開 きます クリック! 縦 4 行 横 2 列 の 表 を 作 る 場 合 には 行 欄 に 4 列 欄 に 2 と 入 力 します テーブル 目 的 / 構 造 欄 に 簡 単 な 名 称 ( 例 として 犬 の 鳴 き 声 )を 入 力 し OK ボタンを クリックします 25
縦 2 横 4 のセルを 持 つ 表 の 枠 が 作 成 されました 各 セルの 上 でクリックすると カーソルが 点 滅 し セル 内 に 文 章 を 入 力 できます 全 てのセルを 埋 めていきます 26
表 の 一 番 外 側 の 罫 線 にマウスポインタを 合 わせてクリックすると 四 隅 とその 中 間 点 が 白 い 点 で 表 示 されるので その 点 をドラッグすることで 表 の 大 きさを 変 化 させることができます 各 セルの 内 容 が1 行 で 収 まる 程 度 まで 表 を 横 に 引 き 伸 ばします ドラック! また 表 の 大 きさはテーブルプロパティウインドウでも 設 定 できます テーブルプロパティウイ ンドウを 表 示 するには 選 択 した 表 にカーソルを 合 わせて 右 クリックし その 中 の テーブルプロ パティ をクリックして テーブル 幅 やテーブル 高 さを 直 接 数 字 で 入 力 して 下 さい テーブル 幅 については ピクセルサイズだけでなく 掲 示 板 が 表 示 されている 画 面 の 横 幅 に 対 するパーセンテージでも 指 定 できます 27
3.3. 箇 条 書 きを 作 成 する 箇 条 書 きにしたい 文 章 を 選 択 し 箇 条 書 きの 追 加 / 削 除 アイコンをクリックします クリック 28