自己紹介内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )

Size: px

Start display at page:

Download "自己紹介内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )"

とよみすみだ
9 years ago
Views:

1 スマートフォンオプションのご紹介とスマートフォン対応テーマ解説カスタマイズ 2011 年 11 月 9 日シックスアパート株式会社内毅志

2 自己紹介内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )

3 本日のサマリスマートフォンオプションとはテーマのおさらいスマートフォンオプション用テーマの内容ご紹介

4 スマートフォンオプションとは

5 スマートフォンオプションとは MT の管理画を最適化スマホ用テーマをバンドル +

6 管理画用プラグイン

7 プラグインビジネスに必要な運用機能を手のひらに

8 特徴カスタムフィールドの操作

9 特徴パソコン版に近い操作感

10 特徴リアルプレビュー

11 テーマ

12 テーマスマートフォン PC 両対応

13 PC スマートフォン両用デザインカスタマイズのベースとして提供そのままでもブログとして利用可能

14 テーマの構成理解しやすく適度なシンプルさ

15 DynamicMTML を採用 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore></mt:ignore> <$mt:include module="htmlヘッダー "$> <mtml tag="/mt:ifuseragent">

16 DynamicMTML とは Movable Typeのタグ (MTタグ) をリアルタイムに解釈して出する仕組みページをダイナミック ( 動的 ) 生成

17 ユーザーからアクセスがあったときに MT タグを解釈して出 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">

18 詳細は次のセッションで

19 リリース日他 2011 年 11 月 16 日 ( 水 ) 個人無償版もあります

20 無料配布テーマは無料配布もいます (OSS)

21 テーマの詳細テーマの詳細

22 その前にその前に

23 改めて MT のテーマご存知ですか? What is Theme?

24 テーマのおさらい

25 テーマとは入れ替え可能なテンプレートセット

26 配布もしています

27 商用テーマもあります

28 構成テーマに利用する CSS JavaScript 画像などテーマで利用する各種テンプレートのソースコードテーマの構成情報 ( 設定ファイル ) テーマのサムネイル ( 管理画で表 )

29 インストール MT インストールフォルダ /themes/ にテーマ名フォルダをアップロード

30 テーマの切替テーマインストール後管理画から適用ボタンを押す

31 テンプレートが入れ替わる

32 出もできる

33 詳しくはウェブで

34 リファレンスブックもあります

35 テーマ募集中

36 スマートフォンオプション用テーマの内容ご紹介

37 スマホテーマに戻る

38 テーマ名 Smart Blog

39 スマホ &PC 両対応 CSS JS をダイナミックに切替

40 ユーザーからアクセスがあったときに MT タグを解釈して出 <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">

41 ヘッダー部分のソース <mtml tag="mt:ifuseragent" params='wants="smartphone"'> <mt:ignore></mt:ignore> <$mt:include module="html ヘッダーモバイル用 "$> <mtml tag="mt:else"> <mt:ignore></mt:ignore> <$mt:include module="html ヘッダー "$> <mtml tag="/mt:ifuseragent">

42 パソコン用 <link rel="stylesheet" href=" <script src=" <script src=

43 <link rel="apple-touch-icon-precomposed" href=" <link rel="stylesheet" href=" <link rel="stylesheet" href=" <link rel="stylesheet" href=" <script src=" <script src=" <script src=" <script src="

44 CSS の構成

45 CSS の構造共通 base.css( 構造 ) screen.css( 配色など ) スマートフォン用 smartphone.css( スマホ用 )

46 全体の構造管理 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; }

47 配色トーン & マナーの管理 screen.css.ui-bar-a,.page-header,.page-footer,.header-menu.detail { border: 0; background: #007bbb; color: #fff; text-shadow: none; font-weight: normal; }

48 スマートフォン用のデザイン 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; }

49 Smart Blog 独自の項目

50 Smart Blog 独自項目スマートフォン用 CSS viewport jquery.mobile touch icon

51 viewport <meta name="viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

52 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');

53 touch icon <mt:assets type="image" 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>

54 タッチアイコンの変更デフォルト

56 から始まるタグを利用タグ一覧など htmlとしては出されないタグの有無によりテンプレート分岐ができる

57 解説 MovableType.jp で記事公開中

58 その他

59 ヘッダーの切替プライベートタグで挿入可能 <mt:assets limit="1"> <img src="<$mt:assetthumbnailurl width="1024"$>"> <mt:else> <img src="<$mtstaticwebpath$>support/theme_static /smart_blog/images/banner.jpg"> </mt:assets>

60 ロゴの切替 <h1 class= title page-title > <a href= <$mt:blogurl$> > <mt:assets limit= 1 > <img alt= <$mt:blogname encode_html= 1 $> src= <$mt:assetthumbnailurl$> class="page-logo"> <mt:else> <$mt:blogname$> </mt:assets> </a> </h1>

61 デモ

62 活用例

63 ご活用のほどお願い申し上げます

ホームページ制作基礎編 (HTML5 CSS3 コーディング )

ホームページ制作基礎編 (HTML5 CSS3 コーディング ) ホームページ制作基礎編 (HTML5 CSS3 コーディング ) ホームページ制作基礎編ホームページ制作基礎編目次はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

自己紹介 内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )

自己紹介内毅志 ( おさないたけし ) Movable Type Product and Marketing Manager (2011 年 4 月 )