芸術情報演習(web) tumblrを使う３ カスタムhtmlテーマの作成
TRANSCRIPT
芸術情報演習(Web) Tumblrを使う３カスタムHTMLテーマの作成2013年6月27日東京藝術大学 芸術情報センター(AMC)担当：田所淳
今日の内容‣ TumblrのカスタムHTMLテーマの作成‣ つまり、Tumblrのテーマをまっさらな状態から作ってみる!‣ 目指せテーマ販売 (?)
TumblrのカスタムHTMLテーマの作成
TumblrのカスタムHTMLテーマの作成‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料‣ http://www.tumblr.com/docs/en/custom_themes
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 ‣ データの集まりを挿入する‣ インデックスページ、個別の記事、ナビゲーションなど
{《Variable名》}
{block:《Block名》} ... {/block:《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="caption">{Caption}</div> {/block:Caption} </li> {/block:Photo}{/block:Posts}
VariableとBlock‣ Blockの記述例
Tumblrテンプレートの構造
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示検索結果を表示
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示検索結果を表示
様々なタイプの投稿を表示
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示検索結果を表示
様々なタイプの投稿を表示テキスト
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示検索結果を表示
様々なタイプの投稿を表示テキスト
写真
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示検索結果を表示
様々なタイプの投稿を表示テキスト
写真
引用
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示検索結果を表示
様々なタイプの投稿を表示テキスト
写真
引用
ビデオ
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示検索結果を表示
様々なタイプの投稿を表示テキスト
写真
引用
ビデオ
音
Tumblrテンプレートの構造htmlhead
body{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示検索結果を表示
様々なタイプの投稿を表示
ページ送り機能
テキスト
写真
引用
ビデオ
音
ミニマムなHTMLの作成‣ まず、カスタムHTMLの実験としてミニマムなHTMLを作成してみます
‣ ミニマムなHTMLから徐々に本格的なテーマへと発展させていきたい
‣ まずは、Tumblrのタイトルと説明を表示してみましょう!
<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> </body></html>
ミニマムなHTMLの作成‣ Tumblrのタイトルと説明を表示
ミニマムなHTMLの作成‣ タイトルと説明が表示される!
ミニマムなHTMLの作成‣ 次に投稿を表示しましょう‣ 投稿画面は、Postsブロックの中に、種類に応じてポストのブロックを配置していく
‣ まずは、Photo(写真)の投稿で実験
<!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(写真)の投稿を表示
ミニマムなHTMLの作成‣ 写真の投稿が表示された!!
<!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の作成‣ さらに写真のキャプションも表示してみる
ミニマムなHTMLの作成‣ 写真のキャプションも表示
ミニマムなHTMLの作成‣ この要領で全ての投稿のタイプを網羅していく‣ Text‣ Photo‣ Quote‣ Link‣ Chat‣ Video‣ Audio
‣ ちょっと長いので、下記のURLからダウンロード
‣http://goo.gl/oe0jG
<!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
{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
{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
{/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
</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 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を追加したスタイルの例
CSSを追加‣ ページにデザインが付加された!!
CSSを追加‣ この方法で、これまで学んできたHTMLとCSSの知識を駆使して、Tumblrをカスタマイズしていく
‣ 次週さらに細かなテクニックについて探求していきます!!