1. CKEditorとは?
Drupalで使われる CKEditor は、管理画面の本文入力などで使う「見たまま編集（WYSIWYG）」エディタです。HTMLの知識がなくても、Wordのように直感的に文章を編集できるツールです。ブログ記事やニュース、商品説明などのコンテンツ作成時に使用します。
2. CKEditorとDrupal
Drupalでは、CMS運用者（ユーザー）を役割としての編集者や承認者に分けて管理し、「誰が」「どこまで」コンテンツに携わるかを管理します。（例：編集者が作成したコンテンツを確認し、承認者が公開作業を行なう）CKEditor は単なる文章入力ツールではなく、CMSの権限設計と強く結びつく編集インターフェースです。
CKEditorを使うことで、この「誰が」「どこまで」に加え、「どの形式で」コンテンツに触れるかをコントロールすることが出来ます。例えば下記のように編集者はコンテンツのベース部分のみ作成し、承認者はその内容を確認するだけでなく、編集の権限を追加した状態で編集を加え、公開に進めるといった運用が可能になります。
設定画面から下記の手順で進めます。
1. 環境設定 → コンテンツ作成 → テキストフォーマットとエディターを選択
2. [ + テキストフォーマットを追加] を選択
3. CKEditorを選択
テキストエディターでCKEditorを選択します。下記の赤いエリアでアイコンをドラッグ＆ドロップで使う装飾を編集します。「Active toolbar」にあるアイコンがこの役割のユーザーが使えるアイコンです。編集者が使うアイコンを太字にする機能と、画像追加機能に限定しました。
承認者も同様に設定します。承認者は使える機能を増やしたので、「Active toolbar」にはアイコンが多く並んでいます。
以上の設定により、ユーザーがログインしてコンテンツ編集に進む場合、ユーザーの役割ごとに表示されるアイコンが出し分けされ、役割に応じたコンテンツ編集が可能になります。それでは実際にコンテンツ編集に進みましょう。
3. CKEditorの画面構成
CKEditorの編集画面は上部にツールバー(ボタンが並んでいる部分)、下部に編集エリアがあります。ツールバーのボタンを使うことで、文字の装飾やリンクの挿入などを簡単に行なうことが出来ます。
4. 主要なボタンと機能
太字(Bold)
- アイコン:「B」
- 機能:選択したテキストを太字にします
- 使用例:重要なキーワードや見出しを強調したいときに使用
斜体(Italic)
- アイコン:「I」(斜めの文字)
- 機能:選択したテキストを斜体にします
- 使用例:英単語や専門用語、引用文などに使用
箇条書きリスト
- アイコン:黒丸が並んだマーク
- 機能:項目を箇条書きで表示します
- 使用例:順序のない項目の列挙(メリット一覧、特徴など)
番号付きリスト
- アイコン:1.2.3.の数字
- 機能:項目に自動で番号を振ります
- 使用例:手順やランキングなど順序が重要な場合
リンク挿入
- アイコン:鎖のマーク
- 機能:テキストや画像にURLリンクを設定します
- 使い方:テキストを選択してボタンをクリックし、URLを入力
画像挿入
- アイコン:山と太陽のマーク
- 機能:記事内に画像を挿入します
- 使い方:ボタンをクリックして画像をアップロードまたは選択
見出し(Heading)
引用(Blockquote)
- アイコン:引用符「"」マーク
- 機能:選択したテキストを引用として表示します
- 使用例:他者の言葉や重要な一文を強調
ソース表示
- アイコン:「<>」や「ソース」
- 機能:HTMLソースコードを表示・編集します
- 注意:HTML知識がある場合のみ使用を推奨
5. 効果的な使い方のコツ
- 見出しを活用する: 記事全体の構造を整理し、読みやすさとSEO効果を高めます
- 装飾は控えめに: 太字や色の使いすぎは逆に読みにくくなります
- リストで整理: 情報を箇条書きにすると、視覚的に理解しやすくなります
- 他サイトからコピーする際は注意: 不要な書式が含まれることがあるため、「書式クリア」ボタンで一度リセットしましょう
- プレビュー機能を活用: 保存前にプレビューで表示を確認する習慣をつけましょう
まとめ
CKEditorは、HTMLの知識がなくても直感的にコンテンツを作成できる強力なツールです。各ボタンの機能を理解することで、より魅力的で読みやすいコンテンツを効率的に作成できます。最初はよく使うボタン(太字、リスト、リンク、見出し)から使ってみて、徐々に他の機能も試してみてください。実際に使いながら慣れていくことが上達への近道です。
