スマートフォンオプションのご紹介とスマートフォン対応テーマ解説 カスタマイズ 2011 年 11 月 9 日シックス アパート株式会社 内毅志
自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )
本日のサマリ スマートフォンオプションとは テーマのおさらい スマートフォンオプション用テーマの内容ご紹介
スマートフォンオプションとは
スマートフォンオプションとは MT の管理画 を 最適化 スマホ用テーマを バンドル +
管理画 用 プラグイン
プラグイン ビジネスに必要な運用機能を 手のひらに
特徴 カスタムフィールド の操作
特徴 パソコン版に近い 操作感
特徴 リアルプレビュー
テーマ
テーマ スマートフォン PC 両対応
PC スマートフォン両用 デザインカスタマイズのベースとして提供 そのままでも ブログとして利用可能
テーマの構成 理解しやすく 適度なシンプルさ
DynamicMTML を採用 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore><!-- for Smart Phone --></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore><!-- for Other --></mt:ignore> <$mt:include module="htmlヘッダー "$> <mtml tag="/mt:ifuseragent">
DynamicMTML とは Movable Typeのタグ (MTタグ) を リアルタイムに解釈して出 する仕組みページをダイナミック ( 動的 ) 生成
ユーザーからアクセスがあったときに MT タグを解釈して出 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore><!-- for Smart Phone --></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore><!-- for Other --></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">
詳細は次のセッションで
リリース日 他 2011 年 11 月 16 日 ( 水 ) 個人無償版もあります
無料配布 テーマは無料配布も います (OSS)
テーマの詳細 テーマの詳細
その前に その前に
改めて MT のテーマ ご存知ですか? What is Theme?
テーマのおさらい
テーマとは 入れ替え可能なテンプレートセット
配布もしています http://communities.movabletype.jp/plugins/
商用テーマもあります
構成 テーマに利用する CSS JavaScript 画像など テーマで利用する各種テンプレートのソースコード テーマの構成情報 ( 設定ファイル ) テーマのサムネイル ( 管理画 で表 )
インストール MT インストールフォルダ /themes/ に テーマ名フォルダをアップロード
テーマの切替 テーマインストール後 管理画 から 適用 ボタンを押す
テンプレートが入れ替わる
出 もできる
詳しくはウェブで http://www.movabletype.jp/documentation/
リファレンスブックもあります
テーマ募集中
スマートフォンオプション用テーマの内容ご紹介
スマホテーマに戻る
テーマ名 Smart Blog
スマホ &PC 両対応 CSS JS をダイナミックに切替
ユーザーからアクセスがあったときに MT タグを解釈して出 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore><!-- for Smart Phone --></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore><!-- for Other --></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">
ヘッダー部分のソース <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore><!-- for Smart Phone --></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore><!-- for Other --></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">
パソコン用 <link rel="stylesheet" href="http://example.com/styles.css"> <script src="http://example.com/mt.js"></script> <script src= http://example.com/jquery.min.js"></script>
<link rel="apple-touch-icon-precomposed" href="http://example.com/touch-icon-default.png"> <link rel="stylesheet" href="http://example.com/jquery.mobile.min.css"> <link rel="stylesheet" href="http://example.com/styles.css"> <link rel="stylesheet" href="http://example.com/smartphone.css"> <script src="http://example.com/mt.js"></script> <script src="http://example.com/jquery.min.js"></script> <script src="http://example.com/mt-theme-smart-blog.js"></script> <script src="http://example.comjquery.mobile.min.js"></script>
CSS の構成
CSS の構造 共通 base.css( 構造 ) screen.css( 配色など ) スマートフォン用 smartphone.css( スマホ用 )
全体の構造管理 base.css /* - Layout */.content,.page-header,.page-footer { padding: 1px 10px; }.main-content { float: left; width: 640px; overflow: hidden; }.related-content { float: right; width: 280px; margin-left: 10px; }.inner { width: 960px; margin: 0 auto; }.content-inner { margin: 1.62em auto; }
配色 トーン & マナーの管理 screen.css.ui-bar-a,.page-header,.page-footer,.header-menu.detail { border: 0; background: #007bbb; color: #fff; text-shadow: none; font-weight: normal; }
スマートフォン用のデザイン smartphone.css /* - Layout */.inner { width: auto; max-width: 100%; margin: 0; }.content,.page-header,.page-footer { padding: 0; }.content-inner { padding: 0 9px; }.main-content { float: none; width: auto; overflow: visible; }
Smart Blog 独自の項目
Smart Blog 独自項目 スマートフォン用 CSS viewport jquery.mobile touch icon
viewport <meta name="viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
jquery Mobile jquery Mobile を活用 /* for jquery Mobile */ $(document).bind("mobileinit", function(){ $.mobile.ajaxenabled = false; $.mobile.hashlisteningenabled = false; }); /* Tabs */ jquery(function() { $('.menu.widget').hide(); $('.menu.widget:first').show(); $('.tabs >.tab:first').addclass('active');
touch icon <mt:assets type="image" tag="@site_touch_icon" limit="1"> <link rel="apple-touch-icon-precomposed" href="<$mt:assetthumbnailurl width="114" square="1"$>"> <mt:else> <link rel="apple-touch-icon-precomposed" href="<$mtstaticwebpath$>support/theme_static/ smart_blog/images/touch-icon-default.png"> </mt:assets>
タッチアイコンの変更 デフォルト プライベートタグによる指定画像があった場合 @SITE_TOUCH_ICON
プライベートタグとは @ から始まるタグを利用 タグ一覧 など htmlとしては出 されない タグの有無により テンプレート分岐ができる
解説 http://www.movabletype.jp/blog/mtddc2011_special_03.html MovableType.jp で記事公開中
その他
ヘッダーの切替 プライベートタグで挿入可能 <mt:assets tag="@site_banner" limit="1"> <img src="<$mt:assetthumbnailurl width="1024"$>"> <mt:else> <img src="<$mtstaticwebpath$>support/theme_static /smart_blog/images/banner.jpg"> </mt:assets>
ロゴの切替 <h1 class= title page-title > <a href= <$mt:blogurl$> > <mt:assets tag= @SITE_LOGO limit= 1 > <img alt= <$mt:blogname encode_html= 1 $> src= <$mt:assetthumbnailurl$> class="page-logo"> <mt:else> <$mt:blogname$> </mt:assets> </a> </h1>
デモ
活用例
ご活用のほど お願い申し上げます