css nite in kansaiのmovable typeスライド(黒野明子作成)
DESCRIPTION
cremaこと黒野明子担当分のMovable Typeのスライドです。TRANSCRIPT
![Page 1: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/1.jpg)
弁野弁護士事務所さまご提案
crema design / linker 黒野明子
![Page 2: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/2.jpg)
弁野弁護士事務所さまのサイトで実現したいこと
‣自分以外の人も更新できるようにしたい(HTMLが分からない人でもカンタンに)
‣お問い合せフォームを設置したい‣費用はそんなにかけられない
![Page 3: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/3.jpg)
HTMLが分からなくても誰でも更新できるように‣「mixi日記」を書く程度の作業で更新!
![Page 4: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/4.jpg)
MT5で記事投稿のDEMO
![Page 5: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/5.jpg)
既存の静的HTMLを使ってMovable Typeのテンプレート作成
![Page 6: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/6.jpg)
• 既存のサイトHTML(トップページ)既存の静的HTMLを使って
Movable Typeのテンプレート作成
<!-- Right News Box --><div id="news" class="box">
<h3><img src="img/h3_news.png" alt="新着情報・更新情報" width="470" height="30" /></h3><ul>
<li><a href="#">法律まめ知識vol.252「執行猶予とは?」(10.2.27)</a></li><li><a href="#">次回の無料法律相談会は2月29日に開催します。(10.2.26)</a></li><li><a href="#">プロフィールに新しいメンバーを追加しました。(10.2.24)</a></li><li><a href="#">法律まめ知識vol.251「裁判員に選ばれたら?」(10.2.22)</a></li><li><a href="#">プロフィールに飼い犬の情報を追加しました。(10.2.20)</a></li>
</ul></div><!-- /Right News Box -->
![Page 7: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/7.jpg)
とりあえず、トップページで更新する部分だけにMTタグを入れてみる
HTML編集のDEMO
![Page 8: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/8.jpg)
ファイルをサーバにアップしてファイルへのリンクを設定
DEMO
![Page 9: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/9.jpg)
再構築
DEMO
![Page 10: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/10.jpg)
次に、個別の記事ページの更新する部分だけにMTタグを入れてみるHTML編集のDEMO
![Page 11: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/11.jpg)
ファイルをサーバにアップしてファイルへのリンクを設定
DEMO
![Page 12: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/12.jpg)
再構築
DEMO
![Page 13: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/13.jpg)
既存の記事をインポートする
DEMO
![Page 14: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/14.jpg)
お問い合せフォームの設置‣ A-Form‣ メールフォームプラグイン
![Page 15: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/15.jpg)
メールフォームプラグイン‣ Movable Type5に設置された様子
![Page 16: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/16.jpg)
テストでお問い合わせしてみる
DEMO
![Page 17: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/17.jpg)
ジョニーネイルサロンさまご提案
crema design / linker 黒野明子
![Page 18: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/18.jpg)
ジョニーネイルサロンさまのサイトで実現したいこと‣携帯サイト連動 (絵文字対応・3キャリア)‣携帯クーポンを発行したい‣ついでにSNSもできない?
![Page 19: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/19.jpg)
携帯対応とは‣携帯から投稿する ‣携帯での閲覧ページを作成する
![Page 20: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/20.jpg)
携帯から投稿‣メール投稿プラグイン「MailPack」‣ Flickrからのブログ投稿機能を活用
![Page 21: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/21.jpg)
Flickrから投稿
![Page 22: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/22.jpg)
DEMO
メール→Flickrから投稿
![Page 23: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/23.jpg)
携帯での閲覧ページを作成• Power CMS for MT(会員限定ページ作成や携帯MT管理画面)
•ケータイキット for Movable Type(絵文字対応)
•モバイルサイトmaker for Movable Type(一部絵文字対応)
•MT4i
![Page 24: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/24.jpg)
ケータイキットfor Movable Type
![Page 25: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/25.jpg)
モバイルサイトmaker for Movable Type
![Page 26: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/26.jpg)
モバイルサイトmaker for Movable Type
データベース
Movable Type モバイルサイトMaker
![Page 27: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/27.jpg)
![Page 28: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/28.jpg)
SNS(MTCS)‣ 東京もつ鍋天国制作:黒野明子+秋野琢
![Page 29: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/29.jpg)
波津根不動産さまご提案
crema design / linker 黒野明子
![Page 30: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/30.jpg)
波津根不動産さまのサイトで実現したいこと
‣多数項目がある物件登録画面を実装してほしい‣各店舗から更新担当者がいる(ユーザー権限の設定)
‣カスタム検索を実装したい(地名/沿線/物件条件等から検索できる)
![Page 31: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/31.jpg)
多数項目のある入力画面
DEMO
![Page 32: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/32.jpg)
ユーザー権限の設定DEMO
![Page 33: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/33.jpg)
‣ タグの絞り込み検索(小粋空間)カスタム検索を実装
西麻布
和室
3LDK
![Page 34: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/34.jpg)
タグの絞り込み検索を実装‣ Splitプラグインをインストール‣テンプレートを書き換え
![Page 35: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/35.jpg)
タグの絞り込み検索
DEMO
![Page 36: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/36.jpg)
カフェ・ジュネーベさま参考情報
crema design / linker 黒野明子
![Page 37: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/37.jpg)
FlashとMTの連動‣ NORIのFlashユーザのためのMovable Type講座 gihyo.jp版
連載:トゴル・カンパニー/NORIさん
![Page 38: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/38.jpg)
FlashとMTの連動‣ うるまでるびデラックス制作:トゴル・カンパニー/NORIさん
![Page 39: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/39.jpg)
‣ カレン代表取締役ブログ制作:FXB/原一浩さん
FlashとMTの連動
![Page 40: CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)](https://reader034.vdocuments.net/reader034/viewer/2022042514/5592e4e51a28ab2d698b45b9/html5/thumbnails/40.jpg)
FlashとMTの連動‣ 日本アドバタイザーズ協会制作:FXB/原一浩さん