View
3.678
Download
2
Category
Preview:
DESCRIPTION
Citation preview
メディア芸術基礎 IITumblrで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：‣ ユーザー登録
‣ まず登録するのは以下の３項目のみ‣ 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を下記にメールしてください‣ tadokoro+geidai@gmail.com
参考：Tumblrの有名サイト
参考：Tumblrの有名サイト‣ Barack Obama (http://barackobama.tumblr.com/)
参考：Tumblrの有名サイト‣ Lady Gaga (http://amenfashion.tumblr.com/)
参考：Tumblrの有名サイト‣ STUDIO VOICE (http://studiovoice.tumblr.com/)
参考：Tumblrの有名サイト‣ ART iT Japan (http://art-it.tumblr.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、Engadget、CNN、Fox News Channel、デイリー・テレグラフ などの大手サイトで採用されている
コメント機能を追加‣ 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のページのドキュメントを参照‣ http://www.tumblr.com/docs/ja/custom_themes+
TumblrのカスタムHTMLテーマの作成
TumblrのカスタムHTMLテーマの作成‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料‣ http://www.tumblr.com/docs/ja/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を追加‣ ページにデザインが付加された!!
Recommended