OpenCity2説明

(1)

和光市市民活動支援サイト

新掲示板（FCKエディタ）について

通常ホームページを作成するには、「HTML」という専門言語の知識が必要ですが、FCK エディタを使えば、ワードやエクセルと同じ感覚で、タイトル文字を太字にしたり、表を作成したり、画像を挿入したり、更にはワードで作成した文章スタイルそのままにコピー＆ペースト機能でコピーすることもできます。（WEB ページであるという制約から完全に同じ見た目にはなりません。）新掲示板の主な変更点旧掲示板新掲示板画像リンクで表示文章中に表示可能文字サイズや色文字など変更できるがHTMLのタグで表示プレビュー画面に、すぐに反映ワードからのコピー＆ペースト文字情報のみコピー可能文章スタイルまでコピー可能 ※その他、絵文字やフラッシュなども扱えるようになりました。

(2)

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

(3)

本書では、和光市市民活動支援サイト（以下、本システム）についての説明をおこないます。

1. FCK エディタの概要

1.1. FCK エディタでできること

FCK エディタでは以下のような事ができます。・文字の装飾（フォントサイズの変更や文字色の指定）・画像の貼り付け・文字の配置指定（右寄せ、左寄せなど）・表の配置など、Microsoft 社製のワードやエクセルと同じ感覚で文章の作成ができます。個々の機能に関しては以降の説明で触れていきます。

1.2. FCK エディタを使用するには

FCK エディタを使用するには、Web ブラウザの JavaScript が有効となっている必要があります。（通常の Web ブラウザでは有効となっています。）

(4)

2. FCK エディタを使ってみる

早速ですが FCK エディタを使ってみましょう。まずは、ログインを行い所属グループのグループホームの「掲示板」で新しく「メッセージ作成」を選択して下さい。図 1 FCK エディタでの掲示板入力画面

(5)

3. 具体的な使用方法

下記ページを例として基本的な使用方法を示します。（Ａ）画像と文章を並べて表示する（Ｂ）表を使う（Ｃ）箇条書きそれでは、順次（１）～（３）を作成していきます。

3.1. 画像 + 文章

最初の（Ａ）は左寄せの画像と右に回りこんだ文章で成り立っています（下の図を参照）。また文章の一部を斜体にし、さらにリンクも張っています。画像

+

文章表箇条書き

（Ａ）

（Ｂ）

（Ｃ）

(6)

メニューバー

編集ウインドウ

クリック!

(7)

新たなウィンドウで「Resources Browser」が立ち上がります。画面右下の参照ボタンをクリックします。「ファイルの選択」ウィンドウが立ち上がります。アップロードしたい画像を選択します。 クリック! ※ 注意!! 現在、画像ファイルに日本語を含むファイルをアップロードすると、正しく画像が表示さ れません。アップロードするファイル名を半角英数字にてアップロードして下さい。

(8)

8 画面右下にある「Upload」ボタンをクリックします。

(9)

ファイル名をクリックします。アップロードしたファイルのファイル名とファイルサイズが表示されます。

(10)

(11)

アップロードした画像が大きい場合、そのまま表示すると大き過ぎる場合があります（本来はアップロードする前に画像処理ソフトなどを用いてサイズを調整していただくことを推奨します）。 FCK エディタ上で画像サイズを変更する場合は、まず変更する画像をクリックします。すると四隅とその中間点が白い点で表示されるので、その点をドラッグすることで画像のサイズを調整することができます。 クリック & ドラック！

(12)

12 リサイズ後の画面

(13)

3.2.2 文章の装飾

次に文章の入力を行います。この段階では画像と文章の配置（回り込み）が下図のようになっています。

学名の部分を斜体にしてみましょう。まず斜体にする部分の文字を選択して・・・

(14)

Copyright © JINS Co. Ltd. All rights reserved. 14 「斜体」ボタンをクリックします。 3.2.3 文章内にリンクを設定する 文章内にリンクを設定する時も前項と同様に、範囲指定を行ってからメニューバーで指定します。リンクを設定する文章内の単語を選択し、メニューバーの「リンク挿入／編集」ボタンをクリックします。 クリック! クリック!

(15)

するとハイパーリンクウィンドウが開きますので、設定したいリンク先の URL を「URL」部分に入力します。

「URL」を入力したら「OK」ボタンをクリックします。

(16)

16

範囲選択していた部分に下線が引かれ、青色に変わります。これで文章内にリンクを設定できました。

(17)

3.2.4 画像と文章の配置を変える ここでは文章全体が画像の右に回り込む設定を行います。まずは画像を選択して「イメージ挿入／編集」アイコンをクリック（又は画像を右クリック）、「イメージプロパティ」を選択して、イメージプロパティウインドウを新しく開きます。イメージプロパティウインドウにある「行揃え」で「左」を選択します。プレビュー画面で文章が画像の右に回り込むのを確認して、「OK」ボタンを押します。 クリック! 又は・・ 右クリックしてイメージプロパテ ィをクリック！

(18)

Copyright © JINS Co. Ltd. All rights reserved. 18 これで文章全体が画像の右に配置されました。「行揃え」は「左」以外に以下の様な、選択項目があります。選択項目文章と画像の表示・位置関係（なし）文章とイメージの位置に変化はありません。下部（絶対的）最初の１行のみが画像の右下に配置され、あとは画像の下に回り込む見栄えになります。中央（絶対的）その行のテキストや画像の中央に、該当の画像を合わせる見栄えとなります。ベースライン「その行の文章のベースラインと画像の下端」を合わせます。下文字の下端に画像の下端を合わせます。中央その行のベースラインに画像の中央を合わせます。右「右」を指定した場合、右上から始まり画像の下に回りこみます。テキスト上部最も背の高いテキストの上端に画像を合わせます。上その行の最も高い要素（画像か文章）の位置に合わせます。

(19)

文章とイメージの位置に変化はありません。表示されている画像と文章がそのまま表示されます。イメージプロパティの「行揃え」にて何も指定しない場合イメージプロパティの「行揃え」にて「下部（絶対的）」を指定した場合「下部（絶対的）」では、最初の１行のみが画像の右下に配置され、あとは画像の下に回り込む見栄えになります。（HTML の img タグに対する align 属性に、“absbottom” を指定した場合と同じ見栄えになります。）

「中央（絶対的）」を指定した場合、その行のテキストや画像の中央に、該当の画像を合わせる見栄えとなります。（HTML の img タグに対する align 属性に、“absMiddle” を指定した場合と同じ見栄えになります。）イメージプロパティの「行揃え」にて「中央（絶対的）」を指定した場合イメージプロパティの「行揃え」にて「ベースライン」を指定した場合「下」を指定した場合、文字の下端に画像の下端を合わせます。「ベースライン」と同じ様な見栄えとなります。イメージプロパティの「行揃え」にて「下」を指定した場合「ベースライン」を指定した場合、「その行の文章のベースラインと画像の下端」を合わせます。基本的に「下」と同じだが、文字と画像が下ぞろえになります。

（HTML の img タグに対する align 属性に、“baseline”を指定した場合と同じ見栄えになります。）

(20)

20

イメージプロパティの「行揃え」にて「中央」を指定した場合

「中央」を指定した場合、その行のベースラインに画像の中央を合わせます。

（HTML の img タグに対する align 属性に、“middle”を指定した場合と同じ見栄えになります。）

「右」を指定した場合、右上から始まり画像の下に回りこみます。

（HTML の img タグに対する align 属性に、“middle”を指定した場合と同じ見栄えになります。）

イメージプロパティの「行揃え」にて「右」を指定した場合

「テキスト上部」を指定した場合、最も背の高いテキストの上端に画像を合わせます。

（HTML の img タグに対する align 属性に、“textTop”を指定した場合と同じ見栄えになります。）

イメージプロパティの「行揃え」にて「テキスト上部」を指定した場合

イメージプロパティの「行揃え」にて「上」を指定した場合

「上」を指定した場合、その行の最も高い要素（画像か文章）の位置に合わせます。

（HTML の img タグに対する align 属性に、“top”を指定した場合と同じ見栄えになります。）

(21)

3.2.5 画像に対する（画像のサムネイル：クリックすると拡大するように）リンクを設定する

リンクを設定したい画像を選択し、「イメージ挿入／編集」アイコンをクリック（右クリックのイメージプロパティ）します。

「リンク」タブをクリックします。

(22)

22

リンク先となる画像の指定をします。「サーバーブラウザー」ボタンをクリックします。

(23)

画面左上にある「Resource Type」が「Image」となっていることを確認し、元の画像を選択します。

確認!

(24)

24

プレビュー画面で青枠に囲まれていることを確認して「OK」ボタンをクリックします。

(25)

3.2. 表を配置する

メニューバーの「テーブル挿入／編集」ボタンをクリックします。テーブルプロパティウインドウが新しく開きます縦 4 行、横 2 列の表を作る場合には、「行」欄に「4」、「列」欄に「2」と入力します。「テーブル目的／構造」欄に、簡単な名称（例として「犬の鳴き声」）を入力し、「OK」ボタンをクリックします。 クリック!

(26)

26 縦 2×横 4 のセルを持つ表の枠が作成されました。

各セルの上でクリックすると、カーソルが点滅し、セル内に文章を入力できます。全てのセルを埋めていきます。

(27)

表の一番外側の罫線にマウスポインタを合わせてクリックすると、四隅とその中間点が白い点で表示されるので、その点をドラッグすることで表の大きさを変化させることができます。各セルの内容が１行で収まる程度まで表を横に引き伸ばします。また、表の大きさはテーブルプロパティウインドウでも設定できます。テーブルプロパティウインドウを表示するには、選択した表にカーソルを合わせて右クリックし、その中の「テーブルプロパティ」をクリックして、テーブル幅やテーブル高さを直接数字で入力して下さい。 ドラック!

(28)

28

3.3. 箇条書きを作成する

箇条書きにしたい文章を選択し、「箇条書きの追加／削除」アイコンをクリックします。