作成日 ２０１２年２月１７日

第１版

本資料で説明しているCKEditor&CKFinderはCMS分野では広く利用されている有名なフリーソフ

トです。しかしフリーソフトであるため、弊社では動作保障できません。また不具合が発生した場合、

障害回避に努めますが、基本的に改善のバージョンアップを待つ形となります。予めご了承ください。

CKEditor、CKFinder

補足説明資料

NP01-F31 Rev 1.0 1

目次

第１章 CKEditor の使い方 ............................................................................................................................. 2

表（テーブル）の作成方法 ............................................................................................................................... 3

ハイパーリンクの設定 ...................................................................................................................................... 7

コンテンツの作成例 ........................................................................................................................................ 10

表（テーブル）の作成 .................................................................................................................................... 10

画像ファイルの挿入 ........................................................................................................................................ 17

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 2

第１章 CKEditor の使い方

CKEdior の基本的な使い方を紹介します。

LocoCUBE カスタマイズで使用できる機能は以下の画像の通りです。

『各機能ボタンについて』

ボタン 機能名 備考

ソース html ソースの表示、非表示を切り替えます。

テンプレート(雛形) 用意されているテンプレートを用いて文章を作成します。

切り取り、コピー 選択したテキスト文字列を切り取り、コピーします。

貼り付け、プレーンテ

キスト貼り付け、ワー

ド文章から貼り付け

コピーしたテキスト文字列を貼り付けます。

元に戻す、やり直し 操作を元に戻します。

操作をやり直します。

検索、置き換え 文章内の文字列を検索、もしくは特定の文字列を別な文字列

に置き換えます。

すべて選択 全て選択します。

スペルチェック 文章内のスペルチェックを行います。

フォーマット削除 選択した範囲のフォーマットを削除します。

スタイル 文章中に様々なスタイルを適用します。

フォーマット 文章中に見出し等のフォーマットを適用します。

フォント フォントの種類を指定します。

サイズ フォントサイズを指定します。

テキスト色、

背景色

テキスト文字列の色を指定します。

テキスト文字列の背景色を指定します。

ブロック表示 ブロック表示に変更します。

太字、斜体 選択したテキスト文字列を太字、斜体にします。

下線、打ち消し線 選択したテキスト文字列に下線、打ち消し線を加えます。

添え字、上付き文字 テキスト文字列を添え字、上付き文字に変更します。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 3

段落番号、箇条書き 段落番号付きの段落、箇条書きに変更します。

ブロック引用 文章を引用・転載する際に利用します。

div コンテナ 新たに文章中に div 要素を追加します。

テキストの向き 作成する文章の向きを変更します。

インデント解除、

インデント

インデントの解除、インデントの設定を行います。

左揃え、中央揃え、

右揃え、両端揃え

選択したテキスト文字列を左揃え、中央揃え、右揃え、両端

揃えにします。

リンク挿入／編集、

リンク解除

URL 等のリンクの挿入や編集を行います。

リンクの解除を行います。

アンカー挿入／編集 アンカーの追加、編集を行います。アンカーとは、ページ内

ジャンプなどに使用する目印のことで活用するためには HTML

に関する知識が必要となります。

イメージ 文章中に画像を挿入します。CKfinder を用いる事で、サーバ

ーに画像をアップ＆任意の画像を挿入できます。利用方法は

本マニュアルの第 3 章で説明します。

フラッシュ 文章中にフラッシュを挿入します。こちらも CKfinder を用

いてサーバーにアップ&任意のフラッシュを挿入できます。

テーブル 表を挿入します。

横罫線 横罫線を挿入します。

絵文字 文章中に顔文字を挿入します。

特殊文字挿入 文章中に特殊文字を挿入します。

改ページ挿入 文章中に改ページを挿入します。

最大化 CKEditor を全画面で表示します。

ブロック表示 編集中の文章のブロック要素を表示します。

CKEditor バージョ

ン情報

CKEditor のバージョン情報を表示します。

表（テーブル）の作成方法

1. 表を挿入したい位置でメニューの「テーブル」ボタンをクリックします。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 4

2. 「テーブルプロパティ」画面が表示されますので、各項目を設定し「OK」をクリックすると表

が挿入されます。

項目名 備考

行 表の行数を指定します。

列 表の列数を指定します。

テーブルヘッダ テーブルヘッダの指定を行います。

テーブルヘッダの指定をすると文字が強調表示

されます。

ボーダーサイズ 罫線のサイズを指定します。「0」にすると罫線

が消えます。

行揃え 表の表示位置を指定します。

幅 表の幅をピクセル単位で指定します。

高さ 表の高さをピクセル単位で指定します。

セル内余白 セル内の罫線からの余白を指定します。

セル内間隔 セルとセルの間隔を指定します。

キャプション 表の見出しを挿入したい場合に見出しを入力し

ます。

特に入力の必要はありません。

テーブルの概要 表の概要を入力します。

特に入力の必要はありません。

※「高度な設定」タブについては、使用する可能性が低いと思いますので説明は省略します。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 5

上記のテーブルプロパティの場合、以下のように表が作成されます。

■ 表の削除

表の中を右クリックし、表示されたメニューから「テーブル削除」をクリックすると表が削除

されます。

セルの編集

編集したいセル内を右クリックし、表示されたメニューから「セル」→「セルプロパティ」をク

リックすると「セルプロパティ」画面が表示されます。

必要な項目を入力し「OK」をクリックして下さい。

項目名 備考

幅 セルの幅を指定します。

ピクセルかパーセントで指定して下さい。

高さ セルの高さをピクセル単位で指定します。

折り返し 文字列を折り返し表示にするかどうか指定します。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 6

セル横の整列 文字列の横方向の揃え方を指定します。

「なし、左、中央、右」から選択して下さい。

セル縦の整列 文字列の縦方向の揃え方を指定します。

「なし、上、中央、下」から選択して下さい。

セルタイプ セルタイプを指定します。

「テーブルデータ（td）、テーブルヘッダ（th）」から指定して下さい。

※テーブルヘッダ（th）を指定して構いません。

縦幅（行数） セル結合している場合、最小単位のセルの何行に相当するか表示されます。

横幅（列数） セル結合している場合、最小単位のセルの何列に相当するか表示されます。

背景色 セルの背景色を指定します。

「色の選択」をクリックすると「色選択」画面が表示されますので色を指定し

て下さい。

ボーダーカラー セルの罫線の色を指定します。

「色の選択」をクリックすると「色選択」画面が表示されますので色を指定し

て下さい。

段落番号、箇条書きの設定

段落番号、箇条書き設定にする文字列を範囲指定し、段落番号、箇条書きアイコンをクリックす

ると設定されます。

行頭文字の変更する場合は、段落番号、箇条書きの位置で右クリックし、表示されたメニューか

ら「箇条書きプロパティ」、「段落番号プロパティ」をクリックします。

「段落番号プロパティ」、「箇条書きプロパティ」画面が表示されますので、変更する行頭文字を

クリックします。段落番号については、段落の開始する値も指定できます。

【注意】

複数のセルを選択した状態でセルの編集（設定変更）を行った場合、表の形式が崩れる場合があり

ますので、セル１つずつに対して操作を行って下さい。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 7

ハイパーリンクの設定

ハイパーリンクの設定では、リンクタイプを「URL、このページのアンカー、E-Mail」の中から選択

する事ができます。

リンクタイプで「URL」を選択した場合

項目名 備考

プロトコル プロトコルを選択します。

「http://、https://、ftp://、news://、その他の」の中から選択して下さい。

URL リンクする URL を入力します。

ターゲット リンク先の開き方を選択します。

「<なし>、<フレーム>、<ポップアップウィンドウ>、新しいウィンドウ（_

空白）、最上部ウィンドウ（_トップ）、同じウィンドウ（_同一）、親ウィンド

ウ（_親）」の中から選択して下さい。

アップロード リンク先で指定するファイルをサーバーにアップロードします。

【注意】

リンク設定する文字数が長い場合、表示枠から

はみ出しスタイルが崩れてしまう場合があり

ます。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 8

イメージ、圧縮ファイル等をアップロード出来ます。

※「高度な設定」タブについては、使用する可能性が低いと思いますので説明は省略します。

リンクタイプで「このページのアンカー」を選択した場合

※アンカーを設定する事はありませんので、説明は省略します。

項目名 備考

アンカー名 リンクするページ内のアンカー名を選択します。

※あらかじめアンカーの設定が必要です。

エレメント ID エレメント ID を選択します。

リンクタイプで「E-Mail」を選択した場合

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 9

項目名 備考

E-Mail アドレス E-Mail アドレスを入力します。

件名 件名を入力します。

本文 本文を入力します。

※「高度な設定」タブについては、使用する可能性が低いと思いますので説明は省略します。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 10

コンテンツの作成例

「CKEditor」を使用して web コンテンツを作成する例を紹介します。

例．表（テーブル）の作成

「Web 管理」－「テーマ選択」－「レ

イアウト選択」において、左図のよ

うに左右にサイドメニューがあるレ

イアウトを選択している場合

テーブルプロパティの「幅」の設定

は最大約 430px までとして下さい。

【注意】

以下のような場合には、公開ページのレイアウト表示が崩れる事がありますのでご了承下さい。

①表組で設定した表の幅の設定や画像の表示幅が大きすぎる場合

・左右両方にサイドメニューがあるスタイル

→表の幅、画像の表示幅が 430px を超えて設定された場合

・左右どちらか一方にサイドメニューがあるスタイル

→表の幅、画像の表示幅が 600px を超えて設定された場合

②携帯電話で表組みのある公開ページを参照する場合

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 11

「Web 管理」－「テーマ選択」－「レ

イアウト選択」において、左図のよ

うに左右どちらか一方にサイドメニ

ューがあるレイアウトを選択してい

る場合

テーブルプロパティの「幅」の設定

は最大約 600px までとして下さい。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 12

下記のような表を作成する手順例をご説明します。

① コンテンツの編集画面で「エディタ」を「リッチ」の方を選択し「CKEditor」が起動します。

メニューバーにある「テ―ブル」ボタンをクリックすると「テーブルプロパティ」が表示されま

す。下記のように行＝6、列＝6、幅＝600 と設定します。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 13

② 6 行×6 列の表が挿入されます。

項目名用として、下記の赤枠セルに対してセルの結合の操作を行います。

対象セルを右クリックし、「セル」－「右に結合」を選択します。

③ 項目名用のセルが結合されました。

下記の赤枠セル（第○学期を入力）に対して表示幅の設定を行います。

対象セルを右クリックし、「セル」－「セルプロパティ」を選択します。

「セルプロパティ」では「幅」を「33 パーセント」と設定します。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 14

④ ２行名のセルに対して表示幅の設定を行います。

対象セルを右クリックし、「セル」－「セルプロパティ」を選択します。

赤枠のセル（月を入力）では「幅」を「8 パーセント」と設定します。

青枠のセル（行事名を入力）では「幅」を「25 パーセント」と設定します。

⑤ 各セルにテキスト文字列を入力します。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 15

⑥ テキスト文字列の修飾を行います。

・学期名のセルに対しては、フォントサイズの拡大指定と中央揃えを設定します。

・各月のセルに対しては、中央揃えを設定します。

⑦ 学期名と各月のセルに対して背景色を指定します。

対象セルを右クリックし、「セル」－「セルプロパティ」を選択します。

「セルプロパティ」では「背景色」で希望する背景色を設定します。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 16

⑧ 編集した結果を確認します。

画面下部にある「プレビュー」をクリックすると編集した内容が確認できます。

編集内容に間違いなければ、「下書き（非公開）」か「公開」をクリックし更新します。

【参考】

作業途中に操作間違いにより、意図せず編集内容がクリアされる事もあるかと思います。

編集作業の途中でこまめに「下書き（非公開）」をクリックし更新する事をお勧めします。

【参考】

他アプリケーション（MS Excel や Word）で作成した表をコピーされる事もあるかと思いますが、

表の内容は完全にコピーされませんので、あらかじめご了承願います。

・Excel

セルの背景色、文字列の修飾（フォントサイズ、フォントカラー、配置設定）はコピーされません。

・Word

文字列の修飾（フォントサイズ、フォントカラー、配置設定）はコピーされません。

※Excel、Word のバージョンによっても上記以外の症状が発生するかもしれませんが、ご了承願い

ます。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 17

例．画像ファイルの挿入

「Web 管理」－「テーマ選択」

－「レイアウト選択」において、

左図のように左右にサイドメ

ニューがあるレイアウトを選

択している場合

イメージプロパティの「幅」の

設定は最大約 430px までとし

て下さい。

【注意】

以下のような場合には、公開ページのレイアウト表示が崩れる事がありますのでご了承下さい。

①表組で設定した表の幅の設定や画像の表示幅が大きすぎる場合

・左右両方にサイドメニューがあるスタイル

→表の幅、画像の表示幅が 430px を超えて設定された場合

・左右どちらか一方にサイドメニューがあるスタイル

→表の幅、画像の表示幅が 600px を超えて設定された場合

②携帯電話で表組みのある公開ページを参照する場合

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 18

「Web 管理」－「テーマ選択」

－「レイアウト選択」において、

左図のように左右にサイドメ

ニューがあるレイアウトを選

択している場合

イメージプロパティの「幅」の

設定は最大約 600px までとし

て下さい。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 19

画像ファイルを挿入する手順例をご説明します。

CKEditor 内の「イメージ」ボタン

をクリックします。

「イメージプロパティ」起動後、

「アップロード」タブを選択し、

「参照」ボタンからアップロードす

る画像を選択します。

選択後、「サーバーに送信」ボタン

を押し、アップロードを開始します。

アップロード後、選択した画像がプ

レビュー表示されます。

「URL」には、選択した画像のパス

が表示されます。

「代替テキスト」には、画像が表示

されない場合に、画像の代わりに表

示する文字列を設定します。

「幅」「高さ」には選択した画像の横、

縦の大きさが表示されます。

「幅」「高さ」の横にあるアイコン

「 」は画像のアスペクト比（縦横

比）を固定にするかどうかの設定で

す。鍵が閉じている状態はアスペク

ト比が固定となり、鍵が開いている

状態は画像の大きさを自由に変更で

きますが、アスペクト比が崩れ、見

た目が不自然な画像が出来る可能性

があります。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 20

アイコン「 」は、設定した画像サ

イズをリセットし、元画像の大きさ

を再表示します。

「ボーダー」は、画像の周りに黒い

縁を設定します。

「横間隔」、「縦間隔」は、挿入する

画像に設定した数値分、間隔を設け

ます。

「行揃え」は特に指定する必要はあ

りません。

既にサーバーにアップロード済みの

画像を選択する場合、イメージプロ

パティの「サーバーブラウザー」

をクリックします。

第 1章 CKEditorの使い方

NP01-F31 Rev 1.0 21

サーバー上の「Images」フォルダに登録されている画像が一覧で表示されます。

この中から、挿入したい画像をダブルクリックするとエクスプローラが閉じ、イメージプロパティに選

択した画像がプレビュー表示されます。

また、エクスプローラ上で画像を右クリックすると、「画像のサムネイルを選択」、「画像だけを表示」、

「ダウンロード」、「リサイズ」、「ファイル名の変更」、「削除」を行う事が出来ます。

※補足

本資料には CKEditor&CKFinder を用いた Web コンテンツの作成例のみ記載していますが、ブロ

グ記事作成時も、Web コンテンツと同様の方法でテーブル作成、画像の挿入等を行う事が出来ます。

NP01-F31 Rev 1.0

改定履歴

システム名 CKEditor、CKFinder補足説明資料

年 月 日 記事（改定事由・改定内容） 記入者

2012/2/17 初版

NP01-F31 Rev 1.0

CKEditor、CKFinder 補足説明資料

２０１２年２月

編集者 （株）ビジネスサービス ソリューション開発部