直感的な操作で更新できるCMS、concrete5の「編集モード」とは？

いろんな CMS に関するたくさんの紹介記事の中で、よく出てくるフレーズが

直感的な操作でコンテンツを作成・編集できる

というのがあると思います。concrete5 もそのひとつです。

HTML とか CSS とか javascript とかなんぞや、という人にとっては「見たまま編集できる」というのはすごく便利です。（デザインを考えることは別として）ここに画像を入れて、ここにはこういう文章を入れて…とあまり深く考えず、ページが更新できます。

今回はその「見たまま編集できる（直感的な操作で編集できる）」というのはどんな感じなのかを、かんたんにご紹介します。

あ、ここ直したい

ページを確認していて、そんなことを思ったことはありませんか？いちいちエディタで html ファイルや CSS ファイルを修正して、サーバーに反映して…とサイトを更新するためには手間がかかります。サーバーに反映させるために、サーバーのファイルにアクセスするための権限も必要だったり。

concrete5 だとボタンひとつクリックするだけで編集ページに移動できます。

これだけで編集モードになるので、そのままサイトの更新作業に入れます。（もちろん、編集権限がない人には表示されないボタンです。concrete5 の権限関連のお話はまた後日…）

ブロックはドラッグ＆ドロップでページに即反映

※ ブロック とは：concrete5 で一番小さい編集可能な範囲のこと。詳細な解説は日本語公式コミュニティの解説ページまで！

今書いてるこのブログの文章部分もブロックでできてますし、右サイドバーに表示されている Topics とか Reloated Stories もブロックでできています。

今回は、まっさらなページを作って記事ブロックを追加してみましょう。

これだけで終わりです。あとは、ページの保存 or ページを公開すれば更新完了です。

動画では紹介していませんが、記事ブロックだとワープロのように見たままに文字を装飾したりリンクを貼ったり画像を貼り付けたりといろいろ編集できます。

また、一度ブロックを設置してから「ブロックの設置場所、ここじゃなかった…」となっても大丈夫です。動かしたいブロックをマウスでドラッグ＆ドロップするだけで移動できます。

ページレイアウトの変更もかんたんに

さて、ブロックの動画を見ていただいた方の中で「え…こんな幅広いページでもったいない…文章の右側に画像とか入れたい…」とか思った方、いらっしゃいますか？そうですよね。色々とページの中をレイアウトしたいですよね。

レイアウトの変更となると、HTML や CSS の知識が必要なのでは、と思ってしまいますが、実は知識がなくてもかんたんにレイアウトを変更できるんです。

レイアウトを追加する操作はマウス操作だけ。レイアウトもブロック同様、ドラッグ＆ドロップで移動できます。

少し詳しくお話すると、concrete5 にはページの中に「エリア」という領域があります。この領域はブロックを配置するためのものです。

今回は、メインエリアの中に3つの小さなエリアを追加しました。このエリアに対して、ブロックを追加すると赤枠で囲ったようにすることができます。

レイアウトは最大12カラムまで横に分割することができます。縦に分割することはできないので、縦にレイアウトを追加していきたい場合は、同じ手順でレイアウトを追加していきましょう。

レイアウト機能のひとつとして、既存レイアウトでプリセット（テンプレート）を作成することができます。同じレイアウトをページ中にたくさん配置したい、というときには便利な機能ですので、お試しください。

今回は記事ブロックを例に紹介しましたが、concrete5 には標準で34種類のブロックが搭載されています。目的のブロックがなかったとしても、concrete5 では有償・無償のアドオンがたくさんありますので、ぜひ一度マーケットプレイスを覗いてみてくださいね。

concrete5 Add-Ons（英語サイト）

今後も CMS には標準装備とされているページのバージョン管理、ワークフロー機能、権限設定、ファイルマネージャー機能などなど、随時紹介していく予定です。

お楽しみに！