第３回 多摩con活

サイトのトップページを作ろう

「concrete5 は PortlandLabs および、コンクリートファイブジャパン株式会社の登録商標です」

❖ 名前：遠藤　敏明

❖ 株式会社ジェネレーション代表

❖ Webサイト作成（実はWordPressもやってます）

❖ メール：endo.toshiaki@generation.ne.jp

❖ FB：https://www.facebook.com/endo.toshiaki

自己紹介

2

ご協力

3

本勉強会開催にあたりご協力頂いている方々

❖ 株式会社 KDDI ウェブコミュニケーションズ殿（勉強会で使用するサーバーを12台お借りしております）CPIのシェアードプランACEhttp://www.cpi.ad.jp/shared/index.html

❖ コワーキングスペース八王子 8beat殿

❖ 株式会社ロフトワーク：川竹様

❖ オープンソースのCMS

❖ ブロックと呼ばれるパーツをドラッグ＆ドロップで操作するのが基本

concrete5とは

4

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

公式ガイドブック

5

今回の勉強会で作るページコーディングレスで以下を作りましょう

• サイトタイトル（リンク付き）• グローバルナビ• 検索フォーム• Googleマップ配置• FBのPagePlugin配置• メインエリアに動画配置

• サイトを作成する際の操作は基本的にログイン状態で行います。

• ログイン：ページ下部の「ログイン」をクリックしてログインします。

• 編集モード：ログイン状態で、ページ左上の「編集モード」をクリックして、編集モードで操作します。

操作説明

サイト名を配置（その１）• 「空のサイト全体のHeader Site Title

エリア」の上でマウスをクリック

• 「ブロックを追加」を選び、記事ブロックを挿入

• 「多摩勉強会」と入力

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

• リンクしたい先が、トップページなので、サイトマップアイコンから、トップページを選択

サイト名を配置（その３）サイト名をテーマに合わせてデザインする• HTML編集に切り替える

• <a>タグに id=“header-site-title" を設定

ナビゲーションを配置（その１）サイト全体のナビゲーションパーツを 配置しましょう• 「空のサイト全体のHeader Navigationエリア」の上でマウスをクリック

• 「ブロックを追加」を選び、オートナビブロックを挿入

ナビゲーションを配置（その２）サイト全体のナビゲーションパーツを 配置しましょう• ページ表示順：サイトマップ順

• オートナビ開始階層：トップから

• 表示方式：すべてを表示

• 階層の深さ：表示レベルを任意指定　　　　　　「１」と設定

ナビゲーションを配置（その３）サイト全体のナビゲーションパーツを 配置しましょう• カスタムテンプレートを適用

• 「デザイン＆カスタムテンプレート」を選択

• 歯車アイコンを選び、「カスタムテンプレート」から「レスポンシブヘッダーナビゲーション」を選択

• 「保存」ボタンを押下

検索ページを作る（その１）サイト全体を検索する検索ページを作りましょう• ページタイプを作る

• 管理画面の「ページとテーマ」配下、「ページタイプ」を選択

• 表示された画面の「ページタイプを追加」をクリック

検索ページを作る（その２）サイト全体を検索する検索ページを作りましょう• ページ名：空白ページ

• ページタイプハンドル：empty

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

• 「新規ページ」をクリック

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

• ページ名：検索

• URL Slug：search

検索ページを作る（その５）サイト全体を検索する検索ページを作りましょう• 「コンテンツを追加」を選択

• フォームグループの「検索」ブロックをドラック＆ドロップして配置

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

• ボタンテキスト：検索

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

検索フォームを配置（その１）サイト全体を検索する検索パーツを配置しましょう• 「空のサイト全体のHeader Searchエリア」の上でマウスをクリック

• 「ブロックを追加」を選び、検索ブロックを挿入

• 別ページに結果を表示にチェックを入れ、先ほど作成した、検索ページを指定

グーグルマップを配置サイトフッターにGoogle Mapを配置する• 「空のサイト全体のFooter Site Titleエリア」の上でマウスをクリック

• 「ブロックを追加」を選び、Googleマップブロックを挿入

FBのPagePluginを配置サイトフッターにFacebookのPagePluginを配置する• 「空のサイト全体のFooter Socialエリア」の上でマウスをクリック

• 「ブロックを追加」を選び、HTMLブロックを挿入・・・具体的な操作は勉強会で

メインエリアに動画を配置ページのメインエリアに動画を配置する

• 「空のメインエリア」の上でマウスをクリック

• 「ブロックを追加」を選び、ビデオプレイヤーを挿入・・・具体的な操作は勉強会で