More Related Content
More from Atsushi Tadokoro (20)
芸術情報演習(Web) Tumblrを使う3 カスタムHTMLテーマの作成
- 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(写真)の投稿を表示
- 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の作成
‣ さらに写真のキャプションも表示してみる
- 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
- 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
- 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を追加したスタイルの例