狠狠撸

狠狠撸Share a Scribd company logo
第2回 多摩con活
サイトのトップページを作ろう
「concrete5 は PortlandLabs および、
コンクリートファイブジャパン株式会社の登録商標です」
? 名前:遠藤?敏明
? 株式会社ジェネレーション代表
? Webサイト作成(実はWordPressもやってます)
? メール:endo.toshiaki@generation.ne.jp
? FB:https://www.facebook.com/endo.toshiaki
自己紹介
2
ご協力
3
本勉強会開催にあたりご協力頂いている方々
? 株式会社 KDDI ウェブコミュニケーションズ殿?
(勉強会で使用するサーバーを12台お借りしております)?
CPIのシェアードプランACE?
http://www.cpi.ad.jp/shared/index.html
? コワーキングスペース八王子 8beat殿
? 株式会社ロフトワーク:川竹様
? オープンソースのCMS
? ブロックと呼ばれるパーツを?
ドラッグ&ドロップで操作するのが基本
concrete5とは
4
2014年2月に公式ガイドブックが出版
本ガイドは、5.6をベースに執筆されています。
5.7はUI等の変更がありますが、
操作の基本は一緒です。
公式ガイドブック
5
今回の勉強会で作るページ
コーディングレスで以下を作りましょう
? サイトタイトル(リンク付き)
? グローバルナビ
? 検索フォーム
? Googleマップ配置
? FBのPagePlugin配置
? メインエリアに動画配置
? サイトを作成する際の操作は基本的に
ログイン状態で行います。?
? ログイン:ページ下部の「ログイン」
をクリックしてログインします。
? 編集モード:ログイン状態で、ページ
左上の「編集モード」をクリックして、
編集モードで操作します。
操作説明
サイト名を配置(その1)
? 「空のサイト全体のHeader Site Title
エリア」の上でマウスをクリック?
? 「ブロックを追加」を選び、記事ブロッ
クを挿入
? 「多摩勉強会」と入力
サイト名を配置(その2)
サイト名をクリックしたら、トップペー
ジに遷移するよう設定しましょう。
? リンクの追加?
リンクしたい箇所を選択状態にして、
「リンクを追加」を選択
? リンクしたい先が、トップページなの
で、サイトマップアイコンから、トッ
プページを選択?
サイト名を配置(その3)
サイト名をテーマに合わせてデザインす
る
? HTML編集に切り替える
? <a>タグに id=“header-site-title" を設
定
ナビゲーションを配置(その1)
サイト全体のナビゲーションパーツを?
配置しましょう
? 「空のサイト全体のHeaderNavigation
エリア」の上でマウスをクリック
? 「ブロックを追加」を選び、オートナ
ビブロックを挿入
ナビゲーションを配置(その2)
サイト全体のナビゲーションパーツを?
配置しましょう
? ページ表示順:サイトマップ順
? オートナビ開始階層:トップから
? 表示方式:すべてを表示
? 階層の深さ:表示レベルを任意指定?
??????「1」と設定
ナビゲーションを配置(その3)
サイト全体のナビゲーションパーツを?
配置しましょう
? カスタムテンプレートを適用
? 「デザイン&カスタムテンプレート」
を選択
? 歯車アイコンを選び、「カスタムテン
プレート」から「レスポンシブヘッダー
ナビゲーション」を選択
? 「保存」ボタンを押下
検索ページを作る(その1)
サイト全体を検索する検索ページを作り
ましょう
? ページタイプを作る
? 管理画面の「ページとテーマ」配下、
「ページタイプ」を選択
? 表示された画面の「ページタイプを追
加」をクリック
検索ページを作る(その2)
サイト全体を検索する検索ページを作り
ましょう
? ページ名:空白ページ
? ページタイプハンドル:empty
検索ページを作る(その3)
サイト全体を検索する検索ページを作り
ましょう
? 管理画面の「サイトマップ」配下、「フ
ルサイトマップ」を選択?
? 「新規ページ」をクリック
検索ページを作る(その4)
サイト全体を検索する検索ページを作り
ましょう
? 「ページ」を選択?
? ページ名:検索
? URL Slug:search
検索ページを作る(その5)
サイト全体を検索する検索ページを作り
ましょう
? 「コンテンツを追加」を選択
? フォームグループの「検索」ブロック
をドラック&ドロップして配置
検索ページを作る(その6)
サイト全体を検索する検索ページを作り
ましょう
? タイトル:検索
? ボタンテキスト:検索
検索ページを作る(その7)
サイト全体を検索する検索ページを作り
ましょう
? 完成!
検索フォームを配置(その1)
サイト全体を検索する検索パーツを?
配置しましょう
? 「空のサイト全体のHeader Searchエ
リア」の上でマウスをクリック?
? 「ブロックを追加」を選び、検索ブロッ
クを挿入
? 別ページに結果を表示にチェックを入
れ、先ほど作成した、検索ページを指
定
グーグルマップを配置
サイトフッターにGoogle Mapを配置す
る
? 「空のサイト全体のFooter Site Titleエ
リア」の上でマウスをクリック?
? 「ブロックを追加」を選び、Google
マップブロックを挿入
FBのPagePluginを配置
サイトフッターにFacebookのPagePlugin
を配置する
? 「空のサイト全体のFooter Socialエリ
ア」の上でマウスをクリック?
? 「ブロックを追加」を選び、HTMLブ
ロックを挿入????
具体的な操作は勉強会で
メインエリアに動画を配置
ページのメインエリアに動画を配置する
? 「空のメインエリア」の上でマウスを
クリック?
? 「ブロックを追加」を選び、ビデオプ
レイヤーを挿入????
具体的な操作は勉強会で

More Related Content

concrete5 勉強会 20150607_トッフ?ヘ?ーシ?を作ろう