O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー

14.115 visualizações

Publicada em

concrete5を使ったサイト制作の手順を、コンクリートファイブジャパン株式会社が長年の経験で培ってきたサイト仕様設計書のテンプレートを使って解説します。

WordPress での構築手順とどう違うのか、細かくステップ順に紹介していきます。「concrete5仕様書テンプレート」はみなさんにも配布しますので、の仕事をすぐに請けることができます。

Publicada em: Governo e ONGs
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... (Unlimited)
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー

  1. 1. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 1
  2. 2. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 2
  3. 3. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 2015/2/19 (木) @ CPI x CSS Nite x 優クリエイト「After Dark」(19) 3
  4. 4. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 本日の目次 ● 自己紹介 ● 最初に ● WordPress と concrete5 のサイト要素の違い ● 作業ステップの比較 ● concrete5 開発ステップ ● 仕様書を作ろう! 4
  5. 5. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 自己紹介 5
  6. 6. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー Katz Ueno (上野 勝之) Twitter: @katzueno ブログ: http://katzueno.com コンクリートファイブジャパン株式会社 Chief Communciations Officer http://concrete5.co.jp 名古屋で concrete5 CMS の普及 6
  7. 7. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 2009年 - concrete5 日本コミュニティを立ち上げました concrete5-japan.org 7
  8. 8. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 全国各地に普及活動 青森・仙台・東京・千葉・静 岡・浜松・名古屋・京都・大 阪・奈良・広島・福岡でUG が立ち上がる 詳細は concrete5-japan.org/community/local/ 8
  9. 9. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 共著の紹介 「concrete5 公式活用ガイドブック」 買ってねー ● マイナビ ● 3542円 ● 書籍 & 電子書籍版 9
  10. 10. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー ● 1980年 三重県四日市市生まれ ● アメリカに留学→映画制作 → 雑誌編集 → Web に ● TOEIC 満点 10
  11. 11. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 での構築事例 11
  12. 12. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordFes Nagoya 2014 副 実行委員長 12
  13. 13. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 公式プラグイン 2本開発 Ustream Status Twitcasting Status 13
  14. 14. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 事例 14
  15. 15. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 他にも様々な CMS の仕事の経験 ● MovableType ● Mambot ● Joomla ● EC Cube ● Magento ● OpenPNE 15
  16. 16. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 今回のセミナー対象 16
  17. 17. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 今日のセミナーの対象について • WordPress 構築経験有りな方 o デザイン、コーディングが理解できる o WordPress テーマを自作したことがある o カスタム投稿タイプやタクソノミーの知識がある • concrete5 は使ったことがないが興味がある方 17
  18. 18. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 分かりやすい コンセプトの違い concrete5 x WordPress 18
  19. 19. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 19
  20. 20. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress = 左脳な人向け CMS 20
  21. 21. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 21
  22. 22. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 = 右脳な人向け CMS 22
  23. 23. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 左脳と右脳の違い? コンテンツ入力時 23
  24. 24. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 左脳と右脳の違い? コンテンツ入力時 ● WordPress = 管理画面で入力する場所が決まっている ● concrete5 = 管理画面が無く自由に組み合わせる 24
  25. 25. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 左脳な人向け CMS - WordPress とは ● 更新する場所が決まっている ● = マニュアルが作りやすい o 例:) 管理ページで、「ニュース」カスタム投稿タイプで、記事を作成 したら、ニュースの記事が作られる ● 固定したフォーマットのものを大量生産するのに適したCMS ● マニュアルや管理画面を作るのが大変だが、その後が楽 ● 上手く行けば間違いなく確実にページの更新ができる 25
  26. 26. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 右脳な人向け CMS - concrete5 とは ● 管理画面とページを行き来しない ● 決められたフォーマットばかりのコンテンツ入力は苦手 ● ページごとにちょっと違う変更を入れたい ● キャンペーンや特集サイトなど柔軟な表現力がほしい ● 「ブロック」を積み重ねるというパズルが苦手な人はとっつきにくい 26
  27. 27. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 右脳な人向け CMS - concrete5 とは パズルが苦手な人? ● 例:ブログを作るには、下記のブロックをページに配置 o ページの中に設置するブロックは何を設置するか考えられるか  「タイトル表示」ブロック  「日付表示」ブロック  「本文」ブロック  「日付ナビ」ブロック  「コメント」ブロック ● 上記組み合わせを考えれない人は concrete5 には向かない 27
  28. 28. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 2つの CMS の要素の違い WordPress x concrete5 28
  29. 29. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 WordPress x concrete5 29
  30. 30. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 30
  31. 31. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) 31
  32. 32. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ 32
  33. 33. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ ● ウィジェット 33
  34. 34. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ ● ウィジェット ● カスタムフィールド、カスタムタクソノミー 34
  35. 35. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ ● ウィジェット ● カスタムフィールド、カスタムタクソノミー ● プラグイン 35
  36. 36. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ ● ウィジェット ● カスタムフィールド、カスタムタクソノミー ● プラグイン ● テーマ 36
  37. 37. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 WordPress x concrete5 37
  38. 38. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ブロック (全く新しいコンセプト) 38
  39. 39. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ブロック (全く新しいコンセプト) o ページの中に配置する o 記事ブロック、画像ブロック、 スライドショーブロック等 o レゴブロックのように積み重ねていきます 39
  40. 40. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ページタイプ (全く新しいコンセプト) 40
  41. 41. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ページタイプ (全く新しいコンセプト) o (強引に比較するなら) カスタム投稿タイプ o ページの種類を決めるもの o よく作ってるページタイプの例: トップ、汎用一覧、汎用詳細、ニュース一覧、ニュ ース詳細、製品一覧、製品詳細 41
  42. 42. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ページタイプ (全く新しいコンセプト) o サイトのページを整理しやすくするため o デフォルトで設置するブロックを決められる o 例)ニュース詳細ページタイプ  → タイトル、本文用記事ブロック o 例)製品紹介ページタイプ  → 画像、仕様テーブル用記事ブロック 42
  43. 43. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● テーマ o ページの枠 o ブロックを設置する「エリア」の位置を決める o 昔のウェブな方へは:Dreamweaver + Contribute の DW 部分が concrete5 になったような感じ o ページテンプレートはサイトマップ上で自由に使え ます。特定のカテゴリーやカスタム投稿タイプのみ でしか使えないという不自由さはありません 43
  44. 44. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● 他にも WordPress には無い機能がデフォルトで搭載 o ページ属性 o 会員管理 o 権限 o 承認フロー プラグインを探さなくて良い! 44
  45. 45. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress と concrete5 の構築ステップ比較 45
  46. 46. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 46
  47. 47. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 47
  48. 48. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 48
  49. 49. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 49
  50. 50. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 50
  51. 51. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 51
  52. 52. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 5. テーマ作成 52
  53. 53. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 5. テーマ作成 6. テーマ修正 53
  54. 54. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 5. テーマ作成 6. テーマ修正 7. function.php 追加 and/or 修正 54
  55. 55. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 5. テーマ作成 6. テーマ修正 7. function.php 追加 and/or 修正 8. コンテンツ流し込み 55
  56. 56. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 56
  57. 57. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 57
  58. 58. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 58
  59. 59. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 59
  60. 60. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 60
  61. 61. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 61
  62. 62. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 62
  63. 63. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 6. ページ属性作成 63
  64. 64. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 6. ページ属性作成 7. ページタイプ作成 64
  65. 65. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 6. ページ属性作成 7. ページタイプ作成 8. カスタムテンプレート作成 65
  66. 66. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 6. ページ属性作成 7. ページタイプ作成 8. カスタムテンプレート作成 9. コンテンツ流し込み 66
  67. 67. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 詳細の紹介 WordPress 経験者向けの concrete5 サイト作成方法 67
  68. 68. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 68
  69. 69. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 ● concrete5 構築ステップを学ぼう 69
  70. 70. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 ● concrete5 構築ステップを学ぼう ● 学べば concrete5 の仕様書を設計できる! 70
  71. 71. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 ● concrete5 構築ステップを学ぼう ● 学べば concrete5 の仕様書を設計できる! ● concrete5 仕様書テンプレート http://bit.ly/c5spectemplates 71
  72. 72. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 ● concrete5 構築ステップを学ぼう ● 学べば concrete5 の仕様書を設計できる! ● concrete5 仕様書テンプレート http://bit.ly/c5spectemplates ● Katz が実際に仕事で使っているテンプレート ● マスターすれば仕事ができる! 72
  73. 73. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書テンプレートを作るSTEP ノウハウを大公開! 73
  74. 74. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP1: サイト企画 & ページタイプを決める 74
  75. 75. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP1: サイト企画 & ページタイプ CMS だったとしても、静的HTMLサイトでも決めないといけない基本! ● サイトマップ ● 中身のコンテンツ 本当は一番重要だけど、割愛します。詳しくはディレクションや企画の勉強会で! CMS 上でのサイトマップではなく、一般的なサイトの企画やディレクションです 75
  76. 76. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP1: サイト企画 & ページタイプ サイトマップを決めてから ● サイトマップを元に、 concrete5 で作成するページタイプを決める 76
  77. 77. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP1: サイト企画 & ページタイプ サイトマップを決めてから ● サイトマップを元に、 concrete5 で作成するページタイプを決める 77
  78. 78. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP2: デザイン 78
  79. 79. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP2: デザイン ● サイトをデザインする ● 枠 - エリア - ブロックを意識してデザインする 79
  80. 80. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP2: デザイン ● サイトをデザインする ● 枠 - エリア - ブロックを意識してデザインする 80
  81. 81. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP3: アドオンインストール 81
  82. 82. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP3: アドオンインストール きちんとセキュリティチェックなどの審査されたアドオンをマーケットプレイ スからインストール Katz おすすめのアドオン (仕事でほぼ全てのサイトで使ってる) ● Designer Content ● Designer Content Pro ● Manual Nav ● Internationalization ● Page List Plus ● Tomoac Form ● Formidable ● Where is my block 82
  83. 83. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング 83
  84. 84. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング ● テーマ - エリア - ブロックという 枠を考えたコーディングを心がける (CSS のクラス付、HTML 構造を考える) ● コーディングガイドラインを作成し公開します (宣言) 84
  85. 85. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング WordPress 経験者が concrete5 サイトのコーディングに心がけること 85
  86. 86. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング WordPress 経験者が concrete5 サイトのコーディングに心がけること ● 編集ツールバーが上部に表示されたりするので、ページ全体を1つの wrapper クラスで囲む ● z-indexは 5 以降を使用する ● クラスの接頭語に「ccm-」を使用しない → 管理画面系で使っているクラスです ● CSS で id を使わない ● ファイルのアップロード位置に依存したコーディングをしない 86
  87. 87. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング 【続】WordPress 経験者が concrete5 サイトのコーディングに心がけること ● 繰り返し要素を考慮する (CSS のクラス名で section-1, section-2 など、特別な順番が必要なクラス 名付けを極力しない) ● jQuery や Bootstrap を使用する時は concrete5 が使用しているものに合わ せたほうがいいかも ● 使用 jQueryバージョン ○ concrete5.6.3 は 1.7.2 ○ concrete5.7.3 は 1.11.1 ● 使用 Bootstrap バージョン ○ concrete5.6.3 は 2.0.3 ○ concrete5.7.3 は 3.1.1 87
  88. 88. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング 【続】WordPress 経験者が concrete5 サイトのコーディングに心がけること ● <body> タグ o ページ毎に別々 class を付けない。(やってもトップページのみ)→ ブロックが特定のページにしか使えなくなるのでブロックのリサイク ルがしづらくなります。 o position 指定をしない 88
  89. 89. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング 【続】WordPress 経験者が concrete5 サイトのコーディングに心がけること ● 記事ブロック部分 o TinyMCE か Redactor という JS ライブラリを使用して入力するので 場合、極力、記事部分のタグにクラスを付けなくても装飾されるよう にタイポグラフィー系のCSSを設定する (h, p, a, table, blockquote, i, b, strong, and etc) o よくやる手: 「.wygiwys h1」のように親クラスを作って、書くタイポグラフィー 系のタグに CSS を割り当てる 89
  90. 90. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 90
  91. 91. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 ● 詳細はクイックリファレンスを参照 ● テーマはページ (HTML) の枠 ● ページの中で、どこが編集可能な領域である 「エリア」なのかを指定 91
  92. 92. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 テーマの設置先 ● テーマフォルダに自分のテーマを作成 o 5.6系は /themes/[テーマハンドル]/ o 5.7系は /application/themes/[テーマハンドル]/ ※ 配布用のパッケージテーマは別の場所に配置 92
  93. 93. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 最低限必要なファイル 1. description.txt 2. thumbnail.png 3. default.php 4. view.php (5.7 より必須) 93
  94. 94. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 1. description.txt WordPress の style.css の冒頭部分のようなもの。 UTF-8 のエンコーディングで作成。 ● 1行目:テーマのタイトル ● 2行目:テーマの説明 94
  95. 95. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 2. thumbnail.png テーマ一覧で使用するPNG画像 ● 5.6.x 以前は 120x90ピクセル ● 5.7.x 以降は 360x270ピクセル 95
  96. 96. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 3. default.php ● WordPress でいう「index.php」 ● HTMLコーディングに、数行の PHP 文を入れるだけで完成。 ● WP Query や Loop などを書く必要は一切無し 96
  97. 97. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 覚えなきゃいけないPHPコードは 97
  98. 98. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 覚えなきゃいけないPHPコードは 11行だけ! (しかもほぼコピペのみ) 98
  99. 99. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 1. セキュリティ対策用PHP (コピペ) PHP全てのファイルに最初に記述する。 おまじないコード。コピペのみ。 <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> 99
  100. 100. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 2. テーマパス テーマフォルダを自動的に書きだすPHP文。テーマで使うCSSファイルや画像 ファイルをテーマフォルダ内に保存して読み込むときに使う。 <?php echo $this->getThemePath(); ?> 100
  101. 101. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 2. テーマパス 使い方の例 <link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/main.css"> 101
  102. 102. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 3. headタグ (コピペ) WordPress でいうところの <?php wp_head(); ?>で<head> の中に配置。テ ーマの CSS や JS ファイルを読み込む前に設置 <?php Loader::element('header_required'); ?> 102
  103. 103. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 4. エリアを指定 ブロックを自由に設置できるエリアを指定します。 <?php $a = new Area('【エリアの名前】'); $a->display($c); ?> 103
  104. 104. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 5. グローバルエリアを指定 サイト全体に同じブロックを設置できるグローバルエリアを指定します。 <?php $a = new GlobalArea(‘【グローバルエリアの名前】'); $a->display(); ?> 104
  105. 105. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード エリアとグローバルエリアの注意点 同じ名前でエリア名とグローバルエリア名を作らない。不具合の元になりま す! 105
  106. 106. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 6. フッターエリアを指定 いわいる <?php wp_footer(); ?> <?php Loader::element('footer_required'); ?> 106
  107. 107. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 4. view.php ● 「シングルページ」という concrete5 のシステム関連ページで使うための テーマファイル ● 例:ログイン、404、403 ページ等 107
  108. 108. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 view.php で必要最低限覚えるコード 7. ログイン等のページ (シングルページ) メインエリアと同等部分の宣言を、エリアではなくて下記の命令を入れる <?php Loader::element('system_errors', array('error' => $error)); print $innerContent; ?> 108
  109. 109. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー たった11行の PHP コードを 覚えるだけで、concrete5 テーマが作れます 簡単でしょ? ただ レスポンシブ対応で、CSS や JS との バッティングに気をつけないと行けないです 109
  110. 110. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー おまけ:知ってて得すること A. 追加のテンプレートファイルを作成する ページテンプレート (5.6 ではページタイプ)の半角英数字と同じ名前の半角英 数字のファイルを作成してテーマを出し分け 例 home.php news.php あとは、コーディングを調整して出力するレイアウトを変えるだけ。 STEP5: concrete5 テーマの作成 110
  111. 111. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 おまけ:知ってて得すること B. 共通の部分を別でテンプレートファイルとして分離する WordPress における concrete5 では、<?php $this->inc(‘○○○’);?> を使います。 テーマフォルダの中に「elements」というフォルダを作ってその中に入れるのが慣習 header.php を読み込むための <?php get_header(); ?> footer.php を読み込むための <?php get_footer(); ?> 111
  112. 112. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 おまけ:知ってて得すること B. 共通の部分を別でテンプレートファイルとして分離する 例: ファイル保存場所 テーマ上 /[themeフォルダ]/elements/header.php <?php $this->inc('elements/header.php');?> /[themeフォルダ]/elements/footer.php <?php $this->inc('elements/footer.php');?> 112
  113. 113. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 おまけ:知ってて得すること テーマ作成時に参考になるブログなど WordPress のように、PHPを使いこなしてページ名や、ページ属性を直接表 示させたりする方法もあります。 • 【完全保存版】 concrete5 テーマスニペット集 • concrete5のテーマからページ関連の情報を取得するサンプル • concrete5の各属性タイプの情報を表示するコード集 • concrete5の選択属性の値ごとに違うclassを割り当てたい (5.6.3~) 113
  114. 114. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP6: ページ属性の作成 114
  115. 115. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP6: ページ属性の作成 • WordPress でいういわいるカスタムフィールドやカスタムタクソノミー • concrete5 はカスタムフィールドのプラグインが存在しません • というか WordPress のプラグイン機能が既に本体に実装。 • どのプラグインを使うのか迷わなくて済む! • チェック、テキスト、複数行テキスト、ファイル、画像、選択肢、日付が 選べます • 例: イベント告知ページの、イベント種別やイベント開催日、OGP画像など 115
  116. 116. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP7: 管理画面でページタイプを作成 116
  117. 117. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP7: 管理画面でページタイプを作成 • 管理画面より、ページタイプを作成します。 手順 1. ページタイプを作成 2. デフォルトで使用するページ属性を選択 3. 「デフォルト」で設置するブロックを設置 4. 仕様書に各ページタイプの各エリアやグローバルエリアやスタックに設置 予定なブロックを書き込んでいく 117
  118. 118. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP7: 管理画面でページタイプを作成 • 管理画面より、ページタイプを作成します。 手順 1. ページタイプを作成 2. デフォルトで使用するページ属性を選択 3. 「デフォルト」で設置するブロックを設置 4. 仕様書に各ページタイプの各エリアやグローバルエリアやスタックに設置 予定なブロックを書き込んでいく 118
  119. 119. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックの カスタムテンプレートを作成 119
  120. 120. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 ブロックのカスタムテンプレートを作ります。 Designer Content でカスタムブロックをすごく簡単に作成できますが、今回は割愛。 120
  121. 121. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 カスタムテンプレートとは WordPress では Loop や WP_Query() をカスタマイズしていくような認識。 concrete5 のブロックが出力するコーディングを簡単にカスタマイズしオプシ ョンを増やしていける方法です。 例: ニュース一覧用のページリストブロックに日付の属性を加える グローバルナビ用のオートナビブロックに独自のクラスを加える 121
  122. 122. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 カスタムテンプレート作成方法 チュートリアル: ブロック修正の仕方とカスタムテンプレートの仕組み 122
  123. 123. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 カスタムテンプレート作成方法 1. ブロックの表示部分を司る View ファイルを元のブロックからコピー o /concrete/blocks/[ブロック]/view.php 2. カスタムテンプレートを作成 o [5.6 の場合] /blocks/[ブロック]/templates/[任意の名前].php o [5.7 から] /application/blocks/[ブロック]/tempates/[任意の名前].php 123
  124. 124. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 カスタムテンプレート作成方法 3. カスタムテンプレートの中身を編集 • PHP 初級程度の知識が必要 • 場合によってはHTMLの知識のみで改変可能 124
  125. 125. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 変哲もない <ul><li> な ナビゲーションに クラスを付けて ナビゲーションっぽく 表示する例 125
  126. 126. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 おまけ:知ってて得すること テーマ作成時に参考になるブログなど(再掲) WordPress のように、PHPを使いこなしてページ名や、ページ属性を直接表 示させたりする方法もあります。 • 【完全保存版】 concrete5 テーマスニペット集 • concrete5のテーマからページ関連の情報を取得するサンプル • concrete5の各属性タイプの情報を表示するコード集 • concrete5の選択属性の値ごとに違うclassを割り当てたい (5.6.3~) 126
  127. 127. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル 実際のサンプルサイトと仕様書 127
  128. 128. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル • 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP 128
  129. 129. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル • 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP 129
  130. 130. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル • 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP http://dogen.concrete5japan.net 130
  131. 131. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル • 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP • 仕様書テンプレート http://bit.ly/c5spectemplates 日々最新版に更新していきます! • 道玄坂大学仕様書 https://drive.google.com/open?id=19vit0DOB1XmVLzhUrodK4RtAU8Jpiea3mJ Gicfa_GlM&authuser=0 (リンクがあとで変わるかも) 131
  132. 132. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー いろいろ参考文献 132
  133. 133. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー いろいろ参考文献 • 一番分かりやすいWordPressとconcrete5のカスタマイズ 方法の違い • 2015年注目の concrete5 関連スライド資料 • 5.6か、5.7か。それが問題だ 〜2015年、これから concrete5を始める皆さんへ〜 133
  134. 134. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 134
  135. 135. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー Content Management is Human Rights 135
  136. 136. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー ありがとうございました コンクリートファイブジャパン株式会社 info@concrete5.co.jp 03-4513-8599 136

×