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

1. 2015
NEW
有限会社アップルップル 森田かすみ
a-blog cmsの
2015年版の基本テーマを
使ったカスタマイズのポイント
1

2. Site2015 Blog2015 Bootstrap2015
新しく同梱されたテーマ

3. カスタマイズポイント8つ
• SEO対策
• SNSの設定
• スマートフォン対応
• テンプレートのモジュール化
• サンプルの追加
• 管理ページ内
• 読み込むCSSの変更
• 読み込むJSの変更

4. 2015
NEW
1. SEO対策

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. タイトルタグの見直し
<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. タイトルタグの見直し
<!-- 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. タイトルタグの見直し
<!-- 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. チェック用テンプレートを用意
1. SEO対策
site2015 blog2015 bootstrap2015

10. 1. SEO対策 > チェック用テンプレートを用意
Google Yahoo
! 実際の検索エンジンの表示も確認しやすいように

11. 検索エンジン、RSS、sitemap.xmlへの表示を
制御するカスタムフィールドを追加
1. SEO対策
ブログ、カテゴリー、エントリーでそれぞれカスタムフィールドを用意してい
ます。
site2015 blog2015 bootstrap2015

12. 1. SEO対策 > 検索エンジン、RSS、sitemap.xmlへの表示を制御するカスタムフィールドを追加
• /include/head/robots.txt をテーマ内に移動
• Feed_Rss2、Sitemapモジュールのフィルタの設定
を確認する
! オリジナルのテーマで使うには

13. フィルタの設定
※ Sitemapモジュールでも同じ設定が用意されています
1. SEO対策 > 検索エンジン、RSS、sitemap.xmlへの表示を制御するカスタムフィールドを追加

14. 2015
NEW
2. SNSの設定

15. フッターにSNSページへのリンクを追加
2. SNS
site2015 bootstrap2015

16. 2. SNS > Facebook、Twitter、Google Plusのシェアボタンを追加
管理画面から各リンク先が指定できるようになっています!

17. Facebook、Twitter、Google Plusのシェアボタンを追加
2. SNS
site2015 blog2015

18. 2. SNS > Facebook、Twitter、Google Plusのシェアボタンを追加
管理画面の設定から@先が指定できるようになっています!
site2015

19. 2015
NEW
3. スマートフォン対応

20. 3. スマートフォン対応 > ハイブリッドサイト用テーマを用意
sp@site2015site2015
ハイブリッドサイト用テーマを用意
site2015

21. 3. スマートフォン対応 > ハイブリッドサイト用テーマを用意
http://aogiri.net/acms_multi.html
レスポンシブと最適化のいいとこどりができる？a-blog cmsで
できる、マルチデバイス対応
元ネタ

22. ハイブリッドサイトではルール機能からテーマを指定して
います。ハイブリッドサイトにしたくない場合はルールの
設定を無効にしましょう
!
3. スマートフォン対応 > ハイブリッドサイト用テーマを用意

23. 3. スマートフォン対応 > UA別に表示件数を変更
UA別に表示件数を変更
スマホのときは3件PCのときは6件
site2015

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. ルールの管理ページにあるモジュールIDボタンとルールを
切り替えるプルダウンから変更できます
!
3. スマートフォン対応 > UA別に表示件数を変更

26. 2015
NEW
4. ユニットのカスタマイズ

27. 4. ユニットのカスタマイズ
テキストユニットの拡張
site2015

28. テキストユニットの拡張って？
4. サンプルの追加 > テキストユニットの拡張
HTMLの構造が違う
テキストユニットが
2パターン用意できる

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. unit.html内に追加されたインクルード
include unit.html
25. <!—#include file="/include/unit/tag-select.html"-->
131. <!—#include file="/include/unit/extend.html"-->
4. サンプルの追加 > テキストユニットの拡張

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. 4. ユニットのカスタマイズ
カスタムユニット
site2015

33. 4. ユニットのカスタマイズ > カスタムユニット
表示例

34. 他言語対応
site2015
4. ユニットのカスタマイズ

35. 4. ユニットのカスタマイズ > 他言語対応
admin unit_language.html
テンプレート
entry
include unit_language.html

36. admin unit.html
テンプレート
entry
include unit.html
ファイル名を
リネームする
4. ユニットのカスタマイズ > 他言語対応

37. 変更後のユニット編集画面
4. ユニットのカスタマイズ > 他言語対応

38. 表示方法
http://mkasumi.com/entry-817.html
a-blog cmsでテキストユニットをマルチ言語対応した記事を
表示する方法
4. ユニットのカスタマイズ > 他言語対応

39. 2015
NEW
5. テンプレートのモジュール化

40. レイアウト機能
http://demo.a-blogcms.jp/layout.html
5. テンプレートのモジュール化
site2015 bootstrap2015
まだ
触ってない方は

41. 5. テンプレートのモジュール化 > レイアウト機能
! モジュールID名を変更すると、違うレイアウト情報になり
ます
<!-- BEGIN_MODULE Layout
id="topLayout" -->
<!-- BEGIN_MODULE Layout
id="sidebar" -->

42. 5. テンプレートのモジュール化 > レイアウト機能
! 納品前にはテンプレートを日本語名にしておく
/include/module/template/モジュール名/label.yaml
※デフォルトだとモジュール選択画面でテンプレート名が表示される
entrySummary_media.html: サムネイル画像あり概要文
テンプレートファイル名 テンプレート日本語名

43. モジュールのカスタムフィールド
5. テンプレートのモジュール化
site2015 bootstrap2015

44. 5. テンプレートのモジュール化
使用例：モジュールごとの見出し

45. 5. テンプレートのモジュール化 > モジュールのカスタムフィールド
admin module field.html
includeのしかた

46. 5. テンプレートのモジュール化 > モジュールのカスタムフィールド
includeのしかた
<!-- #include file=“/admin/module/mid%{mid}.html" -->
Ver.2.5.0
admin module field.html
mid1.html

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. 5. テンプレートのモジュール化 > レイアウト機能
! Ver.2.5.0.1から追加されたグローバル変数
グローバル変数 出力例
%{MID} 50
%{MODULE_NAME} BLOG_FIELD
%{MODULE_ID} fieldSuggest

49. Lessファイルのパーツ化
5. テンプレートのモジュール化
site2015 blog2015 bootstrap2015

50. 2015
NEW
6. 管理ページ内

51. 管理ページ内にリンク集のモジュールを追加
6. 管理ページ内
site2015

52. 6. 管理ページ内 > 管理ページ用のリンク集のモジュールを追加
admin
dashboard-left.html
使用しているテンプレート
<!-- BEGIN_MODULE Links id="adminLink" -->
…
<!-- END_MODULE Links -->
dashboard-right.html

53. 2015
NEW
7. 読み込むCSSの変更

54. モバイルファーストの考え方に変更
7. 読み込むCSSの変更
@media (max-width: 767px) {
…
}
@media (min-width: 768px) {
…
}
site2015 blog2015 bootstrap2015

55. acms.cssは表のテンプレート用に
acms-admin.cssが管理用CSSに
7. 読み込むCSSの変更
acms-admin.cssacms.css
site2015 blog2015 bootstrap2015

56. 7. 読み込むCSSの変更 > acms.cssは表のテンプレート用に、acms-admin.cssが管理用に
.acms-admin-* {
…
}
acms-admin.cssacms.css
.acms-* {
…
}
! クラスの接頭辞が変わっているので注意
管理画面のCSSの変更で表のテンプレートに影
響を与えないように

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. 2015
NEW
8. JSの読み込み方の変更

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. 非同期処理になったとともに読み込み方も変更に
<script>
ACMS.Ready(function() {
new ACMS.SyncLoader()
.next('%{HTTP_THEMES_DIR}site2015/js/site.js')
.load();
});
</script>
8. JSの読み方の変更 > 非同期処理になったとともに読み込み方も変更に
site2015 blog2015 bootstrap2015

61. 8. JSの読み方の変更 > 非同期処理になったとともに読み込み方も変更に
! 非同期処理になったわけ
site2014

62. ご静聴ありがとうございました
@KasumiMorita!
kasumi.morita.750"
2015
NEW