第3回concrete5初心者勉強会の資料です。

1. 第3回concrete5初心者勉強会

2. アジェンダ
 concrete5の仕組み
 ブロックの基礎
 レイアウトについて
 ブロックの紹介
 テーマ・デザインについて
 サイトマップについて
 実践

3. 自己紹介
大山武彦
Twitterアカウント ＠take566
職業 インフラ系エンジニア
趣味 音楽 (http：//take566.com)←concrete5で作っています。

4. concrete5の仕組み
concrete5をさわる前に、concrete5の仕組みをご紹介します。
concrete5とは、HTMLやPHPを意識せずに使えるCMSです。
複雑なことをやろうとする場合は、確かにHTMLやPHPは
必須ですが、記事の更新ページの作成は基本的な機能だけで
ページを作ることができます。

5. concrete5の仕組み
覚えることは2つ
ブロック
ページタイプ
この二つを使いこなすことでホームページが作れます。

6. concrete5の仕組み
ブロックとは
ブロックと呼ばれるホームページの記事を書くスペース。
これを使いこなしてホームページをつくります。
HTMLがわからなくても、テキスト入力で記事を作れます。
(バックグラウンドでは入力されたテキストがHTML化されてます。)

7. concrete5の仕組み
ページタイプ
たとえば、アメブロなどのブログのテーマを作る場合
あらかじめ用意されたテーマがあると思います。
テーマのテンプレートをconcrete5では
ページタイプと呼びます。

8. concrete5の仕組み
concrete５では5.6系と5.7系というバージョンがあります。
5.6系
オープンソースになってから5.7がリリースされるまでのバージョン
5.7系
パッケージが新しくなり、操作性改善

9. concrete5の仕組み
本日の勉強会では5.7.4.2を使用します。
デフォルトのテーマElmentalを使用します。
Elementalをまずは触ってみましょう。

10. concrete5の仕組み
これがデフォルトのままの画面です。
初心者には操作が難しいと思いますので
まずは、右上のアイコンをクリック

11. concrete5の仕組み
管理画面 システムと設定をクリック

12. concrete5の仕組み
基本 アクセシビリティをクリック

13. concrete5の仕組み
これがデフォルトのままの画面です。
初心者には操作が難しいと思いますので
まずは、右上のアイコンをクリック

14. concrete5の仕組み
管理画面 システムと設定をクリック

15. concrete5の仕組み
基本 アクセシビリティをクリック

16. concrete5の仕組み
アクセシビリティ
• ツールタイトルを有効化
• ツールバーフォントサイズを大き
くする
をチェック入れる。
そして保存する。

17. concrete5の仕組み
システムと設定
権限とアクセス
上級者権限モード

18. concrete5の仕組み
上級者権限モード
上級権限モードを有効にするをクリッ
ク
これを有効にすることにより
記事を書くときの権限が細かく設定で
きる。

19. ブロックの基礎
ｃoncrete5は、記事ブロックを活用
することによってホームページを作る
ことができます。まずは、記事の編集
の仕方です。ログイン後左上の編集を
クリックをします。

20. ブロックの基礎
記事の編集
記事の編集は、まずマウスポインタを
編集したいブロックに持っていきます。

21. ブロックの基礎
記事の編集
左クリックをして、ブロック編集をク
リック

22. ブロックの基礎
記事の編集
左クリックをして、ブロック編集をク
リック。
これで既存のブロックを編集できます。

23. ブロックの基礎
編集した記事を公開するには
編集モードを終了をクリック
変更を公開
今書いた記事をその場で公開できる。
変更を保存
一旦記事を保存して他の人に確認して
もらったりあとで読み返してから公開
することができます。

24. レイアウトについて
ホームページ作成にはヘッダ・フッタ・メイン
と言った記事の領域があります。
Concrete5は自由にブロックを置くことができ
ます。
また、elementalではtwitter bootstrapを採用
しているため自由にレイアウト変更できます。
メイン
フッダ
ヘッダ

25. レイアウトについて
レイアウトの変更方法
新規でレイアウトを変更するには
レイアウトのタブメインを左クリックして
レイアウトの追加

26. レイアウトについて
レイアウトの変更方法
カラム数を変えることでレイアウトの区切り
が変わります。

27. ブロックの紹介
記事ブロック
記事を書くために必須のブロックです。
メモ帳を書くように自由に記事が書けま
す。

28. ブロックの紹介
画像スライダー
ホームページのトップページに
最適のブロック。
画像と記事を書くことができます。

29. ブロックの紹介
オートナビ
サイトマップからメニューを作ることが
できます。

30. デザインとテーマについて
Concrete5ではテーマとデザインは
デフォルトでテーマのデザインセットが入っています。
これを使用することによりテーマを変えることができます。

31. デザインとテーマについて
ページ設定
デザイン
からテーマの編集が行えます。

32. デザインとテーマについて
デザイン
テーマ
カスタマイズからデザインをカスタマイズし
ます。
また、テーマを入手する場合は
下の他のテーマを入手するから
マーケットプレイスで購入できます。

33. サイトマップについて
フルサイトマップ
管理画面より
フルサイトマップが見ることができる
ここから新しいページを作成したり
並べ替えたりすることができる。

34. 実践
今まで紹介してきた機能をもちいて
ホームページを作成してみましょう
わからないことがあれば手を上げてください
題材に困ったらいろいろご紹介します。

35. 参考
わからないことがあれば参考にするサイト
concrete5 5.7操作ガイド
concrete5の公式ページの5.7バージョンの操作方法が書いてある
http://concrete5-japan.org/help/5-7/using-concrete5-7/
concrete5初心者会
concrete5初心者の情報交換の場としてFacebookページを作成しました
https://www.facebook.com/groups/343417945828325/
週間concrete5 youtbeログ
週間concrete5を見逃した！とか動画でconcrete5を見たい場合はここから探しましょう
https://www.youtube.com/user/concrete5japan/featured

36. 参考
わからないことがあれば参考にするサイト
山野井研究室
古くからconcrete5のアドオン作成や操作方法を紹介している山野井先生のページ
http://www.yamanoi.org/concrete5/
concrete5 japan CEO 菱川拓郎ブログ
concrete5 japan CEO 菱川拓郎ブログ。公式フォーラムではhissyの名前で皆さんのトラブル対応され
ている
http://notnil-creative.com/concrete5-packages/
concrete5 日本のコミュニティリーダKatz (カツ) のブログ
concrete5 日本のコミュニティリーダKatz (カツ) のブログ。週間concrete5でもおなじみのkatzさんで
す。
http://ja.katzueno.com/tag/concrete5/