Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2015
NEW
有限会社アップルップル 森田かすみ
a-blog cmsの
2015年版の基本テーマを
使ったカスタマイズのポイント
1
Site2015 Blog2015 Bootstrap2015
新しく同梱されたテーマ
カスタマイズポイント8つ
• SEO対策
• SNSの設定
• スマートフォン対応
• テンプレートのモジュール化
• サンプルの追加
• 管理ページ内
• 読み込むCSSの変更
• 読み込むJSの変更
2015
NEW
1. SEO対策
タイトルタグの見直し
<title><!-- BEGIN_MODULE Touch_Entry -->%{ENTRY_TITLE} ¦ <!-- END_MODULE
Touch_Entry --><!-- BEGIN_MODULE Touch...
タイトルタグの見直し
<title><!-- BEGIN_MODULE Touch_Entry -->%{ENTRY_TITLE} ¦ <!-- END_MODULE
Touch_Entry --><!-- BEGIN_MODULE Touch...
タイトルタグの見直し
<!-- BEGIN_IF [%{PAGE}/neq/1] -->%{PAGE}ページ目 ¦ <!-- END_IF --><!-- BEGIN_MODULE Touch_Top --><!--
BEGIN_MODULE ...
タイトルタグの見直し
<!-- BEGIN_IF [%{PAGE}/neq/1] -->%{PAGE}ページ目 ¦ <!-- END_IF --><!-- BEGIN_MODULE Touch_Top --><!--
BEGIN_MODULE ...
チェック用テンプレートを用意
1. SEO対策
site2015 blog2015 bootstrap2015
1. SEO対策 > チェック用テンプレートを用意
Google Yahoo
! 実際の検索エンジンの表示も確認しやすいように
検索エンジン、RSS、sitemap.xmlへの表示を
制御するカスタムフィールドを追加
1. SEO対策
ブログ、カテゴリー、エントリーでそれぞれカスタムフィールドを用意してい
ます。
site2015 blog2015 bootstrap2...
1. SEO対策 > 検索エンジン、RSS、sitemap.xmlへの表示を制御するカスタムフィールドを追加
• /include/head/robots.txt をテーマ内に移動
• Feed_Rss2、Sitemapモジュールのフィルタの設...
フィルタの設定
※ Sitemapモジュールでも同じ設定が用意されています
1. SEO対策 > 検索エンジン、RSS、sitemap.xmlへの表示を制御するカスタムフィールドを追加
2015
NEW
2. SNSの設定
フッターにSNSページへのリンクを追加
2. SNS
site2015 bootstrap2015
2. SNS > Facebook、Twitter、Google Plusのシェアボタンを追加
管理画面から各リンク先が指定できるようになっています!
Facebook、Twitter、Google Plusのシェアボタンを追加
2. SNS
site2015 blog2015
2. SNS > Facebook、Twitter、Google Plusのシェアボタンを追加
管理画面の設定から@先が指定できるようになっています!
site2015
2015
NEW
3. スマートフォン対応
3. スマートフォン対応 > ハイブリッドサイト用テーマを用意
sp@site2015site2015
ハイブリッドサイト用テーマを用意
site2015
3. スマートフォン対応 > ハイブリッドサイト用テーマを用意
http://aogiri.net/acms_multi.html
レスポンシブと最適化のいいとこどりができる?a-blog cmsで
できる、マルチデバイス対応
元ネタ
ハイブリッドサイトではルール機能からテーマを指定して
います。ハイブリッドサイトにしたくない場合はルールの
設定を無効にしましょう
!
3. スマートフォン対応 > ハイブリッドサイト用テーマを用意
3. スマートフォン対応 > UA別に表示件数を変更
UA別に表示件数を変更
スマホのときは3件PCのときは6件
site2015
管理しなければいけないモジュールIDはもちろん、
テンプレートの削減に
!
25. <!—#include file=“/include/summary_%{UA_GROUP}.html”—>
• /include/summary_PC.htm...
ルールの管理ページにあるモジュールIDボタンとルールを
切り替えるプルダウンから変更できます
!
3. スマートフォン対応 > UA別に表示件数を変更
2015
NEW
4. ユニットのカスタマイズ
4. ユニットのカスタマイズ
テキストユニットの拡張
site2015
テキストユニットの拡張って?
4. サンプルの追加 > テキストユニットの拡張
HTMLの構造が違う
テキストユニットが
2パターン用意できる
テンプレート
include unit tag-select.html
<!-- BEGIN table_responsive -->
<div class=“entry-container">
<div class=“acms-table-r...
unit.html内に追加されたインクルード
include unit.html
25. <!—#include file="/include/unit/tag-select.html"-->
131. <!—#include file="/i...
unit.html内に追加されたインクルード
include unit.html
25. <!—#include file="/include/unit/tag-select.html"-->
131. <!—#include file="/i...
4. ユニットのカスタマイズ
カスタムユニット
site2015
4. ユニットのカスタマイズ > カスタムユニット
表示例
他言語対応
site2015
4. ユニットのカスタマイズ
4. ユニットのカスタマイズ > 他言語対応
admin unit_language.html
テンプレート
entry
include unit_language.html
admin unit.html
テンプレート
entry
include unit.html
ファイル名を
リネームする
4. ユニットのカスタマイズ > 他言語対応
変更後のユニット編集画面
4. ユニットのカスタマイズ > 他言語対応
表示方法
http://mkasumi.com/entry-817.html
a-blog cmsでテキストユニットをマルチ言語対応した記事を
表示する方法
4. ユニットのカスタマイズ > 他言語対応
2015
NEW
5. テンプレートのモジュール化
レイアウト機能
http://demo.a-blogcms.jp/layout.html
5. テンプレートのモジュール化
site2015 bootstrap2015
まだ
触ってない方は
5. テンプレートのモジュール化 > レイアウト機能
! モジュールID名を変更すると、違うレイアウト情報になり
ます
<!-- BEGIN_MODULE Layout
id="topLayout" -->
<!-- BEGIN_MODULE ...
5. テンプレートのモジュール化 > レイアウト機能
! 納品前にはテンプレートを日本語名にしておく
/include/module/template/モジュール名/label.yaml
※デフォルトだとモジュール選択画面でテンプレート名が表示...
モジュールのカスタムフィールド
5. テンプレートのモジュール化
site2015 bootstrap2015
5. テンプレートのモジュール化
使用例:モジュールごとの見出し
5. テンプレートのモジュール化 > モジュールのカスタムフィールド
admin module field.html
includeのしかた
5. テンプレートのモジュール化 > モジュールのカスタムフィールド
includeのしかた
<!-- #include file=“/admin/module/mid%{mid}.html" -->
Ver.2.5.0
admin modul...
5. テンプレートのモジュール化 > モジュールのカスタムフィールド
includeのしかた
<!-- #include file=“/admin/module/mid%{MID}.html" -->
<!-- #include file=“/...
5. テンプレートのモジュール化 > レイアウト機能
! Ver.2.5.0.1から追加されたグローバル変数
グローバル変数 出力例
%{MID} 50
%{MODULE_NAME} BLOG_FIELD
%{MODULE_ID} fieldSu...
Lessファイルのパーツ化
5. テンプレートのモジュール化
site2015 blog2015 bootstrap2015
2015
NEW
6. 管理ページ内
管理ページ内にリンク集のモジュールを追加
6. 管理ページ内
site2015
6. 管理ページ内 > 管理ページ用のリンク集のモジュールを追加
admin
dashboard-left.html
使用しているテンプレート
<!-- BEGIN_MODULE Links id="adminLink" -->
…
<!-- ...
2015
NEW
7. 読み込むCSSの変更
モバイルファーストの考え方に変更
7. 読み込むCSSの変更
@media (max-width: 767px) {
…
}
@media (min-width: 768px) {
…
}
site2015 blog2015 bootstrap...
acms.cssは表のテンプレート用に
acms-admin.cssが管理用CSSに
7. 読み込むCSSの変更
acms-admin.cssacms.css
site2015 blog2015 bootstrap2015
7. 読み込むCSSの変更 > acms.cssは表のテンプレート用に、acms-admin.cssが管理用に
.acms-admin-* {
…
}
acms-admin.cssacms.css
.acms-* {
…
}
! クラスの接頭辞...
7. 読み込むCSSの変更 > acms.cssは表のテンプレート用に、acms-admin.cssが管理用に
<link href="/css/acms-admin.css" rel="stylesheet">
acms-admin.css
...
2015
NEW
8. JSの読み込み方の変更
<!-- BEGIN_MODULE Js -->
<script src="/index.js{arguments}" charset="UTF-8"
id="acms-js"></script><!-- END_MODULE Js -->
<...
非同期処理になったとともに読み込み方も変更に
<script>
ACMS.Ready(function() {
new ACMS.SyncLoader()
.next('%{HTTP_THEMES_DIR}site2015/js/site.js...
8. JSの読み方の変更 > 非同期処理になったとともに読み込み方も変更に
! 非同期処理になったわけ
site2014
ご静聴ありがとうございました
@KasumiMorita!
kasumi.morita.750"
2015
NEW
Upcoming SlideShare
Loading in …5
×

a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント

1,598 views

Published on

2015年5月22日(金)のa-blog cms DAY in Nagoya でお話しした内容です。

Published in: Internet
  • Be the first to comment

a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント

  1. 1. 2015 NEW 有限会社アップルップル 森田かすみ a-blog cmsの 2015年版の基本テーマを 使ったカスタマイズのポイント 1
  2. 2. Site2015 Blog2015 Bootstrap2015 新しく同梱されたテーマ
  3. 3. カスタマイズポイント8つ • SEO対策 • SNSの設定 • スマートフォン対応 • テンプレートのモジュール化 • サンプルの追加 • 管理ページ内 • 読み込むCSSの変更 • 読み込むJSの変更
  4. 4. 2015 NEW 1. SEO対策
  5. 5. タイトルタグの見直し <title><!-- BEGIN_MODULE Touch_Entry -->%{ENTRY_TITLE} ¦ <!-- END_MODULE Touch_Entry --><!-- BEGIN_MODULE Touch_Category -->%{CATEGORY_NAME} ¦ <!-- END_MODULE Touch_Category -->%{BLOG_NAME}</title> 1. SEO対策 site2014 site2015 blog2015 bootstrap2015
  6. 6. タイトルタグの見直し <title><!-- BEGIN_MODULE Touch_Entry -->%{ENTRY_TITLE} ¦ <!-- END_MODULE Touch_Entry --><!-- BEGIN_MODULE Touch_Category -->%{CATEGORY_NAME} ¦ <!-- END_MODULE Touch_Category -->%{BLOG_NAME}</title> 1. SEO対策 site2014 site2015 blog2015 bootstrap2015 タグやページの 一覧ページのときに タイトルタグが 重複してしまう <title>レイアウト機能 ¦ a-blog cms 制作者向け情報</title> <title>レイアウト機能 ¦ a-blog cms 制作者向け情報</title> 一覧ページ 1ページ目 一覧ページ 2ページ目
  7. 7. タイトルタグの見直し <!-- BEGIN_IF [%{PAGE}/neq/1] -->%{PAGE}ページ目 ¦ <!-- END_IF --><!-- BEGIN_MODULE Touch_Top --><!-- BEGIN_MODULE Blog_Field --><!-- BEGIN_IF [{blog_meta_title}/nem/] -->{blog_meta_title}<!-- BEGIN_IF [%{BID}/eq/1] --> ¦ %{ROOT_BLOG_NAME}<!-- END_IF --><!-- ELSE -->%{BLOG_NAME}<!-- END_IF --><!-- END_MODULE Blog_Field --><!-- END_MODULE Touch_Top --><!-- BEGIN_MODULE Touch_Tag --><!-- BEGIN_MODULE Tag_Filter --><!-- BEGIN selected:loop -->{name}<!-- BEGIN glue -->・<!-- END glue --><!-- END selected:loop --><!-- END_MODULE Tag_Filter --> ¦ <!-- END_MODULE Touch_Tag --><!-- BEGIN_MODULE Touch_Index --><!-- BEGIN_MODULE Touch_Category --><!-- BEGIN_MODULE Category_Field --><!-- BEGIN_IF [{category_meta_title}/nem/] -->{category_meta_title}<!-- BEGIN_IF [%{BID}/ eq/1] --> ¦ %{ROOT_BLOG_NAME}<!-- END_IF --><!-- ELSE -->%{CATEGORY_NAME} ¦ %{BLOG_NAME}<!-- END_IF --><!-- END_MODULE Category_Field --><!-- END_MODULE Touch_Category --><!-- BEGIN_MODULE Touch_NotCategory -- >%{BLOG_NAME}<!-- END_MODULE Touch_NotCategory --><!-- BEGIN_IF [%{KEYWORD}/nem/] --> ¦ %{KEYWORD}<!-- END_IF --><!-- BEGIN_IF [%{DATE}/nem/] --> ¦ %{DATE}<!-- END_IF --><!-- END_MODULE Touch_Index --><!-- BEGIN_MODULE Touch_Entry --><!-- BEGIN_MODULE Entry_Field --><!-- BEGIN_IF [{entry_meta_title}/nem/] -- >{entry_meta_title}<!-- BEGIN_IF [%{BID}/eq/1] --> ¦ %{ROOT_BLOG_NAME}<!-- END_IF --><!-- ELSE --><!-- BEGIN_IF [%{ENTRY_TITLE}/neq/%{CATEGORY_NAME}] -->%{ENTRY_TITLE} ¦ <!-- END_IF --><!-- BEGIN_IF [%{CATEGORY_NAME}/ nem/] -->%{CATEGORY_NAME} ¦<!-- END_IF --> %{BLOG_NAME}<!-- END_IF --><!-- END_MODULE Entry_Field --><!-- END_MODULE Touch_Entry --><!-- BEGIN_IF [%{BID}/neq/1] --> ¦ %{ROOT_BLOG_NAME}<!-- END_IF --> 1. SEO対策 site2015 ページ、タグ、日付、 キーワードの追加
  8. 8. タイトルタグの見直し <!-- BEGIN_IF [%{PAGE}/neq/1] -->%{PAGE}ページ目 ¦ <!-- END_IF --><!-- BEGIN_MODULE Touch_Top --><!-- BEGIN_MODULE Blog_Field --><!-- BEGIN_IF [{blog_meta_title}/nem/] -->{blog_meta_title}<!-- BEGIN_IF [%{BID}/eq/1] --> ¦ %{ROOT_BLOG_NAME}<!-- END_IF --><!-- ELSE -->%{BLOG_NAME}<!-- END_IF --><!-- END_MODULE Blog_Field --><!-- END_MODULE Touch_Top --><!-- BEGIN_MODULE Touch_Tag --><!-- BEGIN_MODULE Tag_Filter --><!-- BEGIN selected:loop -->{name}<!-- BEGIN glue -->・<!-- END glue --><!-- END selected:loop --><!-- END_MODULE Tag_Filter --> ¦ <!-- END_MODULE Touch_Tag --><!-- BEGIN_MODULE Touch_Index --><!-- BEGIN_MODULE Touch_Category --><!-- BEGIN_MODULE Category_Field --><!-- BEGIN_IF [{category_meta_title}/nem/] -->{category_meta_title}<!-- BEGIN_IF [%{BID}/ eq/1] --> ¦ %{ROOT_BLOG_NAME}<!-- END_IF --><!-- ELSE -->%{CATEGORY_NAME} ¦ %{BLOG_NAME}<!-- END_IF --><!-- END_MODULE Category_Field --><!-- END_MODULE Touch_Category --><!-- BEGIN_MODULE Touch_NotCategory -- >%{BLOG_NAME}<!-- END_MODULE Touch_NotCategory --><!-- BEGIN_IF [%{KEYWORD}/nem/] --> ¦ %{KEYWORD}<!-- END_IF --><!-- BEGIN_IF [%{DATE}/nem/] --> ¦ %{DATE}<!-- END_IF --><!-- END_MODULE Touch_Index --><!-- BEGIN_MODULE Touch_Entry --><!-- BEGIN_MODULE Entry_Field --><!-- BEGIN_IF [{entry_meta_title}/nem/] -- >{entry_meta_title}<!-- BEGIN_IF [%{BID}/eq/1] --> ¦ %{ROOT_BLOG_NAME}<!-- END_IF --><!-- ELSE --><!-- BEGIN_IF [%{ENTRY_TITLE}/neq/%{CATEGORY_NAME}] -->%{ENTRY_TITLE} ¦ <!-- END_IF --><!-- BEGIN_IF [%{CATEGORY_NAME}/ nem/] -->%{CATEGORY_NAME} ¦<!-- END_IF --> %{BLOG_NAME}<!-- END_IF --><!-- END_MODULE Entry_Field --><!-- END_MODULE Touch_Entry --><!-- BEGIN_IF [%{BID}/neq/1] --> ¦ %{ROOT_BLOG_NAME}<!-- END_IF --> 1. SEO対策 site2015 ページ、タグ、日付、 キーワードの追加 カスタムフィールド で入力できるように!
  9. 9. チェック用テンプレートを用意 1. SEO対策 site2015 blog2015 bootstrap2015
  10. 10. 1. SEO対策 > チェック用テンプレートを用意 Google Yahoo ! 実際の検索エンジンの表示も確認しやすいように
  11. 11. 検索エンジン、RSS、sitemap.xmlへの表示を 制御するカスタムフィールドを追加 1. SEO対策 ブログ、カテゴリー、エントリーでそれぞれカスタムフィールドを用意してい ます。 site2015 blog2015 bootstrap2015
  12. 12. 1. SEO対策 > 検索エンジン、RSS、sitemap.xmlへの表示を制御するカスタムフィールドを追加 • /include/head/robots.txt をテーマ内に移動 • Feed_Rss2、Sitemapモジュールのフィルタの設定 を確認する ! オリジナルのテーマで使うには
  13. 13. フィルタの設定 ※ Sitemapモジュールでも同じ設定が用意されています 1. SEO対策 > 検索エンジン、RSS、sitemap.xmlへの表示を制御するカスタムフィールドを追加
  14. 14. 2015 NEW 2. SNSの設定
  15. 15. フッターにSNSページへのリンクを追加 2. SNS site2015 bootstrap2015
  16. 16. 2. SNS > Facebook、Twitter、Google Plusのシェアボタンを追加 管理画面から各リンク先が指定できるようになっています!
  17. 17. Facebook、Twitter、Google Plusのシェアボタンを追加 2. SNS site2015 blog2015
  18. 18. 2. SNS > Facebook、Twitter、Google Plusのシェアボタンを追加 管理画面の設定から@先が指定できるようになっています! site2015
  19. 19. 2015 NEW 3. スマートフォン対応
  20. 20. 3. スマートフォン対応 > ハイブリッドサイト用テーマを用意 sp@site2015site2015 ハイブリッドサイト用テーマを用意 site2015
  21. 21. 3. スマートフォン対応 > ハイブリッドサイト用テーマを用意 http://aogiri.net/acms_multi.html レスポンシブと最適化のいいとこどりができる?a-blog cmsで できる、マルチデバイス対応 元ネタ
  22. 22. ハイブリッドサイトではルール機能からテーマを指定して います。ハイブリッドサイトにしたくない場合はルールの 設定を無効にしましょう ! 3. スマートフォン対応 > ハイブリッドサイト用テーマを用意
  23. 23. 3. スマートフォン対応 > UA別に表示件数を変更 UA別に表示件数を変更 スマホのときは3件PCのときは6件 site2015
  24. 24. 管理しなければいけないモジュールIDはもちろん、 テンプレートの削減に ! 25. <!—#include file=“/include/summary_%{UA_GROUP}.html”—> • /include/summary_PC.html • /include/summary_Tablet.html • /include/summary_SmartPhone.html • /include/summary_.html 以前まで必要だったテンプレートの例 3. スマートフォン対応 > UA別に表示件数を変更
  25. 25. ルールの管理ページにあるモジュールIDボタンとルールを 切り替えるプルダウンから変更できます ! 3. スマートフォン対応 > UA別に表示件数を変更
  26. 26. 2015 NEW 4. ユニットのカスタマイズ
  27. 27. 4. ユニットのカスタマイズ テキストユニットの拡張 site2015
  28. 28. テキストユニットの拡張って? 4. サンプルの追加 > テキストユニットの拡張 HTMLの構造が違う テキストユニットが 2パターン用意できる
  29. 29. テンプレート include unit tag-select.html <!-- BEGIN table_responsive --> <div class=“entry-container"> <div class=“acms-table-responsive”> <table{class}>{text}[table]</table> </div> </div><!-- END table_responsive --> 4. サンプルの追加 > テキストユニットの拡張
  30. 30. unit.html内に追加されたインクルード include unit.html 25. <!—#include file="/include/unit/tag-select.html"--> 131. <!—#include file="/include/unit/extend.html"--> 4. サンプルの追加 > テキストユニットの拡張
  31. 31. unit.html内に追加されたインクルード include unit.html 25. <!—#include file="/include/unit/tag-select.html"--> 131. <!—#include file="/include/unit/extend.html"--> これからはなるべく unit.htmlは 複製しない制作へ 4. サンプルの追加 > テキストユニットの拡張
  32. 32. 4. ユニットのカスタマイズ カスタムユニット site2015
  33. 33. 4. ユニットのカスタマイズ > カスタムユニット 表示例
  34. 34. 他言語対応 site2015 4. ユニットのカスタマイズ
  35. 35. 4. ユニットのカスタマイズ > 他言語対応 admin unit_language.html テンプレート entry include unit_language.html
  36. 36. admin unit.html テンプレート entry include unit.html ファイル名を リネームする 4. ユニットのカスタマイズ > 他言語対応
  37. 37. 変更後のユニット編集画面 4. ユニットのカスタマイズ > 他言語対応
  38. 38. 表示方法 http://mkasumi.com/entry-817.html a-blog cmsでテキストユニットをマルチ言語対応した記事を 表示する方法 4. ユニットのカスタマイズ > 他言語対応
  39. 39. 2015 NEW 5. テンプレートのモジュール化
  40. 40. レイアウト機能 http://demo.a-blogcms.jp/layout.html 5. テンプレートのモジュール化 site2015 bootstrap2015 まだ 触ってない方は
  41. 41. 5. テンプレートのモジュール化 > レイアウト機能 ! モジュールID名を変更すると、違うレイアウト情報になり ます <!-- BEGIN_MODULE Layout id="topLayout" --> <!-- BEGIN_MODULE Layout id="sidebar" -->
  42. 42. 5. テンプレートのモジュール化 > レイアウト機能 ! 納品前にはテンプレートを日本語名にしておく /include/module/template/モジュール名/label.yaml ※デフォルトだとモジュール選択画面でテンプレート名が表示される entrySummary_media.html: サムネイル画像あり概要文 テンプレートファイル名 テンプレート日本語名
  43. 43. モジュールのカスタムフィールド 5. テンプレートのモジュール化 site2015 bootstrap2015
  44. 44. 5. テンプレートのモジュール化 使用例:モジュールごとの見出し
  45. 45. 5. テンプレートのモジュール化 > モジュールのカスタムフィールド admin module field.html includeのしかた
  46. 46. 5. テンプレートのモジュール化 > モジュールのカスタムフィールド includeのしかた <!-- #include file=“/admin/module/mid%{mid}.html" --> Ver.2.5.0 admin module field.html mid1.html
  47. 47. 5. テンプレートのモジュール化 > モジュールのカスタムフィールド includeのしかた <!-- #include file=“/admin/module/mid%{MID}.html" --> <!-- #include file=“/admin/module/mid%{mid}.html" --> Ver.2.5.0 admin module field.html mid1.html Ver.2.5.0.1 Ver.2.5.0.1より 増えました
  48. 48. 5. テンプレートのモジュール化 > レイアウト機能 ! Ver.2.5.0.1から追加されたグローバル変数 グローバル変数 出力例 %{MID} 50 %{MODULE_NAME} BLOG_FIELD %{MODULE_ID} fieldSuggest
  49. 49. Lessファイルのパーツ化 5. テンプレートのモジュール化 site2015 blog2015 bootstrap2015
  50. 50. 2015 NEW 6. 管理ページ内
  51. 51. 管理ページ内にリンク集のモジュールを追加 6. 管理ページ内 site2015
  52. 52. 6. 管理ページ内 > 管理ページ用のリンク集のモジュールを追加 admin dashboard-left.html 使用しているテンプレート <!-- BEGIN_MODULE Links id="adminLink" --> … <!-- END_MODULE Links --> dashboard-right.html
  53. 53. 2015 NEW 7. 読み込むCSSの変更
  54. 54. モバイルファーストの考え方に変更 7. 読み込むCSSの変更 @media (max-width: 767px) { … } @media (min-width: 768px) { … } site2015 blog2015 bootstrap2015
  55. 55. acms.cssは表のテンプレート用に acms-admin.cssが管理用CSSに 7. 読み込むCSSの変更 acms-admin.cssacms.css site2015 blog2015 bootstrap2015
  56. 56. 7. 読み込むCSSの変更 > acms.cssは表のテンプレート用に、acms-admin.cssが管理用に .acms-admin-* { … } acms-admin.cssacms.css .acms-* { … } ! クラスの接頭辞が変わっているので注意 管理画面のCSSの変更で表のテンプレートに影 響を与えないように
  57. 57. 7. 読み込むCSSの変更 > acms.cssは表のテンプレート用に、acms-admin.cssが管理用に <link href="/css/acms-admin.css" rel="stylesheet"> acms-admin.css ! 制作に関わってくるところ <link href="/css/acms.css" rel="stylesheet"> acms.css カスタムフィールド で入力できるように! 必須 任意
  58. 58. 2015 NEW 8. JSの読み込み方の変更
  59. 59. <!-- BEGIN_MODULE Js --> <script src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js --> <!-- BEGIN_MODULE Js --> <script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js --> 8. JSの読み方の変更 > index.jsからacms.jsに名前が変更 index.jsからacms.jsに名前が変更 site2015 blog2015 bootstrap2015
  60. 60. 非同期処理になったとともに読み込み方も変更に <script> ACMS.Ready(function() { new ACMS.SyncLoader() .next('%{HTTP_THEMES_DIR}site2015/js/site.js') .load(); }); </script> 8. JSの読み方の変更 > 非同期処理になったとともに読み込み方も変更に site2015 blog2015 bootstrap2015
  61. 61. 8. JSの読み方の変更 > 非同期処理になったとともに読み込み方も変更に ! 非同期処理になったわけ site2014
  62. 62. ご静聴ありがとうございました @KasumiMorita! kasumi.morita.750" 2015 NEW

×