メディア芸術基礎 II
TumblrでWebサイトを作成
2013年9月30日、10月7日
多摩美術大学情報デザイン学科メディア芸術コース
担当:田所淳
今日の内容
‣ Tumblrのサービスを使用してWebサイトの公開に挑戦!
‣ http://www.tumblr.com
Tumblrとは?
‣ (ミニ)ブログと、ソーシャルブックマークを統合
‣ 2007年3月1日にサービス開始
‣ CEO、David Karp (27歳!)
Tumblrとは?
‣ 利用状況 (2013年9月現在)
‣ 138,900,000 のブログ
‣ 62,400,000,000 の投稿
‣ 参考:http://www.tumblr.com/about
Tumblrにアカウントを作成する
Tumblrにアカウントを作成する
‣ まずは、アカウントを作成
‣ 既にアカウントを取得している方は、既存アカウントを活用
Tumblrにアカウントを作成する
‣ Step 1:
‣ Tumblrのサイトにアクセス http://www.tumblr.com
‣ 右上にある「Sign up」ボタンをクリック
Tumblrにアカウントを作成する
‣ 登録は、emailとpasswordとusername を入力するだけ!
Tumblrにアカウントを作成する
‣ 年齢確認に正直に答えましょう
Tumblrにアカウントを作成する
‣ 表示される、判読しずらい文字を入力
‣ コンピュータによる大量のアカウント取得を防止している
Tumblrにアカウントを作成する
‣ 登録したemail宛てに確認のメールが届くので認証
Tumblrにアカウントを作成する
‣ Step 2:
‣ ユーザー登録
‣ まず登録するのは以下の3項目のみ
‣ emailアドレス
‣ パスワード
‣ ユーザ名
‣ 年齢を入力、利用規約を読んだことにして「次へ」
Tumblrにアカウントを作成する
‣ 登録が完了すると、登録したemailアドレスに確認のメールが
送られてくるはず
‣ 「メールアドレスを認証する」を選択しアカウントを確定
Tumblrにアカウントを作成する
‣ ログイン完了、スタートアップ画面が表示される
Tumblrにアカウントを作成する
‣ 画面の指示に従って、諸々設定
‣ 1. 自分のポートレートを投稿
‣ 2. 自分のブログ用のテーマとタイトルを選択
‣ 4. アバターを変更する
‣ 順番にこなしていきましょう!
Tumblrにアカウントを作成する
‣ タイトルやブログの説明は、テーマのカスタマイズ画面で
‣ テーマ選択もここから
Tumblrにアカウントを作成する
‣ 設定画面で、サムネイル画像や、URLを設定する
Tumblrを使ってみる
Tumblrを使ってみる
‣ Tumblrでは、様々な種類のメディアを投稿できる
‣ テキスト、画像、引用、リンク、チャット、音声、動画
Tumblrを使ってみる
‣ 投稿するメディアを選択し、実際に投稿してみる
Tumblrを使ってみる
‣ 「保存・公開」すると、ダッシュボードに追加される
Tumblrを使ってみる
‣ ダッシュボード右上「(ブログ名) を開く」ボタンを押してみる
Tumblrを使ってみる
‣ 設定したテーマで投稿が表示される
‣ → このページが公開されたブログに相当する
Tumblrを使ってみる
‣ ブックマークレットを設定すると、投稿が楽になる
‣ http://www.tumblr.com/goodies  
‣ このページにある「Tumblrで共有」のリンクをドラッグし
て、ブックマークバーに追加する
Tumblrを使ってみる
‣ 投稿したい情報のあるサイトへ移動して、登録したブックマー
クレットを押す
‣ 別ウィンドウで投稿画面が表示される
Tumblrを使ってみる
‣ 実習:
‣ 作成したTumblrに、様々なメディアを投稿してみる
‣ ある程度投稿が溜まったら、テーマを選択して好みのデザイン
にしてみる
‣ 余裕があれば、テーマをカスタマイズ
‣ 作成したブログのURLを下記に...
参考:Tumblrの有名サイト
参考:Tumblrの有名サイト
‣ Barack Obama (http://barackobama.tumblr.com/)
参考:Tumblrの有名サイト
‣ Lady Gaga (http://amenfashion.tumblr.com/)
参考:Tumblrの有名サイト
‣ VOGUE (http://vogue.tumblr.com/)
参考:Tumblrの有名サイト
‣ GQ Magazine (http://gq.tumblr.com/)
参考:Tumblrの有名サイト
‣ GICCI (http://gucci.tumblr.com/)
参考:Tumblrの有名サイト
‣ STUDIO VOICE (http://studiovoice.tumblr.com/)
参考:Tumblrの有名サイト
‣ ART iT Japan (http://art-it.tumblr.com/)
参考:Tumblrの有名サイト
‣ 水野美紀 (http://mikimizuno.com/)
‣
既存のテーマをカスタマイズする
既存のテーマをカスタマイズする
‣ まず今回は、比較的簡単な方法で
‣ 既存のテーマベースにをカスタマイズしていく
既存のテーマをカスタマイズする
‣ もし自分のメインのTumblrブログがあって、そちらの設定は
変えたくない場合は、別のブログを作成しておく
既存のテーマをカスタマイズする
‣ 追加したブログは、右上のリストにどんどん追加されていく
既存のテーマをカスタマイズする
‣ テーマの効果を試すため、あらかじめいくつか投稿する
‣ 画像、動画、テキスト、リンクなど様々な種類で
既存のテーマをカスタマイズする
‣ まずは、テーマを選択する
‣ Dashboardでカスタマイズするブログを選び、Customize
themeを選択
既存のテーマをカスタマイズする
‣ テーマは、Theme Gardenからカテゴリーごとにブラウズして
いくことも可能 (http://www.tumblr.com/themes/)
既存のテーマをカスタマイズする
‣ 今回は、Effector Theme というテーマを題材にしてカスタマ
イズしてみます
‣ 下記のリンクからインストール
‣ http://www.tumblr.com/theme/17403
既存のテーマをカスタマイズする
‣ シンプルな2カラムのデザインのブログへ
既存のテーマをカスタマイズする
‣ まずは、基本機能をカスタマイズしてみる
‣ テキストの色、フォント
‣ 背景、バナー、サイドバーなどの画像
‣ ロゴ
‣ 余白
‣ 外部サービス(Facebookなど)
既存のテーマをカスタマイズする
‣ 自分なりに、様々なカスタマイズをしてみる
既存のテーマをカスタマイズする
‣ 外部Webサービスへのリンク
‣ カスタマイズ画面の末尾近くには、外部へ
のWebサービスの連携機能
‣ 自分が登録しているサービスがあれば、ど
んどんリンクを貼ってみる
既存のテーマをカスタマイズする
‣ 連携した外部サービスへのリンクは、サイドバーに表示される
コメント機能を追加
コメント機能を追加
‣ Effector Themeは、Disqusというサービスを利用してコメント
欄を追加できるようになっている
‣ Disqus:
‣ Webサイトやブログにコメント機能を提供するサービス
‣ Wired magazine、...
コメント機能を追加
‣ Disqusのアカウントを作成
‣ Disqusのサイトにアクセスして、Sign Up ボタンを押す
‣ http://disqus.com/
コメント機能を追加
‣ Site URLには、TumblrのURLを記入
‣ あわせて、Disqusのユーザの登録も(下の欄)
コメント機能を追加
‣ Disqusにログインした状態 - 管理画面
コメント機能を追加
‣ 生成された、site shortnameとusernameを先程のTumblrの
テーマカスタマイズの画面に記入する
コメント機能を追加
‣ すると、投稿ごとにコメント欄が生成されている!!
さらに高度なカスタマイズへ
HTMLを編集
さらに高度なカスタマイズへ - HTMLを編集
‣ テーマを選択して設定をいじるだけでは物足りないという方へ
‣ よりきめ細かなカスタマイズも可能
‣ HTML、CSSをスクラッチから作成
さらに高度なカスタマイズへ - HTMLを編集
‣ テーマのカスタマイズ画面の Edit HTML ボタンを押す
さらに高度なカスタマイズへ - HTMLを編集
‣ HTMLのソースが表示される
さらに高度なカスタマイズへ - HTMLを編集
‣ ここで、HTMLを完全にオリジナルに自作可能
‣ さらにCSSも添付されているので、これを変更することも
‣ HTMLのソース内で、{....} という記号で囲まれている部分
‣ Tumblr...
TumblrのカスタムHTMLテーマの作成
TumblrのカスタムHTMLテーマの作成
‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能
‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料
‣ http://www.tumblr.com/docs/ja/cust...
TumblrのカスタムHTMLテーマの作成
‣ カスタマイズの画面を表示するには?
‣ Dashboardで、カスタマイズするブログを選択し、Customize
Themeボタンを押す
TumblrのカスタムHTMLテーマの作成
‣ 表示されるカスタマイズ画面の左コラムのサムネイル直下にあ
る、Edit HTMLボタンを押す
TumblrのカスタムHTMLテーマの作成
‣ ここに表示されるHTML(と内包されるCSS)を編集していく
ThumblrのカスタムHTMLテーマの作成
‣ カスタムHTMLの確認用に、全ての種類の投稿をテスト用ブロ
グにしておく
‣ Text, Photo, Quote, Link, Chat, Audio, Video
VariableとBlock
Variable(変数)とBlock(ブロック)
‣ カスタムHTML作成で重要となるTumblr専用の2つの演算子
‣ HTMLの中に埋め込んで使用する
‣ Variable (変数)
‣ タイトルや記述など、特定のデータを挿入する
‣ Bl...
<h1>{Title}</h1>
<h2>{PostTitle}</h2>
<p>{Description}</p>
VariableとBlock
‣ Variableの記述例
{block:Posts}
{block:Photo}
<li class="post photo">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
<div clas...
Tumblrテンプレートの構造
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
Tumblrテンプレートの構造
html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{bl...
ミニマムなHTMLの作成
‣ まず、カスタムHTMLの実験としてミニマムなHTMLを作成し
てみます
‣ ミニマムなHTMLから徐々に本格的なテーマへと発展させてい
きたい
‣ まずは、Tumblrのタイトルと説明を表示してみましょう!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>{Title}</title>
</head>
<body>
<h1>{Title}</h1>
<p>{Descript...
ミニマムなHTMLの作成
‣ タイトルと説明が表示される!
ミニマムなHTMLの作成
‣ 次に投稿を表示しましょう
‣ 投稿画面は、Postsブロックの中に、種類に応じてポストのブ
ロックを配置していく
‣ まずは、Photo(写真)の投稿で実験
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>{Title}</title>
</head>
<body>
<h1>{Title}</h1>
<p>{Descript...
ミニマムなHTMLの作成
‣ 写真の投稿が表示された!!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>{Title}</title>
</head>
<body>
<h1>{Title}</h1>
<p>{Descript...
ミニマムなHTMLの作成
‣ 写真のキャプションも表示
ミニマムなHTMLの作成
‣ この要領で全ての投稿のタイプを網羅していく
‣ Text
‣ Photo
‣ Quote
‣ Link
‣ Chat
‣ Video
‣ Audio
‣ ちょっと長いので、下記のURLからダウンロード
‣http:...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>{Title}</title>
</head>
<body>
<h1>{Title}</h1>
<p>{Descript...
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Photoset}
<li class="pos...
{block:Link}
<li class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="descr...
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class="post video">
{Video-500}
{block:Caption}
<div class="cap...
</div>
</body>
</html>
ミニマムなHTMLの作成
‣ さらに写真のキャプションも表示してみる
ミニマムなHTMLの作成
‣ 実際にページを開いてみて、投稿した全てタイプが表示されて
いることを確認
CSSを追加
CSSを追加
‣ CSSは、HTMLファイルのhead要素内に直接追加する
‣ style要素で囲んで、その中にCSSを記述する
‣ 簡単なサンプルで解説します
html {
background-color:#eeeeee;
}
body {
background-color:#ffffff;
width:720px;
margin:0 auto;
padding:2em 4em;
border-to...
CSSを追加
‣ ページにデザインが付加された!!
Upcoming SlideShare
Loading in...5
×

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

3,978

Published on

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

No Downloads
Views
Total Views
3,978
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
22
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を追加 ‣ ページにデザインが付加された!!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×