Contenu connexe
Similaire à Movable typeでモバイルギャラリーサイト
Similaire à Movable typeでモバイルギャラリーサイト (20)
Movable typeでモバイルギャラリーサイト
- 2. 自己紹介
• 塚口祐司
• 職業：Webデザイナー
• ゆるふわ勉強会運営
• Movable Type歴
– Movable Type3で個人ブログ
– Movable Type4～メインにテンプレート制作
– MT Cafe Tokyo 第1回＆第2回参加
• ブログ
– http://creator-life.net/
– http://code-life.net/
• ソーシャル
– twitter：@regret_raym
– facebook：regretraym
- 18. コンテンツ遷移とMT構成を考えます
インデックス
TOP テンプレート
ブログのみで構成 このサイトにつ ウェブページ
いて
ジャンル別 インデックス
新着写真一覧
一覧 テンプレート
写真一覧 写真一覧
写真 写真
エントリーアーカイブ
- 27. ファイル名を変更します
• 命名規則をつけて、ファイル名一括変更ソフトなどで変換
する。
元ファイル名：SSK_utoutosuruneko.jpg
リネーム後：neko0001_001.jpg～
※記事のbasenameをこれにする
※テンプレート記述例
<img src=“/images/<$mt:EntryBasename$>_001.jpg”
alt=“画像” />
001などの番号は、ループ内でカウントなどさせたり。
- 29. コーディングします
• ガラケー特有コーディング
– spacer.gifの活躍
– pタグはちょっと･･･
– フォントサイズはmediumとsmallで
– h1、h2タグとかはmargin、paddingとfont-size調整
• スマートフォンコーディング
– HTML5 / CSS3（Sass+Compass）
– sprite.png
– ratina対応
– text-shadowの罠
- 30. コーディングします
• ガラケー特有コーディング
– spacer.gifの活躍
– pタグはちょっと･･･
モジュールなどで、変数セットなど
– フォントサイズはmediumとsmallで
あらかじめ用意しておくと便利！
– h1、h2タグとかはmargin、paddingとfont-size調整
• スマートフォンコーディング
– HTML5 / CSS3（Sass+Compass）
– sprite.png
– ratina対応
– text-shadowの罠
- 31. コーディングします
• ガラケー特有コーディング
– spacer.gifの活躍
– pタグはちょっと･･･
モジュールなどで、変数セットなど
– フォントサイズはmediumとsmallで
あらかじめ用意しておくと便利！
– h1、h2タグとかはmargin、paddingとfont-size調整
• スマートフォンコーディング
– HTML5 / CSS3（Sass+Compass）
– sprite.png
HTTPリクエスト数を減らしたり、
– ratina対応
画像のサイズなどを「JPEGmini」など使って削減
– text-shadowの罠
- 32. モジュール記述例
• Spacer.gifの場合
<mt:SetVarBlock name="spacer">
<div style="height:10px;">
<img src="spacer.gif" alt="" width="1" height=“10" />
</div>
</mt:SetVarBlock>
<$mt:GetVar name=“spacer”>で呼び出し
- 35. スマートフォン振り分け
• ケータイキットならMTKeitaiIfSmartphoneタグ
<mt:KeitaiIfSmartphone>
<!-- スマートフォンの内容 -->
<mt:KeitaiElse>
<!-- フィーチャーフォンの内容 -->
※3キャリアやそのほかに分けるなら
<mt:KeitaiIfCarrier in=“i"></mt:KeitaiIfCarrier>
<mt:KeitaiIfCarrier in=“ez"></mt:KeitaiIfCarrier>
<mt:KeitaiIfCarrier in=“s"></mt:KeitaiIfCarrier>
<mt:KeitaiIfCarrier in=“other"></mt:KeitaiIfCarrier>
</mt:KeitaiIfSmartphone>
