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

2015NEW

有限会社アップルップル 森田かすみ

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

1

Site2015 Blog2015 Bootstrap2015

新しく同梱されたテーマ

カスタマイズポイント8つ

• SEO対策

• SNSの設定

• スマートフォン対応

• テンプレートのモジュール化

• サンプルの追加

• 管理ページ内

• 読み込むCSSの変更

• 読み込むJSの変更

2015NEW

1. SEO対策

タイトルタグの見直し

<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><!-- 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ページ目

タイトルタグの見直し<!-- 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ページ、タグ、日付、 キーワードの追加

タイトルタグの見直し<!-- 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ページ、タグ、日付、 キーワードの追加

カスタムフィールド で入力できるように！

チェック用テンプレートを用意

1. SEO対策

site2015 blog2015 bootstrap2015

1. SEO対策 > チェック用テンプレートを用意

Google Yahoo

! 実際の検索エンジンの表示も確認しやすいように

検索エンジン、RSS、sitemap.xmlへの表示を 制御するカスタムフィールドを追加

1. SEO対策

ブログ、カテゴリー、エントリーでそれぞれカスタムフィールドを用意しています。

site2015 blog2015 bootstrap2015

1. SEO対策 > 検索エンジン、RSS、sitemap.xmlへの表示を制御するカスタムフィールドを追加

• /include/head/robots.txt をテーマ内に移動

• Feed_Rss2、Sitemapモジュールのフィルタの設定

を確認する

! オリジナルのテーマで使うには

フィルタの設定

※ Sitemapモジュールでも同じ設定が用意されています

1. SEO対策 > 検索エンジン、RSS、sitemap.xmlへの表示を制御するカスタムフィールドを追加

2015NEW

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

2015NEW

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.html • /include/summary_Tablet.html • /include/summary_SmartPhone.html • /include/summary_.html

以前まで必要だったテンプレートの例

3. スマートフォン対応 > UA別に表示件数を変更

ルールの管理ページにあるモジュールIDボタンとルールを切り替えるプルダウンから変更できます

!

3. スマートフォン対応 > UA別に表示件数を変更

2015NEW

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

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

テキストユニットの拡張site2015

テキストユニットの拡張って？

4. サンプルの追加 > テキストユニットの拡張

HTMLの構造が違う テキストユニットが 2パターン用意できる

テンプレート

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. サンプルの追加 > テキストユニットの拡張

unit.html内に追加されたインクルード

include unit.html

25. <!—#include file="/include/unit/tag-select.html"-->

131. <!—#include file="/include/unit/extend.html"-->

4. サンプルの追加 > テキストユニットの拡張

unit.html内に追加されたインクルード

include unit.html

25. <!—#include file="/include/unit/tag-select.html"-->

131. <!—#include file="/include/unit/extend.html"-->

これからはなるべく unit.htmlは

複製しない制作へ

4. サンプルの追加 > テキストユニットの拡張

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. ユニットのカスタマイズ > 他言語対応

2015NEW

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

レイアウト機能

http://demo.a-blogcms.jp/layout.html

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

site2015 bootstrap2015

まだ 触ってない方は

5. テンプレートのモジュール化 > レイアウト機能

! モジュールID名を変更すると、違うレイアウト情報になります

<!-- BEGIN_MODULE Layout id="topLayout" -->

<!-- BEGIN_MODULE Layout id="sidebar" -->

5. テンプレートのモジュール化 > レイアウト機能

! 納品前にはテンプレートを日本語名にしておく

/include/module/template/モジュール名/label.yaml

※デフォルトだとモジュール選択画面でテンプレート名が表示される

entrySummary_media.html: サムネイル画像あり概要文テンプレートファイル名 テンプレート日本語名

モジュールのカスタムフィールド

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

site2015 bootstrap2015

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

使用例：モジュールごとの見出し

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

admin module field.html

includeのしかた

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

includeのしかた

<!-- #include file=“/admin/module/mid%{mid}.html" -->

Ver.2.5.0

admin module field.html

mid1.html

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より 増えました

5. テンプレートのモジュール化 > レイアウト機能

! Ver.2.5.0.1から追加されたグローバル変数

グローバル変数 出力例

%{MID} 50

%{MODULE_NAME} BLOG_FIELD

%{MODULE_ID} fieldSuggest

Lessファイルのパーツ化

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

site2015 blog2015 bootstrap2015

2015NEW

6. 管理ページ内

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

6. 管理ページ内

site2015

6. 管理ページ内 > 管理ページ用のリンク集のモジュールを追加

admindashboard-left.html

使用しているテンプレート

<!-- BEGIN_MODULE Links id="adminLink" --> …

<!-- END_MODULE Links -->

dashboard-right.html

2015NEW

7. 読み込むCSSの変更

モバイルファーストの考え方に変更

7. 読み込むCSSの変更

@media (max-width: 767px) { …

}

@media (min-width: 768px) { …

}

site2015 blog2015 bootstrap2015

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-* { …

}

! クラスの接頭辞が変わっているので注意

管理画面のCSSの変更で表のテンプレートに影響を与えないように

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

カスタムフィールド で入力できるように！

必須

任意

2015NEW

8. JSの読み込み方の変更

<!-- 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

非同期処理になったとともに読み込み方も変更に

<script>

ACMS.Ready(function() {

new ACMS.SyncLoader()

.next('%{HTTP_THEMES_DIR}site2015/js/site.js')

.load();

});

</script>

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

site2015 blog2015 bootstrap2015

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

! 非同期処理になったわけ

site2014

ご静聴ありがとうございました

@KasumiMorita!

kasumi.morita.750"

2015NEW