芸術情報演習(Web)Tumblrを使う3カスタムHTMLテーマの作成2013年6月27日東京藝術大学 芸術情報センター(AMC)担当:田所淳
今日の内容‣ TumblrのカスタムHTMLテーマの作成‣ つまり、Tumblrのテーマをまっさらな状態から作ってみる!‣ 目指せテーマ販売 (?)
TumblrのカスタムHTMLテーマの作成
TumblrのカスタムHTMLテーマの作成‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料‣ http://www.tumblr.com/docs/en/custom_...
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 (変数)‣ タイトルや記述など、特定のデータを挿入する‣ Block ‣...
<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 class="ca...
Tumblrテンプレートの構造
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}...
ミニマムなHTMLの作成‣ まず、カスタムHTMLの実験としてミニマムなHTMLを作成してみます‣ ミニマムなHTMLから徐々に本格的なテーマへと発展させていきたい‣ まずは、Tumblrのタイトルと説明を表示してみましょう!
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>{Title}</title></head><body><h1>{Title}</h1><p>{Description}</p>...
ミニマムなHTMLの作成‣ タイトルと説明が表示される!
ミニマムなHTMLの作成‣ 次に投稿を表示しましょう‣ 投稿画面は、Postsブロックの中に、種類に応じてポストのブロックを配置していく‣ まずは、Photo(写真)の投稿で実験
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>{Title}</title></head><body><h1>{Title}</h1><p>{Description}</p>...
ミニマムなHTMLの作成‣ 写真の投稿が表示された!!
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>{Title}</title></head><body><h1>{Title}</h1><p>{Description}</p>...
ミニマムなHTMLの作成‣ 写真のキャプションも表示
ミニマムなHTMLの作成‣ この要領で全ての投稿のタイプを網羅していく‣ Text‣ Photo‣ Quote‣ Link‣ Chat‣ Video‣ Audio‣ ちょっと長いので、下記のURLからダウンロード‣http://goo.gl/o...
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>{Title}</title></head><body><h1>{Title}</h1><p>{Description}</p>...
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}</li>{/block:Photo}{block:Photoset}<li class="post phot...
{block:Link}<li class="post link"><a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}<div class="descripti...
{/block:Lines}</ul></li>{/block:Chat}{block:Video}<li class="post video">{Video-500}{block:Caption}<div class="caption">{C...
</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-top:6px so...
CSSを追加‣ ページにデザインが付加された!!
CSSを追加‣ この方法で、これまで学んできたHTMLとCSSの知識を駆使して、Tumblrをカスタマイズしていく‣ 次週さらに細かなテクニックについて探求していきます!!
Upcoming SlideShare
Loading in …5
×

芸術情報演習(Web) Tumblrを使う3 カスタムHTMLテーマの作成

5,160 views
5,041 views

Published on

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

No Downloads
Views
Total views
5,160
On SlideShare
0
From Embeds
0
Number of Embeds
3,132
Actions
Shares
0
Downloads
14
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

芸術情報演習(Web) Tumblrを使う3 カスタムHTMLテーマの作成

  1. 1. 芸術情報演習(Web)Tumblrを使う3カスタムHTMLテーマの作成2013年6月27日東京藝術大学 芸術情報センター(AMC)担当:田所淳
  2. 2. 今日の内容‣ TumblrのカスタムHTMLテーマの作成‣ つまり、Tumblrのテーマをまっさらな状態から作ってみる!‣ 目指せテーマ販売 (?)
  3. 3. TumblrのカスタムHTMLテーマの作成
  4. 4. TumblrのカスタムHTMLテーマの作成‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料‣ http://www.tumblr.com/docs/en/custom_themes
  5. 5. TumblrのカスタムHTMLテーマの作成‣ カスタマイズの画面を表示するには?‣ Dashboardで、カスタマイズするブログを選択し、Customize Themeボタンを押す
  6. 6. TumblrのカスタムHTMLテーマの作成‣ 表示されるカスタマイズ画面の左コラムのサムネイル直下にある、Edit HTMLボタンを押す
  7. 7. TumblrのカスタムHTMLテーマの作成‣ ここに表示されるHTML(と内包されるCSS)を編集していく
  8. 8. ThumblrのカスタムHTMLテーマの作成‣ カスタムHTMLの確認用に、全ての種類の投稿をテスト用ブログにしておく‣ Text, Photo, Quote, Link, Chat, Audio, Video
  9. 9. VariableとBlock
  10. 10. Variable(変数)とBlock(ブロック)‣ カスタムHTML作成で重要となるTumblr専用の2つの演算子‣ HTMLの中に埋め込んで使用する‣ Variable (変数)‣ タイトルや記述など、特定のデータを挿入する‣ Block ‣ データの集まりを挿入する‣ インデックスページ、個別の記事、ナビゲーションなど{《Variable名》}{block:《Block名》} ... {/block:《Block名》}
  11. 11. <h1>{Title}</h1><h2>{PostTitle}</h2><p>{Description}</p>VariableとBlock‣ Variableの記述例
  12. 12. {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の記述例
  13. 13. Tumblrテンプレートの構造
  14. 14. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}
  15. 15. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示
  16. 16. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示検索結果を表示
  17. 17. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示検索結果を表示様々なタイプの投稿を表示
  18. 18. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示検索結果を表示様々なタイプの投稿を表示テキスト
  19. 19. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示検索結果を表示様々なタイプの投稿を表示テキスト写真
  20. 20. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示検索結果を表示様々なタイプの投稿を表示テキスト写真引用
  21. 21. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示検索結果を表示様々なタイプの投稿を表示テキスト写真引用ビデオ
  22. 22. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示検索結果を表示様々なタイプの投稿を表示テキスト写真引用ビデオ音
  23. 23. Tumblrテンプレートの構造htmlheadbody{Title}{block:SearchPage}{block:Posts}{block:Pagination}{block:Photo}{block:Quote}{block:Video}{block:Audio}{block:Text}ブログのタイトルを表示検索結果を表示様々なタイプの投稿を表示ページ送り機能テキスト写真引用ビデオ音
  24. 24. ミニマムなHTMLの作成‣ まず、カスタムHTMLの実験としてミニマムなHTMLを作成してみます‣ ミニマムなHTMLから徐々に本格的なテーマへと発展させていきたい‣ まずは、Tumblrのタイトルと説明を表示してみましょう!
  25. 25. <!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>{Title}</title></head><body><h1>{Title}</h1><p>{Description}</p></body></html>ミニマムなHTMLの作成‣ Tumblrのタイトルと説明を表示
  26. 26. ミニマムなHTMLの作成‣ タイトルと説明が表示される!
  27. 27. ミニマムなHTMLの作成‣ 次に投稿を表示しましょう‣ 投稿画面は、Postsブロックの中に、種類に応じてポストのブロックを配置していく‣ まずは、Photo(写真)の投稿で実験
  28. 28. <!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(写真)の投稿を表示
  29. 29. ミニマムなHTMLの作成‣ 写真の投稿が表示された!!
  30. 30. <!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の作成‣ さらに写真のキャプションも表示してみる
  31. 31. ミニマムなHTMLの作成‣ 写真のキャプションも表示
  32. 32. ミニマムなHTMLの作成‣ この要領で全ての投稿のタイプを網羅していく‣ Text‣ Photo‣ Quote‣ Link‣ Chat‣ Video‣ Audio‣ ちょっと長いので、下記のURLからダウンロード‣http://goo.gl/oe0jG
  33. 33. <!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
  34. 34. {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
  35. 35. {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
  36. 36. {/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
  37. 37. </div></body></html>ミニマムなHTMLの作成‣ さらに写真のキャプションも表示してみる
  38. 38. ミニマムなHTMLの作成‣ 実際にページを開いてみて、投稿した全てタイプが表示されていることを確認
  39. 39. CSSを追加
  40. 40. CSSを追加‣ CSSは、HTMLファイルのhead要素内に直接追加する‣ style要素で囲んで、その中にCSSを記述する‣ 簡単なサンプルで解説します
  41. 41. 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を追加したスタイルの例
  42. 42. CSSを追加‣ ページにデザインが付加された!!
  43. 43. CSSを追加‣ この方法で、これまで学んできたHTMLとCSSの知識を駆使して、Tumblrをカスタマイズしていく‣ 次週さらに細かなテクニックについて探求していきます!!

×