CKEditor CKFinder 補足説明資料 作成日 2012 年 2 月 17 日 第 1 版 本資料で説明している CKEditor&CKFinder は CMS 分野では広く利用されている有名なフリーソフ トです しかしフリーソフトであるため 弊社では動作保障できません また不具合が発生した場合 障害回避に努めますが 基本的に改善のバージョンアップを待つ形となります 予めご了承ください
目次第 1 章 CKEditor の使い方... 2 表 ( テーブル ) の作成方法... 3 ハイパーリンクの設定... 7 コンテンツの作成例... 10 表 ( テーブル ) の作成... 10 画像ファイルの挿入... 17 NP01-F31 1
第 1 章 CKEditor の使い方 CKEdior の基本的な使い方を紹介します LocoCUBE カスタマイズで使用できる機能は以下の画像の通りです 各機能ボタンについて ボタン 機能名 備考 ソース html ソースの表示 非表示を切り替えます テンプレート ( 雛形 ) 用意されているテンプレートを用いて文章を作成します 切り取り コピー 選択したテキスト文字列を切り取り コピーします 貼り付け プレーンテ コピーしたテキスト文字列を貼り付けます キスト貼り付け ワード文章から貼り付け 元に戻す やり直し 操作を元に戻します 操作をやり直します 検索 置き換え 文章内の文字列を検索 もしくは特定の文字列を別な文字列に置き換えます すべて選択 全て選択します スペルチェック 文章内のスペルチェックを行います フォーマット削除 選択した範囲のフォーマットを削除します スタイル 文章中に様々なスタイルを適用します フォーマット 文章中に見出し等のフォーマットを適用します フォント フォントの種類を指定します サイズ フォントサイズを指定します テキスト色 背景色ブロック表示太字 斜体下線 打ち消し線添え字 上付き文字 テキスト文字列の色を指定します テキスト文字列の背景色を指定します ブロック表示に変更します 選択したテキスト文字列を太字 斜体にします 選択したテキスト文字列に下線 打ち消し線を加えます テキスト文字列を添え字 上付き文字に変更します NP01-F31 2
段落番号 箇条書きブロック引用 div コンテナテキストの向きインデント解除 インデント左揃え 中央揃え 右揃え 両端揃えリンク挿入 / 編集 リンク解除アンカー挿入 / 編集イメージフラッシュテーブル横罫線絵文字特殊文字挿入改ページ挿入最大化ブロック表示 CKEditor バージョン情報 段落番号付きの段落 箇条書きに変更します 文章を引用 転載する際に利用します 新たに文章中に div 要素を追加します 作成する文章の向きを変更します インデントの解除 インデントの設定を行います 選択したテキスト文字列を左揃え 中央揃え 右揃え 両端揃えにします URL 等のリンクの挿入や編集を行います リンクの解除を行います アンカーの追加 編集を行います アンカーとは ページ内ジャンプなどに使用する目印のことで活用するためには HTML に関する知識が必要となります 文章中に画像を挿入します CKfinder を用いる事で サーバーに画像をアップ & 任意の画像を挿入できます 利用方法は本マニュアルの第 3 章で説明します 文章中にフラッシュを挿入します こちらも CKfinder を用いてサーバーにアップ & 任意のフラッシュを挿入できます 表を挿入します 横罫線を挿入します 文章中に顔文字を挿入します 文章中に特殊文字を挿入します 文章中に改ページを挿入します CKEditor を全画面で表示します 編集中の文章のブロック要素を表示します CKEditor のバージョン情報を表示します 表 ( テーブル ) の作成方法 1. 表を挿入したい位置でメニューの テーブル ボタンをクリックします NP01-F31 3
2. テーブルプロパティ 画面が表示されますので 各項目を設定し OK をクリックすると表 が挿入されます 項目名備考行表の行数を指定します 列表の列数を指定します テーブルヘッダテーブルヘッダの指定を行います テーブルヘッダの指定をすると文字が強調表示されます ボーダーサイズ罫線のサイズを指定します 0 にすると罫線が消えます 行揃え表の表示位置を指定します 幅表の幅をピクセル単位で指定します 高さ表の高さをピクセル単位で指定します セル内余白セル内の罫線からの余白を指定します セル内間隔セルとセルの間隔を指定します キャプション表の見出しを挿入したい場合に見出しを入力します 特に入力の必要はありません テーブルの概要表の概要を入力します 特に入力の必要はありません 高度な設定 タブについては 使用する可能性が低いと思いますので説明は省略します NP01-F31 4
上記のテーブルプロパティの場合 以下のように表が作成されます 表の削除 表の中を右クリックし 表示されたメニューから テーブル削除 をクリックすると表が削除 されます セルの編集編集したいセル内を右クリックし 表示されたメニューから セル セルプロパティ をクリックすると セルプロパティ 画面が表示されます 必要な項目を入力し OK をクリックして下さい 項目名幅高さ折り返し 備考セルの幅を指定します ピクセルかパーセントで指定して下さい セルの高さをピクセル単位で指定します 文字列を折り返し表示にするかどうか指定します NP01-F31 5
セル横の整列文字列の横方向の揃え方を指定します なし 左 中央 右 から選択して下さい セル縦の整列文字列の縦方向の揃え方を指定します なし 上 中央 下 から選択して下さい セルタイプセルタイプを指定します テーブルデータ(td) テーブルヘッダ(th) から指定して下さい テーブルヘッダ (th) を指定して構いません 縦幅 ( 行数 ) セル結合している場合 最小単位のセルの何行に相当するか表示されます 横幅 ( 列数 ) セル結合している場合 最小単位のセルの何列に相当するか表示されます 背景色セルの背景色を指定します 色の選択 をクリックすると 色選択 画面が表示されますので色を指定して下さい ボーダーカラーセルの罫線の色を指定します 色の選択 をクリックすると 色選択 画面が表示されますので色を指定して下さい 注意 複数のセルを選択した状態でセルの編集 ( 設定変更 ) を行った場合 表の形式が崩れる場合があり ますので セル 1 つずつに対して操作を行って下さい 段落番号 箇条書きの設定段落番号 箇条書き設定にする文字列を範囲指定し 段落番号 箇条書きアイコンをクリックすると設定されます 行頭文字の変更する場合は 段落番号 箇条書きの位置で右クリックし 表示されたメニューから 箇条書きプロパティ 段落番号プロパティ をクリックします 段落番号プロパティ 箇条書きプロパティ 画面が表示されますので 変更する行頭文字をクリックします 段落番号については 段落の開始する値も指定できます NP01-F31 6
ハイパーリンクの設定 ハイパーリンクの設定では リンクタイプを URL このページのアンカー E-Mail の中から選択する事ができます リンクタイプで URL を選択した場合 注意 リンク設定する文字数が長い場合 表示枠からはみ出しスタイルが崩れてしまう場合があります 項目名プロトコル URL ターゲットアップロード 備考プロトコルを選択します http:// https:// ftp:// news:// その他の の中から選択して下さい リンクする URL を入力します リンク先の開き方を選択します < なし > < フレーム > < ポップアップウィンドウ > 新しいウィンドウ(_ 空白 ) 最上部ウィンドウ(_ トップ ) 同じウィンドウ(_ 同一 ) 親ウィンドウ (_ 親 ) の中から選択して下さい リンク先で指定するファイルをサーバーにアップロードします NP01-F31 7
イメージ 圧縮ファイル等をアップロード出来ます 高度な設定 タブについては 使用する可能性が低いと思いますので説明は省略します リンクタイプで このページのアンカー を選択した場合 アンカーを設定する事はありませんので 説明は省略します 項目名備考アンカー名リンクするページ内のアンカー名を選択します あらかじめアンカーの設定が必要です エレメント ID エレメント ID を選択します リンクタイプで E-Mail を選択した場合 NP01-F31 8
項目名 備考 E-Mail アドレス E-Mail アドレスを入力します 件名 件名を入力します 本文 本文を入力します 高度な設定 タブについては 使用する可能性が低いと思いますので説明は省略します NP01-F31 9
コンテンツの作成例 CKEditor を使用して web コンテンツを作成する例を紹介します 例. 表 ( テーブル ) の作成 注意 以下のような場合には 公開ページのレイアウト表示が崩れる事がありますのでご了承下さい 1 表組で設定した表の幅の設定や画像の表示幅が大きすぎる場合 左右両方にサイドメニューがあるスタイル 表の幅 画像の表示幅が 430px を超えて設定された場合 左右どちらか一方にサイドメニューがあるスタイル 表の幅 画像の表示幅が 600px を超えて設定された場合 2 携帯電話で表組みのある公開ページを参照する場合 Web 管理 - テーマ選択 - レイアウト選択 において 左図のように左右にサイドメニューがあるレイアウトを選択している場合 テーブルプロパティの 幅 の設定 は最大約 430px までとして下さい NP01-F31 10
Web 管理 - テーマ選択 - レイアウト選択 において 左図のように左右どちらか一方にサイドメニューがあるレイアウトを選択している場合 テーブルプロパティの 幅 の設定 は最大約 600px までとして下さい NP01-F31 11
下記のような表を作成する手順例をご説明します 1 コンテンツの編集画面で エディタ を リッチ の方を選択し CKEditor が起動します メニューバーにある テ ブル ボタンをクリックすると テーブルプロパティ が表示されま す 下記のように行 =6 列 =6 幅 =600 と設定します NP01-F31 12
2 6 行 6 列の表が挿入されます 項目名用として 下記の赤枠セルに対してセルの結合の操作を行います 対象セルを右クリックし セル - 右に結合 を選択します 3 項目名用のセルが結合されました 下記の赤枠セル ( 第 学期を入力 ) に対して表示幅の設定を行います 対象セルを右クリックし セル - セルプロパティ を選択します セルプロパティ では 幅 を 33 パーセント と設定します NP01-F31 13
4 2 行名のセルに対して表示幅の設定を行います 対象セルを右クリックし セル - セルプロパティ を選択します 赤枠のセル ( 月を入力 ) では 幅 を 8 パーセント と設定します 青枠のセル ( 行事名を入力 ) では 幅 を 25 パーセント と設定します 5 各セルにテキスト文字列を入力します NP01-F31 14
6 テキスト文字列の修飾を行います 学期名のセルに対しては フォントサイズの拡大指定と中央揃えを設定します 各月のセルに対しては 中央揃えを設定します 7 学期名と各月のセルに対して背景色を指定します 対象セルを右クリックし セル - セルプロパティ を選択します セルプロパティ では 背景色 で希望する背景色を設定します NP01-F31 15
8 編集した結果を確認します 画面下部にある プレビュー をクリックすると編集した内容が確認できます 編集内容に間違いなければ 下書き ( 非公開 ) か 公開 をクリックし更新します 参考 作業途中に操作間違いにより 意図せず編集内容がクリアされる事もあるかと思います 編集作業の途中でこまめに 下書き ( 非公開 ) をクリックし更新する事をお勧めします 参考 他アプリケーション (MS Excel や Word) で作成した表をコピーされる事もあるかと思いますが 表の内容は完全にコピーされませんので あらかじめご了承願います Excel セルの背景色 文字列の修飾 ( フォントサイズ フォントカラー 配置設定 ) はコピーされません Word 文字列の修飾 ( フォントサイズ フォントカラー 配置設定 ) はコピーされません Excel Word のバージョンによっても上記以外の症状が発生するかもしれませんが ご了承願い ます NP01-F31 16
例. 画像ファイルの挿入 注意 以下のような場合には 公開ページのレイアウト表示が崩れる事がありますのでご了承下さい 1 表組で設定した表の幅の設定や画像の表示幅が大きすぎる場合 左右両方にサイドメニューがあるスタイル 表の幅 画像の表示幅が 430px を超えて設定された場合 左右どちらか一方にサイドメニューがあるスタイル 表の幅 画像の表示幅が 600px を超えて設定された場合 2 携帯電話で表組みのある公開ページを参照する場合 Web 管理 - テーマ選択 - レイアウト選択 において 左図のように左右にサイドメニューがあるレイアウトを選択している場合 イメージプロパティの 幅 の 設定は最大約 430px までとし て下さい NP01-F31 17
Web 管理 - テーマ選択 - レイアウト選択 において 左図のように左右にサイドメニューがあるレイアウトを選択している場合 イメージプロパティの 幅 の 設定は最大約 600px までとし て下さい NP01-F31 18
画像ファイルを挿入する手順例をご説明します CKEditor 内の イメージ ボタンをクリックします イメージプロパティ 起動後 アップロード タブを選択し 参照 ボタンからアップロードする画像を選択します 選択後 サーバーに送信 ボタンを押し アップロードを開始します アップロード後 選択した画像がプレビュー表示されます URL には 選択した画像のパスが表示されます 代替テキスト には 画像が表示されない場合に 画像の代わりに表示する文字列を設定します 幅 高さ には選択した画像の横 縦の大きさが表示されます 幅 高さ の横にあるアイコン は画像のアスペクト比( 縦横比 ) を固定にするかどうかの設定です 鍵が閉じている状態はアスペクト比が固定となり 鍵が開いている状態は画像の大きさを自由に変更できますが アスペクト比が崩れ 見た目が不自然な画像が出来る可能性があります NP01-F31 19
アイコン は 設定した画像サイズをリセットし 元画像の大きさを再表示します ボーダー は 画像の周りに黒い縁を設定します 横間隔 縦間隔 は 挿入する画像に設定した数値分 間隔を設けます 行揃え は特に指定する必要はありません 既にサーバーにアップロード済みの画像を選択する場合 イメージプロパティの サーバーブラウザー をクリックします NP01-F31 20
サーバー上の Images フォルダに登録されている画像が一覧で表示されます この中から 挿入したい画像をダブルクリックするとエクスプローラが閉じ イメージプロパティに選択した画像がプレビュー表示されます また エクスプローラ上で画像を右クリックすると 画像のサムネイルを選択 画像だけを表示 ダウンロード リサイズ ファイル名の変更 削除 を行う事が出来ます 補足 本資料には CKEditor&CKFinder を用いた Web コンテンツの作成例のみ記載していますが ブロ グ記事作成時も Web コンテンツと同様の方法でテーブル作成 画像の挿入等を行う事が出来ます NP01-F31 21
改定履歴 システム名 CKEditor CKFinder 補足説明資料 年月日記事 ( 改定事由 改定内容 ) 記入者 2012/2/17 初版 NP01-F31
CKEditor CKFinder 補足説明資料 2012 年 2 月 編集者 ( 株 ) ビジネスサービスソリューション開発部 NP01-F31