メディア芸術基礎 II TumblrでWebサイトを作成

4,577 views
4,473 views

Published on

Published in: Education
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,577
On SlideShare
0
From Embeds
0
Number of Embeds
965
Actions
Shares
0
Downloads
26
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

メディア芸術基礎 II TumblrでWebサイトを作成

  1. 1. メディア芸術基礎 II TumblrでWebサイトを作成 2013年9月30日、10月7日 多摩美術大学情報デザイン学科メディア芸術コース 担当:田所淳
  2. 2. 今日の内容 ‣ Tumblrのサービスを使用してWebサイトの公開に挑戦! ‣ http://www.tumblr.com
  3. 3. Tumblrとは? ‣ (ミニ)ブログと、ソーシャルブックマークを統合 ‣ 2007年3月1日にサービス開始 ‣ CEO、David Karp (27歳!)
  4. 4. Tumblrとは? ‣ 利用状況 (2013年9月現在) ‣ 138,900,000 のブログ ‣ 62,400,000,000 の投稿 ‣ 参考:http://www.tumblr.com/about
  5. 5. Tumblrにアカウントを作成する
  6. 6. Tumblrにアカウントを作成する ‣ まずは、アカウントを作成 ‣ 既にアカウントを取得している方は、既存アカウントを活用
  7. 7. Tumblrにアカウントを作成する ‣ Step 1: ‣ Tumblrのサイトにアクセス http://www.tumblr.com ‣ 右上にある「Sign up」ボタンをクリック
  8. 8. Tumblrにアカウントを作成する ‣ 登録は、emailとpasswordとusername を入力するだけ!
  9. 9. Tumblrにアカウントを作成する ‣ 年齢確認に正直に答えましょう
  10. 10. Tumblrにアカウントを作成する ‣ 表示される、判読しずらい文字を入力 ‣ コンピュータによる大量のアカウント取得を防止している
  11. 11. Tumblrにアカウントを作成する ‣ 登録したemail宛てに確認のメールが届くので認証
  12. 12. Tumblrにアカウントを作成する ‣ Step 2: ‣ ユーザー登録 ‣ まず登録するのは以下の3項目のみ ‣ emailアドレス ‣ パスワード ‣ ユーザ名 ‣ 年齢を入力、利用規約を読んだことにして「次へ」
  13. 13. Tumblrにアカウントを作成する ‣ 登録が完了すると、登録したemailアドレスに確認のメールが 送られてくるはず ‣ 「メールアドレスを認証する」を選択しアカウントを確定
  14. 14. Tumblrにアカウントを作成する ‣ ログイン完了、スタートアップ画面が表示される
  15. 15. Tumblrにアカウントを作成する ‣ 画面の指示に従って、諸々設定 ‣ 1. 自分のポートレートを投稿 ‣ 2. 自分のブログ用のテーマとタイトルを選択 ‣ 4. アバターを変更する ‣ 順番にこなしていきましょう!
  16. 16. Tumblrにアカウントを作成する ‣ タイトルやブログの説明は、テーマのカスタマイズ画面で ‣ テーマ選択もここから
  17. 17. Tumblrにアカウントを作成する ‣ 設定画面で、サムネイル画像や、URLを設定する
  18. 18. Tumblrを使ってみる
  19. 19. Tumblrを使ってみる ‣ Tumblrでは、様々な種類のメディアを投稿できる ‣ テキスト、画像、引用、リンク、チャット、音声、動画
  20. 20. Tumblrを使ってみる ‣ 投稿するメディアを選択し、実際に投稿してみる
  21. 21. Tumblrを使ってみる ‣ 「保存・公開」すると、ダッシュボードに追加される
  22. 22. Tumblrを使ってみる ‣ ダッシュボード右上「(ブログ名) を開く」ボタンを押してみる
  23. 23. Tumblrを使ってみる ‣ 設定したテーマで投稿が表示される ‣ → このページが公開されたブログに相当する
  24. 24. Tumblrを使ってみる ‣ ブックマークレットを設定すると、投稿が楽になる ‣ http://www.tumblr.com/goodies   ‣ このページにある「Tumblrで共有」のリンクをドラッグし て、ブックマークバーに追加する
  25. 25. Tumblrを使ってみる ‣ 投稿したい情報のあるサイトへ移動して、登録したブックマー クレットを押す ‣ 別ウィンドウで投稿画面が表示される
  26. 26. Tumblrを使ってみる ‣ 実習: ‣ 作成したTumblrに、様々なメディアを投稿してみる ‣ ある程度投稿が溜まったら、テーマを選択して好みのデザイン にしてみる ‣ 余裕があれば、テーマをカスタマイズ ‣ 作成したブログのURLを下記にメールしてください ‣ tadokoro+geidai@gmail.com
  27. 27. 参考:Tumblrの有名サイト
  28. 28. 参考:Tumblrの有名サイト ‣ Barack Obama (http://barackobama.tumblr.com/)
  29. 29. 参考:Tumblrの有名サイト ‣ Lady Gaga (http://amenfashion.tumblr.com/)
  30. 30. 参考:Tumblrの有名サイト ‣ VOGUE (http://vogue.tumblr.com/)
  31. 31. 参考:Tumblrの有名サイト ‣ GQ Magazine (http://gq.tumblr.com/)
  32. 32. 参考:Tumblrの有名サイト ‣ GICCI (http://gucci.tumblr.com/)
  33. 33. 参考:Tumblrの有名サイト ‣ STUDIO VOICE (http://studiovoice.tumblr.com/)
  34. 34. 参考:Tumblrの有名サイト ‣ ART iT Japan (http://art-it.tumblr.com/)
  35. 35. 参考:Tumblrの有名サイト ‣ 水野美紀 (http://mikimizuno.com/) ‣
  36. 36. 既存のテーマをカスタマイズする
  37. 37. 既存のテーマをカスタマイズする ‣ まず今回は、比較的簡単な方法で ‣ 既存のテーマベースにをカスタマイズしていく
  38. 38. 既存のテーマをカスタマイズする ‣ もし自分のメインのTumblrブログがあって、そちらの設定は 変えたくない場合は、別のブログを作成しておく
  39. 39. 既存のテーマをカスタマイズする ‣ 追加したブログは、右上のリストにどんどん追加されていく
  40. 40. 既存のテーマをカスタマイズする ‣ テーマの効果を試すため、あらかじめいくつか投稿する ‣ 画像、動画、テキスト、リンクなど様々な種類で
  41. 41. 既存のテーマをカスタマイズする ‣ まずは、テーマを選択する ‣ Dashboardでカスタマイズするブログを選び、Customize themeを選択
  42. 42. 既存のテーマをカスタマイズする ‣ テーマは、Theme Gardenからカテゴリーごとにブラウズして いくことも可能 (http://www.tumblr.com/themes/)
  43. 43. 既存のテーマをカスタマイズする ‣ 今回は、Effector Theme というテーマを題材にしてカスタマ イズしてみます ‣ 下記のリンクからインストール ‣ http://www.tumblr.com/theme/17403
  44. 44. 既存のテーマをカスタマイズする ‣ シンプルな2カラムのデザインのブログへ
  45. 45. 既存のテーマをカスタマイズする ‣ まずは、基本機能をカスタマイズしてみる ‣ テキストの色、フォント ‣ 背景、バナー、サイドバーなどの画像 ‣ ロゴ ‣ 余白 ‣ 外部サービス(Facebookなど)
  46. 46. 既存のテーマをカスタマイズする ‣ 自分なりに、様々なカスタマイズをしてみる
  47. 47. 既存のテーマをカスタマイズする ‣ 外部Webサービスへのリンク ‣ カスタマイズ画面の末尾近くには、外部へ のWebサービスの連携機能 ‣ 自分が登録しているサービスがあれば、ど んどんリンクを貼ってみる
  48. 48. 既存のテーマをカスタマイズする ‣ 連携した外部サービスへのリンクは、サイドバーに表示される
  49. 49. コメント機能を追加
  50. 50. コメント機能を追加 ‣ Effector Themeは、Disqusというサービスを利用してコメント 欄を追加できるようになっている ‣ Disqus: ‣ Webサイトやブログにコメント機能を提供するサービス ‣ Wired magazine、Engadget、CNN、Fox News Channel、デ イリー・テレグラフ などの大手サイトで採用されている
  51. 51. コメント機能を追加 ‣ Disqusのアカウントを作成 ‣ Disqusのサイトにアクセスして、Sign Up ボタンを押す ‣ http://disqus.com/
  52. 52. コメント機能を追加 ‣ Site URLには、TumblrのURLを記入 ‣ あわせて、Disqusのユーザの登録も(下の欄)
  53. 53. コメント機能を追加 ‣ Disqusにログインした状態 - 管理画面
  54. 54. コメント機能を追加 ‣ 生成された、site shortnameとusernameを先程のTumblrの テーマカスタマイズの画面に記入する
  55. 55. コメント機能を追加 ‣ すると、投稿ごとにコメント欄が生成されている!!
  56. 56. さらに高度なカスタマイズへ HTMLを編集
  57. 57. さらに高度なカスタマイズへ - HTMLを編集 ‣ テーマを選択して設定をいじるだけでは物足りないという方へ ‣ よりきめ細かなカスタマイズも可能 ‣ HTML、CSSをスクラッチから作成
  58. 58. さらに高度なカスタマイズへ - HTMLを編集 ‣ テーマのカスタマイズ画面の Edit HTML ボタンを押す
  59. 59. さらに高度なカスタマイズへ - HTMLを編集 ‣ HTMLのソースが表示される
  60. 60. さらに高度なカスタマイズへ - HTMLを編集 ‣ ここで、HTMLを完全にオリジナルに自作可能 ‣ さらにCSSも添付されているので、これを変更することも ‣ HTMLのソース内で、{....} という記号で囲まれている部分 ‣ Tumblrのオリジナルの機能を使用している ‣ 詳細な機能はTumblrのページのドキュメントを参照 ‣ http://www.tumblr.com/docs/ja/custom_themes+
  61. 61. TumblrのカスタムHTMLテーマの作成
  62. 62. TumblrのカスタムHTMLテーマの作成 ‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能 ‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料 ‣ http://www.tumblr.com/docs/ja/custom_themes+
  63. 63. TumblrのカスタムHTMLテーマの作成 ‣ カスタマイズの画面を表示するには? ‣ Dashboardで、カスタマイズするブログを選択し、Customize Themeボタンを押す
  64. 64. TumblrのカスタムHTMLテーマの作成 ‣ 表示されるカスタマイズ画面の左コラムのサムネイル直下にあ る、Edit HTMLボタンを押す
  65. 65. TumblrのカスタムHTMLテーマの作成 ‣ ここに表示されるHTML(と内包されるCSS)を編集していく
  66. 66. ThumblrのカスタムHTMLテーマの作成 ‣ カスタムHTMLの確認用に、全ての種類の投稿をテスト用ブロ グにしておく ‣ Text, Photo, Quote, Link, Chat, Audio, Video
  67. 67. VariableとBlock
  68. 68. Variable(変数)とBlock(ブロック) ‣ カスタムHTML作成で重要となるTumblr専用の2つの演算子 ‣ HTMLの中に埋め込んで使用する ‣ Variable (変数) ‣ タイトルや記述など、特定のデータを挿入する ‣ Block  ‣ データの集まりを挿入する ‣ インデックスページ、個別の記事、ナビゲーションなど {《Variable名》} {block:《Block名》} ... {/block:《Block名》}
  69. 69. <h1>{Title}</h1> <h2>{PostTitle}</h2> <p>{Description}</p> VariableとBlock ‣ Variableの記述例
  70. 70. {block:Posts} {block:Photo} <li class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photo} {/block:Posts} VariableとBlock ‣ Blockの記述例
  71. 71. Tumblrテンプレートの構造
  72. 72. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text}
  73. 73. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示
  74. 74. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示
  75. 75. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示
  76. 76. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト
  77. 77. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真
  78. 78. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用
  79. 79. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用 ビデオ
  80. 80. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用 ビデオ 音
  81. 81. Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 ページ送り機能 テキスト 写真 引用 ビデオ 音
  82. 82. ミニマムなHTMLの作成 ‣ まず、カスタムHTMLの実験としてミニマムなHTMLを作成し てみます ‣ ミニマムなHTMLから徐々に本格的なテーマへと発展させてい きたい ‣ まずは、Tumblrのタイトルと説明を表示してみましょう!
  83. 83. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> </body> </html> ミニマムなHTMLの作成 ‣ Tumblrのタイトルと説明を表示
  84. 84. ミニマムなHTMLの作成 ‣ タイトルと説明が表示される!
  85. 85. ミニマムなHTMLの作成 ‣ 次に投稿を表示しましょう ‣ 投稿画面は、Postsブロックの中に、種類に応じてポストのブ ロックを配置していく ‣ まずは、Photo(写真)の投稿で実験
  86. 86. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts} {block:Photo} <div class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> </div> {/block:Photo} {/block:Posts} </div> </body> </html> ミニマムなHTMLの作成 ‣ Photo(写真)の投稿を表示
  87. 87. ミニマムなHTMLの作成 ‣ 写真の投稿が表示された!!
  88. 88. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts} {block:Photo} <div class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </div> {/block:Photo} {/block:Posts} </div> </body> </html> ミニマムなHTMLの作成 ‣ さらに写真のキャプションも表示してみる
  89. 89. ミニマムなHTMLの作成 ‣ 写真のキャプションも表示
  90. 90. ミニマムなHTMLの作成 ‣ この要領で全ての投稿のタイプを網羅していく ‣ Text ‣ Photo ‣ Quote ‣ Link ‣ Chat ‣ Video ‣ Audio ‣ ちょっと長いので、下記のURLからダウンロード ‣http://goo.gl/oe0jG
  91. 91. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts} {block:Text} <li class="post text"> {block:Title} <h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} {Body} </li> {/block:Text} {block:Photo} <li class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> ミニマムなHTMLの作成 ‣ 全ての投稿タイプを網羅したHTML
  92. 92. {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photo} {block:Photoset} <li class="post photoset"> {Photoset-500} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photoset} {block:Quote} <li class="post quote"> "{Quote}" {block:Source} <div class="source">{Source}</div> {/block:Source} </li> {/block:Quote} ミニマムなHTMLの作成 ‣ 全ての投稿タイプを網羅したHTML
  93. 93. {block:Link} <li class="post link"> <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} <div class="description">{Description}</div> {/block:Description} </li> {/block:Link} {block:Chat} <li class="post chat"> {block:Title} <h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> ミニマムなHTMLの作成 ‣ 全ての投稿タイプを網羅したHTML
  94. 94. {/block:Lines} </ul> </li> {/block:Chat} {block:Video} <li class="post video"> {Video-500} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Video} {block:Audio} <li class="post audio"> {AudioPlayerBlack} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Audio} {/block:Posts} ミニマムなHTMLの作成 ‣ 全ての投稿タイプを網羅したHTML
  95. 95. </div> </body> </html> ミニマムなHTMLの作成 ‣ さらに写真のキャプションも表示してみる
  96. 96. ミニマムなHTMLの作成 ‣ 実際にページを開いてみて、投稿した全てタイプが表示されて いることを確認
  97. 97. CSSを追加
  98. 98. CSSを追加 ‣ CSSは、HTMLファイルのhead要素内に直接追加する ‣ style要素で囲んで、その中にCSSを記述する ‣ 簡単なサンプルで解説します
  99. 99. html { background-color:#eeeeee; } body { background-color:#ffffff; width:720px; margin:0 auto; padding:2em 4em; border-top:6px solid #3399cc; color:#444444; font-family:sans-serif; } .post { padding:1em; border-bottom:1px dotted #cccccc; } a { color:#666666; text-decoration:underline; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#3399cc; text-decoration:none; } CSSを追加 ‣ head要素内にCSSを追加したスタイルの例
  100. 100. CSSを追加 ‣ ページにデザインが付加された!!

×