Submit Search
Upload
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
•
2 likes
•
2,298 views
Kasumi Morita
Follow
2015年5月22日(金)のa-blog cms DAY in Nagoya でお話しした内容です。
Read less
Read more
Internet
Report
Share
Report
Share
1 of 62
Download now
Download to read offline
Recommended
a-blog cmsでできるマルチデバイス対応
a-blog cmsでできるマルチデバイス対応
eriko yamada
ウェブサイト/ブログを組み合わせたサイトのテーマ化
ウェブサイト/ブログを組み合わせたサイトのテーマ化
Hajime Fujimoto
Wp html5
Wp html5
regret raym
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
20141206 handson
20141206 handson
Six Apart
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Sosuke Kimura
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
Webteko 20090925
Webteko 20090925
だいすけ ふるかわ
Recommended
a-blog cmsでできるマルチデバイス対応
a-blog cmsでできるマルチデバイス対応
eriko yamada
ウェブサイト/ブログを組み合わせたサイトのテーマ化
ウェブサイト/ブログを組み合わせたサイトのテーマ化
Hajime Fujimoto
Wp html5
Wp html5
regret raym
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
20141206 handson
20141206 handson
Six Apart
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Sosuke Kimura
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
Webteko 20090925
Webteko 20090925
だいすけ ふるかわ
GoogleWebsiteOptimizerの使い方:非同期タグバージョン
GoogleWebsiteOptimizerの使い方:非同期タグバージョン
VOYAGE GROUP UIO strategies section
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
Moodle Web Service を用いたバルク評定インポート (Bulk Grade Import with Moodle Web Services)
Moodle Web Service を用いたバルク評定インポート (Bulk Grade Import with Moodle Web Services)
Ryukoku University
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
Osamu Monoe
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
Makoto Nishimura
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
20141101 handson
20141101 handson
Six Apart
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
mock overview
mock overview
tutinoko16
WordBech Osaka No.28
WordBech Osaka No.28
Kite Koga
オープンデータを利用した企業分析ツール"Buffett-Code"について
オープンデータを利用した企業分析ツール"Buffett-Code"について
Shu (shoe116)
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
yoshikawa_t
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
bitpart
2005 05 21_xoops_xev4_customizing
2005 05 21_xoops_xev4_customizing
Tom Hayakawa
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
GWOの使い方~非同期タグVer~
GWOの使い方~非同期タグVer~
Kazumasa Harumoto
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Mignon Style
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Hirokazu Nishi
UIの色のコントラスト比十分ですか?
UIの色のコントラスト比十分ですか?
Kasumi Morita
a-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 spring
Kasumi Morita
More Related Content
Similar to a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
GoogleWebsiteOptimizerの使い方:非同期タグバージョン
GoogleWebsiteOptimizerの使い方:非同期タグバージョン
VOYAGE GROUP UIO strategies section
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
Moodle Web Service を用いたバルク評定インポート (Bulk Grade Import with Moodle Web Services)
Moodle Web Service を用いたバルク評定インポート (Bulk Grade Import with Moodle Web Services)
Ryukoku University
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
Osamu Monoe
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
Makoto Nishimura
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
20141101 handson
20141101 handson
Six Apart
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
mock overview
mock overview
tutinoko16
WordBech Osaka No.28
WordBech Osaka No.28
Kite Koga
オープンデータを利用した企業分析ツール"Buffett-Code"について
オープンデータを利用した企業分析ツール"Buffett-Code"について
Shu (shoe116)
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
yoshikawa_t
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
bitpart
2005 05 21_xoops_xev4_customizing
2005 05 21_xoops_xev4_customizing
Tom Hayakawa
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
GWOの使い方~非同期タグVer~
GWOの使い方~非同期タグVer~
Kazumasa Harumoto
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Mignon Style
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
Hirokazu Nishi
Similar to a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
(20)
GoogleWebsiteOptimizerの使い方:非同期タグバージョン
GoogleWebsiteOptimizerの使い方:非同期タグバージョン
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Moodle Web Service を用いたバルク評定インポート (Bulk Grade Import with Moodle Web Services)
Moodle Web Service を用いたバルク評定インポート (Bulk Grade Import with Moodle Web Services)
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
Ec cubeの基礎からcms連携まで
Ec cubeの基礎からcms連携まで
jQuery Mobileの基礎
jQuery Mobileの基礎
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
20141101 handson
20141101 handson
20151206 hamamatsu handson
20151206 hamamatsu handson
mock overview
mock overview
WordBech Osaka No.28
WordBech Osaka No.28
オープンデータを利用した企業分析ツール"Buffett-Code"について
オープンデータを利用した企業分析ツール"Buffett-Code"について
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
2005 05 21_xoops_xev4_customizing
2005 05 21_xoops_xev4_customizing
Oktopartial Introduction
Oktopartial Introduction
GWOの使い方~非同期タグVer~
GWOの使い方~非同期タグVer~
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
More from Kasumi Morita
UIの色のコントラスト比十分ですか?
UIの色のコントラスト比十分ですか?
Kasumi Morita
a-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 spring
Kasumi Morita
最近よく聞くブロックタイプエディタを CMSごとに調べてみた
最近よく聞くブロックタイプエディタを CMSごとに調べてみた
Kasumi Morita
a-blog cms が与える体験
a-blog cms が与える体験
Kasumi Morita
変化し続けるウェブ技術を追うためには
変化し続けるウェブ技術を追うためには
Kasumi Morita
エンジニアがUiデザインにちょっとだけ貢献する
エンジニアがUiデザインにちょっとだけ貢献する
Kasumi Morita
a-blog cms 2017年テーマの紹介
a-blog cms 2017年テーマの紹介
Kasumi Morita
コーディングしながらデザインルールをドキュメント化してみた
コーディングしながらデザインルールをドキュメント化してみた
Kasumi Morita
エンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニック
Kasumi Morita
数が増えてもこわくない!Quantity Queries の紹介
数が増えてもこわくない!Quantity Queries の紹介
Kasumi Morita
とってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りました
Kasumi Morita
1から始めるAMP対応
1から始めるAMP対応
Kasumi Morita
Sassを使いこなそう
Sassを使いこなそう
Kasumi Morita
マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方
Kasumi Morita
a-blog cms でAMPに対応する
a-blog cms でAMPに対応する
Kasumi Morita
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
Kasumi Morita
マークアップの最適解を 見つけ出す方法
マークアップの最適解を 見つけ出す方法
Kasumi Morita
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
Kasumi Morita
a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?
Kasumi Morita
絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところ
Kasumi Morita
More from Kasumi Morita
(20)
UIの色のコントラスト比十分ですか?
UIの色のコントラスト比十分ですか?
a-blog cms Training Camp 2019 spring
a-blog cms Training Camp 2019 spring
最近よく聞くブロックタイプエディタを CMSごとに調べてみた
最近よく聞くブロックタイプエディタを CMSごとに調べてみた
a-blog cms が与える体験
a-blog cms が与える体験
変化し続けるウェブ技術を追うためには
変化し続けるウェブ技術を追うためには
エンジニアがUiデザインにちょっとだけ貢献する
エンジニアがUiデザインにちょっとだけ貢献する
a-blog cms 2017年テーマの紹介
a-blog cms 2017年テーマの紹介
コーディングしながらデザインルールをドキュメント化してみた
コーディングしながらデザインルールをドキュメント化してみた
エンジニアのためのプレゼンテクニック
エンジニアのためのプレゼンテクニック
数が増えてもこわくない!Quantity Queries の紹介
数が増えてもこわくない!Quantity Queries の紹介
とってもシンプルなスライダーのjQueryプラグイン作りました
とってもシンプルなスライダーのjQueryプラグイン作りました
1から始めるAMP対応
1から始めるAMP対応
Sassを使いこなそう
Sassを使いこなそう
マークアップを体験するためのツールの使い方
マークアップを体験するためのツールの使い方
a-blog cms でAMPに対応する
a-blog cms でAMPに対応する
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
マークアップの最適解を 見つけ出す方法
マークアップの最適解を 見つけ出す方法
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
a-blog cms ってどんなCMS?
a-blog cms ってどんなCMS?
絵本を作って感じたSVGの良いところとつまずいたところ
絵本を作って感じたSVGの良いところとつまずいたところ
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
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
Download now