狠狠撸
Submit Search
concrete5 勉強会 20150117_テーマ作成
?
2 likes
?
1,719 views
T
Toshiaki Endo
Follow
肠辞苍肠谤别迟别5(5.6.3.2)でのオリジナルテーマ作成方法説明
Read less
Read more
1 of 73
More Related Content
concrete5 勉強会 20150117_テーマ作成
1.
第1回 多摩con活 テーマ作成 「concrete5 は
PortlandLabs および、 コンクリートファイブジャパン株式会社の登録商標です」
2.
基本的には公式ガイドブックの手順を踏襲します。 (4章オリジナルサイトのデザインを作る) この他、日本語公式サイトに掲載されている 「テーマの仕組みとデザインの仕方」 http://concrete5-japan.org/help/design/ には、動画などを用いて、 テーマ作成手順などが掲載されています。 テーマ作成の流れ
3.
concrete5の管理画面 ->システムと設定 ->キャッシュとスピード設定 と遷移し、? キャッシュをオフにします。 テーマ作成の準備(1/4)
4.
作業用ディレクトリを用意します。 テーマ作成の準備(2/4) generation ?┣?css ?┣?elements ?┣?images ?┗?js
5.
作業用ディレクトリを用意します。 テーマ作成の準備(2/4) generation ?┣?css ?┣?elements ?┣?images ?┗?js テーマ作成後、 concrete5の設置ディレクトリ直下にある themesディレクトリ配下にコピーしますので、 この段階では、どこに作成しても大丈夫です。
6.
テーマ作成の準備(3/4) テーマに必要なファイルを用意します。 cssとjsファイルを用意します。 今回は、公式ガイドブックのサンプルサイトデータを借用します。 generation ?┣?css ?┣?elements ?┣?images ?┣?is ?┣?main.css ?┗?main.js https://github.com/concrete5japan/concrete5_japanese_book
7.
管理画面で必要となるファイルを用意します。 generation ?┣?css ?┣?elements ?┣?images ?┣?is ?┣?main.css ?┣?main.js ?┣?description.txt ?┗?thumbnail.png テーマ作成の準備(4/4)
8.
管理画面で必要となるファイルを用意します。 generation ?┣?css ?┣?elements ?┣?images ?┣?is ?┣?main.css ?┣?main.js ?┣?description.txt ?┗?thumbnail.png テーマ作成の準備(4/4) description.txt 1行目:テーマ名 2行目:テーマの説明文 文字コードはUTF?8 改行はLF で保存
9.
管理画面で必要となるファイルを用意します。 generation ?┣?css ?┣?elements ?┣?images ?┣?is ?┣?main.css ?┣?main.js ?┣?description.txt ?┗?thumbnail.png テーマ作成の準備(4/4) thumbnail.png 横120px 縦90px
10.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認
11.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本
12.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本 ページタイプとは??? ページのレイアウト構造
13.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本 ページタイプとは??? ページのレイアウト構造
14.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本 ページタイプとは??? ページのレイアウト構造
15.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本 ページタイプとは??? ページのレイアウト構造 ヘッダーエリア
16.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本 ページタイプとは??? ページのレイアウト構造
17.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本 ページタイプとは??? ページのレイアウト構造 メインエリア
18.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本 ページタイプとは??? ページのレイアウト構造
19.
テーマ作成?はじめの一歩 concrete5のテーマはページタイプが基本 ページタイプとは??? ページのレイアウト構造 フッターエリア
20.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認
21.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認
22.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 ヘッダーエリア
23.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 メインエリア
24.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 フッターエリア
25.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認
26.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 ヘッダーエリア
27.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 メインエリア
28.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 フッターエリア
29.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認
30.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 ヘッダーエリア
31.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 メインエリア
32.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 フッターエリア
33.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 全部一緒
34.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認
35.
メインエリア メインエリア メインエリア メインエリア home.php default.php 対象とするサイトのデザインを確認 テーマ作成?はじめの一歩
36.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 フッターエリア フッターエリア フッターエリア フッターエリア ヘッダーエリア ヘッダーエリア ヘッダーエリア
ヘッダーエリア
37.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 フッターエリア フッターエリア フッターエリア フッターエリア ヘッダーエリア ヘッダーエリア ヘッダーエリア
ヘッダーエリア 共通部品
38.
テーマ作成?はじめの一歩 対象とするサイトのデザインを確認 フッターエリア フッターエリア フッターエリア フッターエリア ヘッダーエリア ヘッダーエリア ヘッダーエリア
ヘッダーエリア element(s)
39.
作業用ディレクトリを用意します。 テーマ作成の準備(2/4) generation ?┣?css ?┣?elements ?┣?images ?┗?js
40.
テーマ作成?共通部品(header.php) 部品となるheader.phpを元のhtmlから作ります。
41.
index.html header.php
42.
index.html header.php 先頭に <?php de?ned('C5_EXECUTE') or
die("Access Denied."); ?> を記述する。
43.
index.html header.php
44.
index.html header.php <html>に lang="<?php echo LANGUAGE?>”> を追記する。
45.
index.html header.php
46.
index.html header.php metaタグやtitleタグなど、head部の主要タグを削除し、 <?php Loader::element('header_required'); ?>? を追記する。
47.
index.html header.php
48.
index.html header.php スタイルシートの参照パスに <?php echo $this->getThemePath();
?> を追記する。
49.
index.html header.php 元のhtmlが参照していた、外部スタイルシートファイルは、 作業ディレクトリ内に配置しておきます。
50.
テーマ作成?共通部品(header.php) 部品となるheader.phpを元のhtmlから作ります。
51.
header.php
52.
header.php サイト名称やナビゲーション部分を書き換える。 共通部品なので、 <?php $a = new
GlobalArea('Site Name'); $a->display(); ?>
53.
テーマ作成?共通部品(header.php) 部品の名称をheader.phpとして elementsディレクトリに保存します。
54.
テーマ作成?共通部品(footer.php) 部品となるfooter.phpを元のhtmlから作ります。
55.
footer.php
56.
footer.php 先頭に <?php de?ned('C5_EXECUTE') or
die("Access Denied."); ?> を記述する。
57.
footer.php
58.
footer.php フッター部分を書き換える。 共通部品なので、 <?php $a = new
GlobalArea('Footer'); $a->display(); ?>
59.
footer.php
60.
footer.php </body>の直前に <?php Loader::element('footer_required'); ?> を記述する。
61.
テーマ作成?共通部品(footer.php) 部品の名称をfooter.phpとして elementsディレクトリに保存します。
62.
テーマ作成?テーマ本体(default.php) default.phpとは、 ページタイプに一致するハンドルが見つからない 場合に使用される、標準テンプレート
63.
テーマ作成?テーマ本体(default.php) default.phpとは、 ページタイプに一致するハンドルが見つからない 場合に使用される、標準テンプレート
64.
default.php
65.
default.php 先頭に <?php de?ned('C5_EXECUTE') or
die("Access Denied."); ?> を記述する。
66.
default.php
67.
default.php 先ほど、作成した部品が呼び出されています。
68.
default.php
69.
default.php メインエリアに成りそうな記述があります。 <?php $a = new
Area('Main'); $a->display($c); ?>
70.
テーマ作成?テーマ本体(home.php) home.phpとは、 サイトのトップページで使われる、 専用のテンプレート
71.
テーマ作成?テーマ本体(home.php) home.phpとは、 サイトのトップページで使われる、 専用のテンプレート ただし、弊社のサイトでは、トップページも 下層ページと同じレイアウト構成の為、 default.phpをコピーして ファイル名をhome.phpとしました。
72.
テーマ作成?テーマ本体(view.php) view.phpとは、 サイト閲覧者に参照される事は原則なく、 ログイン画面、存在しないURLへのアクセス時に 適用されるテンプレートファイル
73.
テーマ作成?テーマのインストール 作成したテーマフォルダを concrete5をインストールした直下の themesフォルダに配置し、管理画面のテーマから テーマのインストールを行う。