a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
-
Upload
kasumi-morita -
Category
Internet
-
view
699 -
download
5
Transcript of 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