concrete5を使ってみる

直感的にページ編集などを行えるCMS「concrete5」を使ってみました。
今回はさくらインターネットのクイックインストールを使用します。

データベースの作成

サーバコントロールパネルにログインします。

started-with-concrete5_01

左メニューのアプリケーションの設定 > データベースの設定を選択。

started-with-concrete5_02

データベースの新規作成を選択。

started-with-concrete5_03

各項目を入力してデータベースを作成をクリックします。
データベースの文字コードはUTF-8を選択してください。

started-with-concrete5_04

これでデータベースの作成は完了です。
データベース名や接続用パスワードなどはのちほど使用するので、どこかにメモしておいてください。
 

クイックインストール

左メニューの運用に便利なツール > クイックインストールを選択します。
クイックインストールのカテゴリメニューからCMSをクリック。

started-with-concrete5_05

concrete5をクリック。

started-with-concrete5_06

ライセンスなどを確認してチェックを入れ、各項目を入力してインストールをクリック。

started-with-concrete5_07

インストールが完了しました。
アプリケーションの設定へ進むをクリックして、concrete5の設定画面へ移動します。

started-with-concrete5_08

 

No input file specified.と表示される場合

concrete5の設定画面で「No input file specified.」と表示される場合、php.iniに以下を記述すると解決できるようです。

cgi.fix_pathinfo = 1

php.iniはサーバコントロールパネルの左メニューのアプリケーションの設定 > PHP設定の編集から記述できます。

started-with-concrete5_09

 

concrete5の設定

使用言語を選択します。

started-with-concrete5_10

必須項目など問題なければインストールを続けるをクリック。

started-with-concrete5_11

各項目を入力してインストールをクリック。

started-with-concrete5_12

これでインストールが完了しました。
 

ページ編集

初めての場合は利用ガイドが表示されるので、ナビゲーションの各項目の説明を見てみます。

started-with-concrete5_13

started-with-concrete5_14

started-with-concrete5_15

started-with-concrete5_16

started-with-concrete5_17

started-with-concrete5_18

ページの編集をする場合は、ナビゲーション左の鉛筆アイコンをクリックします。

started-with-concrete5_19

編集モードに変わりました。
編集できる場所はオンマウスすると緑色の枠で囲われます。

started-with-concrete5_20

クリックするとメニューが表示されるので、ブロック編集をクリック。

started-with-concrete5_21

編集画面が表示されるので、内容を変更して保存をクリック。

started-with-concrete5_22

内容が変更されたのが確認できました。
この時点では実際のページには反映されていないので、ナビゲーションの鉛筆アイコンをクリックします。

started-with-concrete5_23

左側に「変更を公開」「変更を保存」「変更を破棄」のボタンが表示されました。
「変更を公開」は今行った変更を公開、「変更を保存」は今の編集を保存して編集モードを終了、「変更を破棄」は今の編集を破棄して編集モードを終了します。

started-with-concrete5_24

一旦保存した後にナビゲーションのプラスアイコンをクリックします。
左側に追加できる要素の一覧が表示されます。

started-with-concrete5_25

追加したい要素をドラッグアンドドロップで緑色の線部分に移動させると、その部分に要素の追加を行えます。
今回はYouTubeを追加してみます。

started-with-concrete5_26

URLの指定の他にもループ再生や自動再生の設定も行えます。
設定が完了したら新規をクリック。

started-with-concrete5_27

YouTubeの追加が行えました。

started-with-concrete5_28

次にページの追加を行ってみます。
ナビゲーション右から2番目のアイコンを選択して、空白のページをクリック。

started-with-concrete5_29

空白のページが作成されました。
ナビゲーションのプラスアイコンをクリックして要素を追加してみます。

started-with-concrete5_30

記事を追加してみます。

started-with-concrete5_31

ドラッグアンドドロップで追加したい個所へ移動します。

started-with-concrete5_32

入力エリアが表示されるので、入力して保存をクリックで記事が追加されます。

started-with-concrete5_33

ページ名などを設定する場合は、ナビゲーションの歯車アイコンをクリックして、コンポーサーを選択します。
各項目を入力して、保存して終了をクリック。

started-with-concrete5_34

編集モードが終了して最初の画面に戻りました。
この時点では今までの編集は実際のページに反映されていないので、「このバージョンを承認する」をクリックして実際のページにも反映させます。

started-with-concrete5_35

これで実際のページにも反映されました。

まだざっとしか触れていませんが、ページの編集を直感的に行えて、コードの分からない人でも手軽に編集できそうなので、案件によっては使ってみてもいいかもしれません。
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年4月
 123456
78910111213
14151617181920
21222324252627
282930