2015/11/21に行われた第4回concrete5初心者勉強会の資料です。

1. 第4回concrete5初心者勉強会
2015/11/21
1

2. アジェンダ
• 自己紹介
• concrete5って？
• 基本的な編集方法
• ブロック紹介
• レイアウト機能について
• ファイルマネージャーについて
2

3. 自己紹介
庄司 早香（ショウジ ハヤカ）
株式会社富士印刷
concrete5 Japan インテグレートパートナー
concrete5 Japan Evangelist
Twitter：miz563
Facebook：hayaka26
3

4. では本題へ
4

5. concrete5って？
5

6. concrete5って？
Webブラウザから直感的にホームページの運営
管理ができるオープンソースのCMSです。
ご自身のパソコンやレンタルサーバーなどに
インストールすると使うことができます。
6

7. CMSとは
コンテンツ・マネジメント・システムのこと。
簡単にいうと、専門的な知識（HTML・CSS・
JavaScriptなど）無しでホームページの更新な
どができるソフトのこと。
7

8. オープンソースなので、
ソフトウェアの設計図であるソースコードが
公開されています。
ダウンロードしてインストールすればすぐに触
ることが可能！
8

9. 基本的な編集方法
9

10. 基本的な編集方法
実際に触っていただきながらご説明いたします
今回のバージョン：5.7.5.2
使うテーマ：Elemental（デフォルトのやつ）
10

11. ログイン
トップページを一番下までスクロールして右下の
ログインをクリック
または、
http://サイトURL/index.php/login を開く
11

12. ログイン
12
ユーザーID：admin
パスワード：インストール時に設定したもの

13. ログイン
13
ログインするとサイト上部にツールバーが出ます。

14. サイトマップで管理
concrete5はサイトマップで
ページを管理しています。
14

15. サイトマップで管理
実際に確認してみましょう。
15

16. サイトマップで管理
これがデフォルトで
インストールされる
サンプルページです。
※フルサイトでインストール
した場合
16

17. サイトマップで管理
ページタイトルをクリックす
るとメニューが出ます。
17

18. サイトマップで管理
タイトルの横のアイコン部分を
ドラッグ＆ドロップすることで移動やコピーが
可能です。
18

19. 編集モード
ページのコンテンツを追加・修正するには編集
モードにする必要があります。
19

20. 編集モードへの入り方
1. 編集したいページに訪問します。
2. ツールバー左の鉛筆アイコンをクリック
3. アイコンが緑色になり、編集モードになった
ことが分かります。
20

21. 編集モードの終了
ページを編集した後、
鉛筆アイコンをクリック
公開や保存が可能です
21

22. 編集モードの終了
変更を公開：ログインしていないユーザーにも公
開されます
変更を保存：そのページの編集者や管理者のみ
が最新の状態を見ることができます。一般には公
開されません。
変更を破棄：今回の編集モードで行った作業を
破棄します
22

23. エリアとグローバルエリア
concrete5では編集モードから編集可能な場所
（エリアとグローバルエリア）がテーマで設定
されています。
その中にブロックと呼ばれるコンテンツや機能
を入れてページを作っていきます。
23

24. エリア
そのページ固有の要素
例）記事や画像などのメインコンテンツ
24

25. グローバルエリア
サイト内の他ページで共通
例）サイト名やグローバルナビゲーションなど
25

26. ブロックの追加方法
1. ツールバーの「＋」をクリック
左側にブロックの一覧が表示されます。
2. 追加したいブロックをエリアに
ドラッグ&ドロップ
26

27. ブロックの追加方法
27

28. ブロックの追加方法
28

29. ブロック紹介
29

30. ブロック紹介
基本のブロックと使い方をデモをしながら
いくつかご紹介します。
30

31. 記事
基本的なテキストと画像、リンクなどを
みたままで追加できます。
太字にしたり色をつけたりをワード感覚で行う
ことができます。
31

32. 画像
記事ブロックで画像を追加
するよりも多くのオプショ
ンを設定して画像を追加す
ることができます。
ホバー画像はテーマによっ
ては対応していない場合も
あります。
32

33. 特色
アイコンと見出しと説明文を表示するブロック
です。
33

34. オートナビ
ツリー構造のサイト内ナビゲーションを表示します
パンくずリストもこのブロックで表示が可能です
34

35. ページリスト
選択した階層にあるページの一覧を表示します。
階層構造をそのまま表示することはできません。
ブログの記事一覧や新着情報などで使えます。
35

36. 画像スライダー
スライドショーを表示するブロックです。
画像以外にもタイトルと説明を追加することが
可能です。
36

37. レイアウト機能に
ついて
37

38. レイアウト機能について
レイアウトを追加することで一つのエリアを複
数のエリアに分割することができます。
38

39. レイアウト機能について
39
現バージョンではグローバルエリアにレイアウ
トを追加することはできません。
グリッドフレームワークを利用したい場合は、
テーマ側で設定してある必要があります。

40. 追加の仕方
1. エリア名をクリック
2. 「レイアウトを追加」を
クリック
3. 列数を指定し、必要があれば幅を調整します
4. 「レイアウトを追加」をクリック
40

41. 削除や編集の仕方
1. 変更を加えたいレイアウトの列をクリック
2. コンテナーのレイアウトを編集をクリック
3. ゴミ箱アイコンで削除
※編集は幅の変更や移動のみで、カラム数
（列）を変えることはできません。
41

42. ファイルマネージャー
について
42

43. ファイルマネージャーについて
concrete5では画像や動画などをファイルマネ
ージャーで管理しています。
43

44. ファイルの追加
デスクトップからドラッグ&ドロップ
または、
ファイルアップロードを
クリックし追加
44

45. ファイルマネージャー
ファイルの行をクリックすると
メニューが開きます。
45

46. 編集
画像のサイズを変えたりフィルターをかけたり
できます。
46

47. 置き換え
ファイルを置き換えたいときは置き換えから行
うことをお勧めします。
concrete5ではファイルもバージョン管理され
ているので置き換えてももとに戻すことが可能
です。
47

48. セット
ファイルの整頓が可能です。
一つのファイルを複数のセットに入れることが
できます。
フォルダにいれるのではなく付箋を貼っていく
イメージです。
48

49. ありがとうございました！
49