目次 １ fckeditor を 上手く使うには...3 ２ fckeditor のレイアウト...3 ３ エディターサイズの変更...3 ４. 編集...4 ４ １ 編集をするテキストをドラッグ...4 ４ ２ 強調文字にする...5 ４ ３ 斜体文字にする...5 ４ ４ アンダーラインを引く.

Transcription

1 FCKEDITOR マニュアル present ｂｙ sasadog 1

2 目次 １ fckeditor を 上手く使うには...3 ２ fckeditor のレイアウト...3 ３ エディターサイズの変更...3 ４. 編集...4 ４ １ 編集をするテキストをドラッグ...4 ４ ２ 強調文字にする...5 ４ ３ 斜体文字にする...5 ４ ４ アンダーラインを引く...5 ４ ５ 文字色を変える...5 ４ ６ 文字の背景色...6 ４ ７ 打ち消し線...7 ４ ８ 添え字...7 ４ ９ 上付き文字...7 ４ １０ 段落番号の追加 削除...7 ４ １１ 箇条書きの追加 削除...8 ４ １２ インデント 幅寄せ...8 ４ １３ インデント解除...9 ４ １４ 左揃え...9 ４ １５ 中央揃え...9 ４ １６ 右揃え...10 ４ １７ 両端揃え...10 ４ １８ ハイパーリンク付け...10 ４ １９ ハイパーリンク解除...11 ４ ２０ アンカーの設置...11 ４ ２１ 画像の貼り付け...11 ４ ２２ Flash の貼り付け...14 ４ ２３ テーブルの作成...14 ４ ２４ 横罫線...14 ４ ２５ 絵文字挿入...15 ４ ２６ 特殊文字挿入...15 ４ ２７ 検索...15 ４ ２８ 置き換え...16 ４ ２９ ソース...16 ４ ３０ その他...17 ５ 早見表...17 ６ 最後に

3 １ fckeditor を 上手く使うには 一通り文章(画像や 表を含む)を書いてから 編集する方法が良いかと思います まあ 書くだけ書いたら整えると言った方が良いでしょう FCKEDITOR は ワープロのように扱えるのでこのような方法が取れます ブラウザは Firefox の利用をおすすめします インターネットエクスプローラーをご利用の際には 画像の装飾等 一部利用できない機能が あります でも 使えないわけではありません 因みに Google の Chrome もすべて調べた 訳ではありませんが使用上問題なさそうです ２ fckeditor のレイアウト 本文は テキストエリアにて書けば自動的にｈｔｍｌ形式に変換しホームページに書いた通りの 内容を表示してくれます 使用する方は ｈｔｍｌの文法をあまり気にすることなくレポーティングできるわけです 但し 改行についてはブロック内改行は ENTER+Shift となります ３ エディターサイズの変更 下記のアイコンをクリックするとブラウザーの幅にて作業できます 但し その範囲での作業はホームページへの幅とことなるので 文字の折り返しや画像挿入の 注意が必要です 3

4 エディターサイズの変化は下記のようになります ４. 編集 ４ １ 編集をするテキストをドラッグ ドラッグとは windows でいうテキスト範囲指定操作です 選択する範囲の先頭をクリックし マウスの左ボタンを押したまま ポインタを選択する テキストにドラッグします 4

5 ４ ２ 強調文字にする 要は 文字を太文字にすることです 強調文字にしたいところをドラッグし B というアイコンをクリックすれば強調文字に なります ４ ３ 斜体文字にする 文字を斜体文字にする 斜体文字にしたい所をドラッグし I というアイコンをクリックすれば斜体文字になります ４ ４ アンダーラインを引く アンダーラインを引きたいテキストをドラッグし U というアイコンをクリックすれば アンダーラインが引かれます ４ ５ 文字色を変える 色を変えたいテキストをドラッグし というアイコンをクリックすれば 色パレットが現れ色選択するとテキスト色が変わります 5

6 パレットから色選択し クリックします 下記の状態になります ４ ６ 文字の背景色 テキストの背景色を変えたいテキストをドラッグし のアイコンをクリックすれば 色パレットが現れ色選択するとテキスト色が変わります パレットから色選択し クリックします 下記の状態になります 6

7 ４ ７ 打ち消し線 打ち消し線を引きたいテキストの範囲をドラッグし のアイコンをクリックします ４ ８ 添え字 通常位置より下部へ小さく表示される添え字にするには 添え字にしたいテキスト範囲を ドラッグし 下記アイコンをクリックします ４ ９ 上付き文字 通常位置より上部へ小さく表示されるには 上付き文字にしたいテキスト範囲を ドラッグし アイコンをクリックします ４ １０ 段落番号の追加 削除 段落番号を付けたい範囲にドラッグ アイコンをクリックします 7

8 上記サンプルテキストが 指しているようになります 削除は 段落番号の付いた範囲をドラッグし アイコンをクリックすれば削除できます 感覚的には 削除と言うより解除かもしれません それから 段落中の改行は ENTER Shift となります ４ １１ 箇条書きの追加 削除 箇条書きを付けたい範囲にドラッグ 下記アイコンをクリックします 削除は 箇条書き範囲をドラッグし アイコンをクリックすれば削除できます 箇条書き中の改行は ENTER Shift となります ４ １２ インデント 幅寄せ インデントしたい範囲にドラッグ アイコンをクリックします インデント設定前 インデント設定後 8

9 ４ １３ インデント解除 ４ １２の設定を解除 設定前の状態 します インデント範囲をドラッグし アイコンをクリックすれば解除できます ドラッグした状態 インデント解除 ４ １４ 左揃え 支持範囲の文書全体を左に揃えます 支持範囲は 希望文書をドラッグしてアイコンをクリックしてください 設定前 設定後 ４ １５ 中央揃え 支持範囲の文書全体を中央に揃えます 支持範囲は 希望文書をドラッグしてアイコンをクリックしてください 設定前 設定後 9

10 ４ １６ 右揃え 支持範囲の文書全体を右に揃えます 支持範囲は 希望文書をドラッグしてアイコンをクリックしてください 設定前 設定後 ４ １７ 両端揃え 支持範囲の文書全体を両端に揃えます 支持範囲は 希望文書をドラッグしてアイコンをクリックしてください ４ １８ ハイパーリンク付け ハイパーリンクしたい文字範囲或いは画像にドラッグ アイコンをクリックします 10

11 ハイパーリンクが付けられると 下記のように支持部が変化する ４ １９ ハイパーリンク解除 ハイパーリンク解除したい範囲にドラッグ アイコンをクリックします ４ ２０ アンカーの設置 アンカーを設置したい範囲をドラッグし アイコンをクリックします アンカー解除は アンカー設置した範囲をドラッグします すると 設置したときのアンカープロパティウィンドウが現れます アンカー名を消去して OK すると解除されます ４ ２１ 画像の貼り付け 画像を貼り付けようとする場所にて アイコンをクリックします 別ウィンドウが現れます 画像は ご自身の PC に存在しているのでアップロードする必要があります 当然ですが 画像は適度なサイズに加工を施しておく事が良いでしょう 貼り付け時に画像サイズの変更は可能ですが 極端に大きいサイズの画像を 貼り付け時に小さくしても サーバー上の保管は大きいサイズのままで登録されるため 必要以上のメモリーを食う原因になります それに 画像の種類にも気を使う必要があります 11

12 通常は WEB 画像としては JPEG GIF PNG BMP といった種類が良いでしょう 要は ブラウザーが表現できる種類にすることです Photoshop のようなｐｓｄファイルは 表示されませんので御注意ください また ハイパーリンクも後から使いできますが 貼り付け時にも設定可能です アップロードは ここをクリック 画像貼り付けアイコンをクリックした場合の画像 ファイル選択をクリックすると 現れるファイル開くウィンドウ ファイル選択ボタン サーバーに取り込 みするための サーバーに送信 ボタン アップロードタグをクリックした時 のウィンドウ 12

13 OK をクリック サーバーへのアップロードが成功した場合の画面 画像サイズの 変更が可能 OK で設定 文字の回り込 み時の選択 画像配置を 選ぶ 貼り付けが完了した状態 画像削除は 画像ドラッグして Delete キー 13

14 ４ ２２ Flash の貼り付け Flash の貼り付けは 画像の貼り付け手順と類似するので割愛します ４ ２３ テーブルの作成 テーブルを作成するには テーブルを設けたい場所に着たときに アイコンをクリック 別ウィンドウにて テーブルプロパティが出てきます 設定入力し OK でクリックで完了 行 列数の指示 テーブルの幅と高さ の指示 罫線の幅 ０で罫線無し 設定完了後に OK をクリック テーブル内の セル内テキスト 配置 設定後の画面です ４ ２４ 横罫線 横罫線を設置したい行にきたときに アイコンをクリックします このような感じで 横罫線が引けます 14

15 ４ ２５ 絵文字挿入 絵文字を入れたい箇所にきたら アイコンをクリックします 使いたい絵文字をクリックすれば 挿入されます ４ ２６ 特殊文字挿入 これについては ブラウザの種類や言語種類で変わるのですべてに反映されるかは疑問です 一様 アイコンをクリックすれば絵文字挿入時と同じ扱いで反映されます ４ ２７ 検索 文中のテキスト検索を行う機能です アイコンクリックで別ウィンドウが立ち上がり 検索したいテキストを打ち込み検索ボタンを クリックするとエディターの本文中の該当するところへ飛びます 15

16 ４ ２８ 置き換え 本文中で出て来る同一単語を 指定単語に置きかえしてくれる機能です アイコンをクリックして 置き換えしたい単語と置き換える単語を入力し 1 箇所なら置き換えボタン すべてならすべて置き換えボタンをクリックすれば完了です ４ ２９ ソース これは fckeditor の変換後のｈｔｍｌ文法になった内容を編集できるようにするための 切り替えボタンです スクリプトのような羅列を入力する時には ｈｔｍｌ編集で入れないと すべて文字扱いされてしまいます 切り替え後が 下記画像です 16

17 ４ ３０ その他 他にもアイコンが存在してますが お使いの PC によっては不要なものもあるので 省略させて頂きます 前文までの機能で 十分編集が可能と思われます ５ 早見表 ソース 入力エリアを HTML ソース形式で表示します HTML の知識があるかたが レイアウト を微調整するのに便利な機能です 元の表示形式に戻す場合は 再度このボタンを クリックします プレビュー 作成した文章の表示イメージを別画面で確認することが出来ます ご利用の Web ブラ ウザやホームページのスタイルシートの設定によっては表示差異が発生する場合があり ます テンプレート 雛形 切り取りやコピーをした複合データのうち 文字の情報だけを入力エリアのカーソル位置 に貼り付けます この機能を使えば コピー元の文字に装飾があった場合でも文字装 飾のない状態で貼り付けることが出来ます プレーンテキスト貼り付け 切り取りやコピーをした複合データのうち 文字の情報だけを入力エリアのカーソル位置 に貼り付けます この機能を使えば コピー元の文字に装飾があった場合でも文字装 飾のない状態で貼り付けることが出来ます Word 文章から貼り付け Microsoft Word 上のデータをコピーして入力エリアに貼り付ける場合 この機能を使用 すると Word 上の文字装飾やレイアウトを極力保持したまま貼り付けることが出来ます ただし すべての文字装飾やレイアウトが完全に保持されるわけではありません 元に戻す 入力エリアに対して行った操作をひとつ前の状態に戻します 繰り返し押すことで いく つも前の状態に戻すことが出来ます やり直し 元に戻す ボタンで元に戻した操作に対して 元に戻すことを取り消します 元に戻す 操作のキャンセル 繰り返し押すことで いくつも取り消すことができます 検索 入力エリア内において指定された文字列を検索します 置き換え 入力エリア内において指定された文字列を別の文字列に置き換えます すべて選択 入力エリア内のすべてのデータを選択します フォーマット削除 入力エリア内で選択した部分の文字装飾やレイアウト指定のみを削除します 構成に よっては 削除されない文字装飾 レイアウトが存在します 太字 入力エリア内で選択した部分の文字を太字にします 17

18 斜体 入力エリア内で選択した部分の文字を斜体にします 下線 入力エリア内で選択した部分の文字に下線を引きます 打ち消し線 入力エリア内で選択した部分の文字に打ち消し線を引きます 添え字 入力エリア内で選択した部分の文字を下付文字にします 上付き文字 入力エリア内で選択した部分の文字を上付文字にします 段落番号の追加/削除 入力エリア内で選択した部分の文字を行ごとに連番を付与します 再度ボタンを押す と 連番を取り消します 箇条書きの追加/削除 入力エリア内で選択した部分の文字を行ごとに箇条書きにします 再度ボタンを押す と 箇条書きを取り消します インデント解除 インデント で設定したインデントを取り消します インデント 入力エリア内で選択した部分の文字において 字下げによるインデントを設定します ブロック引用 入力エリア内で選択した部分の文字において引用文であることを強調したい場合に使 用します 左揃え 入力エリア内で選択した部分の文字を左揃えにします 中央揃え 入力エリア内で選択した部分の文字を中央揃えにします 右揃え 入力エリア内で選択した部分の文字を右揃えにします 両端揃え 入力エリア内で選択した部分の文字を両端揃えにします リンク挿入/編集 入力エリア内で選択した部分の文字にハイパーリンクを設定します リンク削除 入力エリア内で選択した部分の文字に設定したハイパーリンクを削除します アンカー挿入/編集 入力エリア内で選択した部分にアンカーを設定します アンカーとは ページ内ジャンプ などに使用する目印のことで活用するためには HTML に関する知識が必要となります スタイル 一般的に利用されることが多い文字装飾の組み合わせを定義しているもので 入力エ リア内で選択した部分の文字を指定のスタイルで装飾します 18

19 フォーマット 文書の構成を指定するために用いられ 主に 見出し の設定に使用されます 見出 しを設定する場合は 入力エリア内で見出しとする文字を選択後 フォーマットから該 当の見出しレベル 見出し 1 や見出し 2 など を選択します 初期状態は 標準 です サイズ 入力エリア内で選択した部分の文字を指定したサイズに変更します テキスト色 入力エリア内で選択した部分の文字を指定した表示色に変更します 背景色 入力エリア内で選択した部分の文字の背景色を変更します エディタサイズを最大にします FCKEditor の表示を ブラウザの画面いっぱいに拡大表示します 再度このボタンをク リックすると 元の大きさに戻ります ブロック表示 通常は非表示となっている文章の構成ブロックを表示することができ 文書の構成を把 握しやすくなります イメージ挿入/編集 入力エリア内の指定の位置に画像を挿入することが出来ます Flash 挿入/編集 入力エリア内の指定の位置に Flash コンテンツを挿入することが出来ます テーブル挿入/編集 入力エリア内の指定の位置にテーブル 表 を挿入することができます 横罫線 入力エリア内の指定の位置に水平線を挿入することができます 特殊文字挿入 入力リア内の指定の位置に記号などの特殊文字を挿入することができます 改ページ挿入 入力リア内の指定の位置に改ページを挿入することができます ６ 最後に FCKEDITOR の説明をしてきましたが バージョン２ ５ １での説明であり バージョンが 違った場合には機能その他の面で説明とは違った動作があるかもしれません 概ね今までの説明で感覚を付けていただければ 少しぐらいバージョンが違っても大きく変わらないと 思っています 違っていた場合には インターネット上で説明が施されてますので参考にしてください 本文は 筆者が関連するサイト上利用のために作成された物なので ご容赦ください 19