Your SlideShare is downloading. ×
メディア芸術基礎 II TumblrでWebサイトを作成
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,590
views

Published on

Published in: Education

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,590
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
22
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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