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

芸術情報演習(Web)
Tumblrを使う３
カスタムHTMLテーマの作成
2013年6月27日
東京藝術大学芸術情報センター(AMC)
担当：田所淳

今日の内容
‣ TumblrのカスタムHTMLテーマの作成
‣ つまり、Tumblrのテーマをまっさらな状態から作ってみる!
‣ 目指せテーマ販売 (?)

TumblrのカスタムHTMLテーマの作成

‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能
‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料
‣ http://www.tumblr.com/docs/en/custom_themes

‣ カスタマイズの画面を表示するには?
‣ Dashboardで、カスタマイズするブログを選択し、
Customize Themeボタンを押す

‣ 表示されるカスタマイズ画面の左コラムのサムネイル直下にあ
る、Edit HTMLボタンを押す

‣ ここに表示されるHTML(と内包されるCSS)を編集していく

ThumblrのカスタムHTMLテーマの作成
‣ カスタムHTMLの確認用に、全ての種類の投稿をテスト用ブロ
グにしておく
‣ Text, Photo, Quote, Link, Chat, Audio, Video

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テンプレートの構造

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
ブログのタイトルを表示

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
検索結果を表示

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
様々なタイプの投稿を表示

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
テキスト

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
テキスト
写真

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
テキスト
写真
引用

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
テキスト
写真
引用
ビデオ

html
head
body
{Title}
{block:SearchPage}
{block:Posts}
{block:Pagination}
{block:Photo}
{block:Quote}
{block:Video}
{block:Audio}
{block:Text}
テキスト
写真
引用
ビデオ
音

html
head
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>
</body>
</html>
‣ Tumblrのタイトルと説明を表示

‣ タイトルと説明が表示される!

‣ 次に投稿を表示しましょう
‣ 投稿画面は、Postsブロックの中に、種類に応じてポストのブ
ロックを配置していく
‣ まずは、Photo(写真)の投稿で実験

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>{Title}</h1>
<div id="posts">
{block:Posts}
{block:Photo}
<div class="post photo">
</div>
{/block:Photo}
{/block:Posts}
</div>
</body>
</html>
‣ Photo(写真)の投稿を表示

‣ 写真の投稿が表示された!!

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>{Title}</h1>
<div id="posts">
{block:Posts}
{block:Photo}
<div class="post photo">
{block:Caption}
{/block:Caption}
</div>
{/block:Photo}
{/block:Posts}
</div>
</body>
</html>
‣ さらに写真のキャプションも表示してみる

‣ 写真のキャプションも表示

‣ この要領で全ての投稿のタイプを網羅していく
‣ Text
‣ Photo
‣ Quote
‣ Link
‣ Chat
‣ Video
‣ Audio
‣ ちょっと長いので、下記のURLからダウンロード
‣http://goo.gl/oe0jG

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>{Title}</h1>
<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">
‣ 全ての投稿タイプを網羅したHTML

{block:Caption}
{/block:Caption}
</li>
{/block:Photo}
{block:Photoset}
<li class="post photoset">
{Photoset-500}
{block:Caption}
{/block:Caption}
</li>
{/block:Photoset}
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}

{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>

{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class="post video">
{Video-500}
{block:Caption}
{/block:Caption}
</li>
{/block:Video}
{block:Audio}
<li class="post audio">
{AudioPlayerBlack}
{block:Caption}
{/block:Caption}
</li>
{/block:Audio}
{/block:Posts}

</div>
</body>
</html>
‣ さらに写真のキャプションも表示してみる

‣ 実際にページを開いてみて、投稿した全てタイプが表示されて
いることを確認

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をカスタマイズしていく
‣ 次週さらに細かなテクニックについて探求していきます!!

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

More from Atsushi Tadokoro

More from Atsushi Tadokoro (20)