開催場所：コワーキングスペース八王子 8beat 開催日時：2015年6月7日　15:00〜18:00 概要：concrete5 5.7.4.2を用いて、標準のElementalテーマを用いて、サイトトップページを作成する流れ（勉強会用のステップで説明）

1. 第２回 多摩con活
サイトのトップページを作ろう
「concrete5 は PortlandLabs および、
コンクリートファイブジャパン株式会社の登録商標です」

2. ❖ 名前：遠藤 敏明
❖ 株式会社ジェネレーション代表
❖ Webサイト作成（実はWordPressもやってます）
❖ メール：endo.toshiaki@generation.ne.jp
❖ FB：https://www.facebook.com/endo.toshiaki
自己紹介
2

3. ご協力
3
本勉強会開催にあたりご協力頂いている方々
❖ 株式会社 KDDI ウェブコミュニケーションズ殿
（勉強会で使用するサーバーを12台お借りしております）
CPIのシェアードプランACE
http://www.cpi.ad.jp/shared/index.html
❖ コワーキングスペース八王子 8beat殿
❖ 株式会社ロフトワーク：川竹様

4. ❖ オープンソースのCMS
❖ ブロックと呼ばれるパーツを
ドラッグ＆ドロップで操作するのが基本
concrete5とは
4

5. 2014年2月に公式ガイドブックが出版
本ガイドは、5.6をベースに執筆されています。
5.7はUI等の変更がありますが、
操作の基本は一緒です。
公式ガイドブック
5

6. 今回の勉強会で作るページ
コーディングレスで以下を作りましょう
• サイトタイトル（リンク付き）
• グローバルナビ
• 検索フォーム
• Googleマップ配置
• FBのPagePlugin配置
• メインエリアに動画配置

7. • サイトを作成する際の操作は基本的に
ログイン状態で行います。
• ログイン：ページ下部の「ログイン」
をクリックしてログインします。
• 編集モード：ログイン状態で、ページ
左上の「編集モード」をクリックして、
編集モードで操作します。
操作説明

8. サイト名を配置（その１）
• 「空のサイト全体のHeader Site Title
エリア」の上でマウスをクリック
• 「ブロックを追加」を選び、記事ブロッ
クを挿入
• 「多摩勉強会」と入力

9. サイト名を配置（その２）
サイト名をクリックしたら、トップペー
ジに遷移するよう設定しましょう。
• リンクの追加
リンクしたい箇所を選択状態にして、
「リンクを追加」を選択
• リンクしたい先が、トップページなの
で、サイトマップアイコンから、トッ
プページを選択

10. サイト名を配置（その３）
サイト名をテーマに合わせてデザインす
る
• HTML編集に切り替える
• <a>タグに id=“header-site-title" を設
定

11. ナビゲーションを配置（その１）
サイト全体のナビゲーションパーツを
配置しましょう
• 「空のサイト全体のHeaderNavigation
エリア」の上でマウスをクリック
• 「ブロックを追加」を選び、オートナ
ビブロックを挿入

12. ナビゲーションを配置（その２）
サイト全体のナビゲーションパーツを
配置しましょう
• ページ表示順：サイトマップ順
• オートナビ開始階層：トップから
• 表示方式：すべてを表示
• 階層の深さ：表示レベルを任意指定
「１」と設定

13. ナビゲーションを配置（その３）
サイト全体のナビゲーションパーツを
配置しましょう
• カスタムテンプレートを適用
• 「デザイン＆カスタムテンプレート」
を選択
• 歯車アイコンを選び、「カスタムテン
プレート」から「レスポンシブヘッダー
ナビゲーション」を選択
• 「保存」ボタンを押下

14. 検索ページを作る（その１）
サイト全体を検索する検索ページを作り
ましょう
• ページタイプを作る
• 管理画面の「ページとテーマ」配下、
「ページタイプ」を選択
• 表示された画面の「ページタイプを追
加」をクリック

15. 検索ページを作る（その２）
サイト全体を検索する検索ページを作り
ましょう
• ページ名：空白ページ
• ページタイプハンドル：empty

16. 検索ページを作る（その３）
サイト全体を検索する検索ページを作り
ましょう
• 管理画面の「サイトマップ」配下、「フ
ルサイトマップ」を選択
• 「新規ページ」をクリック

17. 検索ページを作る（その４）
サイト全体を検索する検索ページを作り
ましょう
• 「ページ」を選択
• ページ名：検索
• URL Slug：search

18. 検索ページを作る（その５）
サイト全体を検索する検索ページを作り
ましょう
• 「コンテンツを追加」を選択
• フォームグループの「検索」ブロック
をドラック＆ドロップして配置

19. 検索ページを作る（その６）
サイト全体を検索する検索ページを作り
ましょう
• タイトル：検索
• ボタンテキスト：検索

20. 検索ページを作る（その７）
サイト全体を検索する検索ページを作り
ましょう
• 完成！

21. 検索フォームを配置（その１）
サイト全体を検索する検索パーツを
配置しましょう
• 「空のサイト全体のHeader Searchエ
リア」の上でマウスをクリック
• 「ブロックを追加」を選び、検索ブロッ
クを挿入
• 別ページに結果を表示にチェックを入
れ、先ほど作成した、検索ページを指
定

22. グーグルマップを配置
サイトフッターにGoogle Mapを配置す
る
• 「空のサイト全体のFooter Site Titleエ
リア」の上でマウスをクリック
• 「ブロックを追加」を選び、Google
マップブロックを挿入

23. FBのPagePluginを配置
サイトフッターにFacebookのPagePlugin
を配置する
• 「空のサイト全体のFooter Socialエリ
ア」の上でマウスをクリック
• 「ブロックを追加」を選び、HTMLブ
ロックを挿入・・・
具体的な操作は勉強会で

24. メインエリアに動画を配置
ページのメインエリアに動画を配置する
• 「空のメインエリア」の上でマウスを
クリック
• 「ブロックを追加」を選び、ビデオプ
レイヤーを挿入・・・
具体的な操作は勉強会で