記事ブロックは、WYSIWYGエディタを用いてコンテンツを編集できる、最も基本的なブロックです。テキストを直接タイプして入力できます。現在のカーソルの位置や、選択中のテキストに対して、各種ボタンをクリックすることで、要素を挿入したり装飾を加えたりすることができます。

Concrete CMS(concrete5)バージョン8以降、CKEditorというWYSIWYGエディタを採用しています。

操作ボタン一覧

デフォルトで表示される操作ボタンは下記の通りです。

アイコン	ボタンの名称	機能
	ソース	HTMLソースを直接確認・編集できます。
	保存	エディタで編集している内容を保存します。ページ全体の保存ではなく、このブロック単体での保存ということにご注意ください。
	キャンセル	エディタで編集している内容を破棄します。ページ全体の編集の破棄ではなく、このブロック単体でのキャンセルということにご注意ください。
	切り取り	選択範囲を切り取ります。
	コピー	選択範囲をコピーします。
	貼り付け	コピーしたテキストをカーソル位置に貼り付けます。
	元に戻す・やり直す	編集を一つ前に戻したり、先に進めたりできます。
	太字・斜体・下線・打ち消し線・下付き・上付き	選択範囲にボタンで選択した装飾を加えます。
	書式を解除	選択範囲の書式を解除します。
	番号付きリスト・箇条書きリスト	カーソル位置にリストを挿入します。
	インデント・インデント解除	カーソル位置にインデントを挿入・解除します。
	左揃え・右揃え・中央揃え・両端揃え	段落の揃え方向を変更します。
	リンク挿入・編集	リンクやジャンプ先のアンカーを設定できます。　参照：ハイパーリンクウィンドウ
	リンク削除	選択したリンクを解除します。
	アンカー挿入・編集	カーソル位置にアンカー（ページ内リンク先）を設定できます。
	イメージ	カーソル位置に画像を挿入できます。参照：画像プロパティウィンドウ
	表	カーソル位置に表を挿入できます。参照：表のプロパティウィンドウ
	スニペット	スニペット（ページの名前などページによって異なる情報）を挿入できます。
	スタイル	段落や選択範囲のスタイルを変更できます。選択肢はテーマによって異なります。参照：スタイルプルダウンメニュー ※concrete5.7系の「カスタムスタイル」項目に該当します。
	書式	段落の書式を変更できます。 ※concrete5.7系の「フォーマット」項目に該当します。
	ブロック表示	ブロック要素を点線で囲み見やすくします。

記事ブロックに表示するボタンは設定変更できます。参照：記事ブロックエディター設定をする

追加できる操作ボタンは下記の通りです。

アイコン	機能の名称	機能
	概要	CKEditorのバージョンを表示できます。
	BiDi (テキスト方向)	テキストの向きを左から右、右から左を指定できます。
	Div コンテナーマネージャー	カーソル位置にDivコンテナを挿入します。
	Flash ダイアログ	Flashの埋め込みができます。
	Smiley を挿入	カーソル位置に絵文字（画像）を挿入します。 画像ファイルとして挿入されるため、絵文字に対応していない環境でも利用できます。
	Webスペルチェッカー	このプラグインはスペルチェックダイアログウインドウを追加します。
	Word から貼り付け	Wordから貼り付けます。 ※ Chromeなどの一部ブラウザでは使用できません。ショートカットキーのctrl+v(Windows), ⌘+v(Mac)をご使用ください。
	カラーボタン	文字色、背景色を設定できます。
	すべてを選択	ブロック内のテキスト・文字など全てを選択します。
	フォントサイズ & ファミリー	フォントサイズ、フォントファミリーを設定できます。
	プレーンテキストの貼り付け	プレーンテキストを貼り付けます。 ※ Chromeなどの一部ブラウザでは使用できません。ショートカットキーのctrl+shift+v(Windows), ⌘+shift+v(Mac)をご使用ください。
	プレビュー	このプラグインは、ドキュメントがエンドユーザーや印刷時にどのように見えるかプレビューできるボタンを追加します。
	リアルタイムスペルチェック (SCAYT)	リアルタイムスペルチェックのON/OFFを設定できます。
	引用	カーソル位置を引用文に設定します。
	改ページ	カーソル位置に印刷のための改ページ設定を追加します。
	絵文字	このプラグインは Unicode の絵文字を追加できます。コロン(:) のあとに2英文字を入力すると使用できる絵文字リストが表示されます。
	概要	CKEditor のバージョンを表示し、(CKEditorの)オンラインドキュメントやライセンス情報を表示します。
-	拡張画像	画像挿入の機能にキャプションを追加できるようにするプラグインです。 ただし、このプラグイン機能を有効にすると、リンクオプションや高度な設定オプションが利用できなくなります。
	検索 / 置換	検索、置換ができます。
	言語	言語の設定ができます。
	最大化	エディタを最大化することができるようになります。
-	自動リンク	このプラグイン機能を有効にすると、入力された URL テキストを自動的にリンクに変換します。URL テキストには http や https などのプロトコルが入っている必要があります。
	新しいページ	入力した全ての内容を削除し、新しいページになります。
	水平線	水平線を挿入します。
	特殊文字	カーソル位置に特殊文字を挿入します。

 

ハイパーリンクウィンドウ

ハイパーリンク情報タブ

リンクタイプは「URL」「ページ内のアンカー」「E-Mail」の３種類から選択できます。

「URL」に直接ブラウザ上に表示されるサイトのURLを設定してしまうと、ページを移動させたり、URLスラッグを更新したときなどにリンクの更新をしなければならなります。外部リンクを設定する以外はサイトのURLを直接入力しないようにしてください。

サイト内の他のページやアップロードされているファイルへのリンクを設定したい場合は、それぞれ「Sitemap」「サーバブラウザ」ボタンを使って挿入します。

 

サイト内リンクを設定するときは [Sitemap] ボタンを使う

「Sitemap」ボタンをクリックすると、サイトマップウィンドウが開きます。リンクしたいページの名前をクリックすると、ウィンドウに戻ります。このとき、URLの形式が実際に表示されているURLではないですが問題ありません。

上記設定で、実際にサイトマップで選択したページの実際にブラウザ上に表示されるURLは「http://example.com/index.php/team/about」ですが、Concrete CMS 内で「cID」という番号でページを管理しています。この「cID」のURLでリンク設定をすると、ページの階層を変更したとしても、この記事ブロックの内のリンクを変更する必要がありません。

直接ブラウザ上に表示されるURLを設定してしまうと、ページを移動させたり、URLスラッグを更新したときなどにリンクの更新をしなければならないため、外部リンクを設定する以外はURLの直接入力はしないようにしてください。

 

文章や画像をクリックしたらファイルを表示・ダウンロードさせる

クリックしたときにファイルを表示させたい場合は、対象の文章・画像を選択した状態でリンク挿入ボタンをクリックします。次に「サーバブラウザ」ボタンをクリックすると、ファイルマネージャーウィンドウが開きますので、表示したいファイルを選択してください。

次に紹介するターゲットタブの「ターゲット」設定を組み合わせると、クリックしたときに画像をポップアップさせたり、別ウィンドウに表示させたりするといった動作も実現できます。また、「高度な設定」タブの「強制的にダウンロード」にチェックを入れると文章やファイルをクリックしたときに、ブラウザで表示させないでファイルをダウンロードさせることもできます。

※ ただし、上記の別ウィンドウに表示やファイルの強制ダウンロードの設定は、PDF、または画像ファイルのみ適用可能。pptxやdocx、xlsxなどブラウザでプレビューできないタイプのファイルはファイルのダウンロードが実行されます。

 

ターゲットタブ

リンクを開くターゲットを選択できます。以下のケース以外のほかは、通常選択する機会はありません。

• 別のウィンドウやタブで開きたいとき（_blank）
• 画像ファイルをポップアップさせる（<lightbox>）

 

高度な設定タブ

CSSなど、高度な設定を行うことができます。

よく使われるのは「強制的にダウンロード」チェックです。こちらにチェックを入れると、リンクをクリックした際に指定したファイルのダウンロードが開始されます。

 

 

画像のプロパティウィンドウ

画像のURLを直接入力することもできますが、新規にアップロードしたりアップロード済みファイルのURLを挿入する場合は、「サーバブラウザ」ボタンをクリックして、ファイルマネージャーウィンドウを起動する方が便利です。

挿入先でどのように表示されるかはプレビューに表示されますので、参考にしながら設定を変更してください。

画像のプロパティウィンドウは、挿入済みの画像をダブルクリックまたは右クリックして開いたメニューの「画像のプロパティ」から再度開くことができます。

画像情報 タブ
URL	リモートサーバーなどに配置している画像URLや、サイト内にアップロードしているファイルの参照先URLが表示されます。 新しく画像を設定する際は空欄になっていますので、配置したい画像によって入力してください。 リモートサーバーなどに配置している画像を参照する > URL欄に参照URLを記入 サイト内にアップロードする/している画像を参照する > 「サーバブラウザ」ボタン
代替テキスト	画像が表示されなかった場合に表示されるテキストです。 画像を見られないユーザーにアクセシビリティを確保するため、入力が推奨されています。
プレビュー	画像のプレビューを確認することができます。 後述の各設定値を変更すると、変更した値に応じてプレビューも変わります。 ※ リモートサーバーからの参照URLを直接入力した場合は、一度保存しないと参照できません。
画像サイズの設定（幅・高さ）	画像の表示サイズを設定することができます。 幅・高さ欄の横に表示されているアイコンは以下のような動作をします。 鍵アイコン　　　：幅・高さの比率を固定/非固定にすることができます。 円弧矢印アイコン：幅・高さを画像ファイルデフォルトの設定に戻します。
枠線の幅	画像につける枠線（黒）の幅を指定することができます。
画像の表示位置設定（水平・垂直）	画像をブロック内のどの位置に表示するかを、水平・垂直方向で指定することができます。
行揃え	画像の表示位置を変更したときに、文字を画像のどちら側に表示するかを設定することができます。 ＜設定例＞ 右 左 なし​​​​​​​

 

リンク タブ
URL	画像をクリックした際の各種ファイルのリンク先を設定することができます。 新しく画像を設定する際は空欄になっていますので、配置したいファイルによって入力してください。 リモートサーバーなどに配置している画像を参照する > URL欄に参照URLを記入 サイト内にアップロードする/している画像を参照する > 「サーバブラウザ」ボタン
ターゲット	画像ファイル、PDFファイルの場合に新しいタブ等で表示させるなどを設定することができます。

※ 拡張画像プラグインを有効化していた場合は、以下のプロパティウィンドウが表示されます。

 

スタイルプルダウンメニュー

スタイルをクリックするとプルダウンメニューが表示されます。
オブジェクトスタイルの項目を選択すると、段落全体にスタイルが適用されます。
インラインスタイルの項目を選択すると、選択したテキストにスタイルが適用されます。

プルダウンメニューに表示されるスタイルの項目・選択肢はテーマによって異なります。

 

表のプロパティウィンドウ

表のボタンをクリックすると表のプロパティウィンドウが表示されます。
行数、列数を設定します。その他の項目は任意で指定しOKをクリックします。
挿入した表を右クリックすると、表の操作メニューが表示されます。

 

セル	カーソル位置のセルの前後に挿入・削除・分割、セルのプロパティ設定ができます。 セルをドラッグして複数選択してから右クリックすると、選択したセルを結合できます。
行・列	カーソル位置の前後に行・列を挿入・削除ができます。
表を削除	表を削除します。
表のプロパティ	挿入時の表のプロパティウィンドウが表示されます。