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

2015NEW

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

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

1

Site2015 Blog2015 Bootstrap2015

新しく同梱されたテーマ

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

• SEO対策

• SNSの設定

• スマートフォン対応

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

• サンプルの追加

• 管理ページ内

• 読み込むCSSの変更

• 読み込むJSの変更

2015NEW

1. SEO対策

タイトルタグの見直し

<title>%{ENTRY_TITLE} | %{CATEGORY_NAME} |

%{BLOG_NAME}</title>

1. SEO対策

site2014

site2015 blog2015 bootstrap2015

タイトルタグの見直し

<title>%{ENTRY_TITLE} | %{CATEGORY_NAME} |

%{BLOG_NAME}</title>

1. SEO対策

site2014


タグやページの一覧ページのときにタイトルタグが重複してしまう

<title>レイアウト機能 | a-blog cms 制作者向け情報</title>

<title>レイアウト機能 | a-blog cms 制作者向け情報</title>

一覧ページ 1ページ目

一覧ページ 2ページ目

タイトルタグの見直し%{PAGE}ページ目 | {blog_meta_title} |

%{ROOT_BLOG_NAME}%{BLOG_NAME}{name}・ | {category_meta_title} | %{ROOT_BLOG_NAME}%{CATEGORY_NAME} | %{BLOG_NAME} | %{KEYWORD} | %{DATE} | %{ROOT_BLOG_NAME}%{ENTRY_TITLE} | %{CATEGORY_NAME} | %{BLOG_NAME} | %{ROOT_BLOG_NAME}

1. SEO対策

site2015ページ、タグ、日付、キーワードの追加

タイトルタグの見直し%{PAGE}ページ目 | {blog_meta_title} |

%{ROOT_BLOG_NAME}%{BLOG_NAME}{name}・ | {category_meta_title} | %{ROOT_BLOG_NAME}%{CATEGORY_NAME} | %{BLOG_NAME} | %{KEYWORD} | %{DATE} | %{ROOT_BLOG_NAME}%{ENTRY_TITLE} | %{CATEGORY_NAME} | %{BLOG_NAME} | %{ROOT_BLOG_NAME}

1. SEO対策

site2015ページ、タグ、日付、キーワードの追加

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

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

1. SEO対策


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

Google Yahoo

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

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

1. SEO対策

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


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


http://aogiri.net/acms_multi.html

レスポンシブと最適化のいいとこどりができる？a-blog cmsでできる、マルチデバイス対応

元ネタ

http://aogiri.net/acms_multi.html

ハイブリッドサイトではルール機能からテーマを指定しています。ハイブリッドサイトにしたくない場合はルールの設定を無効にしましょう

!


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

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


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

!


2015NEW

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


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

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

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

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

テンプレート

include unit tag-select.html



<div class=“entry-container">

<div class=“acms-table-responsive”>

<table{class}>{text}[table]</table>

</div>

</div>


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

include unit.html

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

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


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

include unit.html

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

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

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

複製しない制作へ



カスタムユニットsite2015

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

表示例

他言語対応site2015


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

admin unit_language.html

テンプレート

entry

include unit_language.html

admin unit.html

テンプレート

entry

include unit.htmlファイル名を

リネームする


変更後のユニット編集画面


表示方法

http://mkasumi.com/entry-817.html

a-blog cmsでテキストユニットをマルチ言語対応した記事を表示する方法


http://mkasumi.com/entry-817.html

2015NEW

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

レイアウト機能

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



まだ触ってない方は

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

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

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






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

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

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

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

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




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

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

admin module field.html

includeのしかた


includeのしかた



Ver.2.5.0


mid1.html


includeのしかた





Ver.2.5.0


mid1.html

Ver.2.5.0.1

Ver.2.5.0.1より増えました


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

グローバル変数出力例

%{MID} 50

%{MODULE_NAME} BLOG_FIELD

%{MODULE_ID} fieldSuggest

Lessファイルのパーツ化



2015NEW

6. 管理ページ内

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

6. 管理ページ内

site2015

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

admindashboard-left.html

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

 …



dashboard-right.html

2015NEW

7. 読み込むCSSの変更

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


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

}

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

}


acms.cssは表のテンプレート用に acms-admin.cssが管理用CSSに


acms-admin.cssacms.css


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の読み込み方の変更



<script src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script>



<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script>

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の読み方の変更 > 非同期処理になったとともに読み込み方も変更に


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

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

site2014

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

@KasumiMorita!

kasumi.morita.750"

2015NEW

Internet

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

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