Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Mehr von Atsushi Tadokoro
Mehr von Atsushi Tadokoro (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
メディア芸術基礎 II TumblrでWebサイトを作成
- 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
- 7. Tumblrにアカウントを作成する ‣ Step 1： ‣ Tumblrのサイトにアクセス http://www.tumblr.com ‣ 右上にある「Sign up」ボタンをクリック
- 12. Tumblrにアカウントを作成する ‣ Step 2： ‣ ユーザー登録 ‣ まず登録するのは以下の３項目のみ ‣ emailアドレス ‣ パスワード ‣ ユーザ名 ‣ 年齢を入力、利用規約を読んだことにして「次へ」
- 15. Tumblrにアカウントを作成する ‣ 画面の指示に従って、諸々設定 ‣ 1. 自分のポートレートを投稿 ‣ 2. 自分のブログ用のテーマとタイトルを選択 ‣ 4. アバターを変更する ‣ 順番にこなしていきましょう!
- 18. Tumblrを使ってみる
- 23. Tumblrを使ってみる ‣ 設定したテーマで投稿が表示される ‣ → このページが公開されたブログに相当する
- 24. Tumblrを使ってみる ‣ ブックマークレットを設定すると、投稿が楽になる ‣ http://www.tumblr.com/goodies ‣ このページにある「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/)
- 31. 参考：Tumblrの有名サイト ‣ GQ Magazine (http://gq.tumblr.com/)
- 33. 参考：Tumblrの有名サイト ‣ STUDIO VOICE (http://studiovoice.tumblr.com/)
- 34. 参考：Tumblrの有名サイト ‣ ART iT Japan (http://art-it.tumblr.com/)
- 36. 既存のテーマをカスタマイズする
- 42. 既存のテーマをカスタマイズする ‣ テーマは、Theme Gardenからカテゴリーごとにブラウズして いくことも可能 (http://www.tumblr.com/themes/)
- 43. 既存のテーマをカスタマイズする ‣ 今回は、Effector Theme というテーマを題材にしてカスタマ イズしてみます ‣ 下記のリンクからインストール ‣ http://www.tumblr.com/theme/17403
- 45. 既存のテーマをカスタマイズする ‣ まずは、基本機能をカスタマイズしてみる ‣ テキストの色、フォント ‣ 背景、バナー、サイドバーなどの画像 ‣ ロゴ ‣ 余白 ‣ 外部サービス(Facebookなど)
- 47. 既存のテーマをカスタマイズする ‣ 外部Webサービスへのリンク ‣ カスタマイズ画面の末尾近くには、外部へ のWebサービスの連携機能 ‣ 自分が登録しているサービスがあれば、ど んどんリンクを貼ってみる
- 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にログインした状態 - 管理画面
- 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+
- 62. TumblrのカスタムHTMLテーマの作成 ‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能 ‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料 ‣ http://www.tumblr.com/docs/ja/custom_themes+
- 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名》}
- 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テンプレートの構造
- 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のタイトルと説明を表示
- 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(写真)の投稿を表示
- 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の作成 ‣ さらに写真のキャプションも表示してみる
- 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
- 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を追加したスタイルの例