Enviar pesquisa
Carregar
芸術情報演習(Web) Tumblrを使う3 カスタムHTMLテーマの作成
•
6 gostaram
•
5,700 visualizações
Atsushi Tadokoro
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 43
Baixar agora
Baixar para ler offline
Recomendados
芸術情報演習デザイン(Web) Tumblrを使う2 テーマをカスタマイズする
芸術情報演習デザイン(Web) Tumblrを使う2 テーマをカスタマイズする
Atsushi Tadokoro
2
2
Shiho Sue
14
14
Shiho Sue
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
parkn-park
Html+css講座プレゼンテーション
Html+css講座プレゼンテーション
takahasi
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
Atsushi Tadokoro
情報編集(Web) 第6回:CSS入門 - 2 ボックスモデルを理解する
情報編集(Web) 第6回:CSS入門 - 2 ボックスモデルを理解する
Atsushi Tadokoro
Recomendados
芸術情報演習デザイン(Web) Tumblrを使う2 テーマをカスタマイズする
芸術情報演習デザイン(Web) Tumblrを使う2 テーマをカスタマイズする
Atsushi Tadokoro
2
2
Shiho Sue
14
14
Shiho Sue
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
parkn-park
Html+css講座プレゼンテーション
Html+css講座プレゼンテーション
takahasi
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
Atsushi Tadokoro
情報編集(Web) 第6回:CSS入門 - 2 ボックスモデルを理解する
情報編集(Web) 第6回:CSS入門 - 2 ボックスモデルを理解する
Atsushi Tadokoro
Interactive Music II SuperCollider入門 2 - 関数とUGen
Interactive Music II SuperCollider入門 2 - 関数とUGen
Atsushi Tadokoro
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
Atsushi Tadokoro
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
Atsushi Tadokoro
情報編集(Web) 130409
情報編集(Web) 130409
Atsushi Tadokoro
情報編集(Web) 第7回:CSSレイアウト
情報編集(Web) 第7回:CSSレイアウト
Atsushi Tadokoro
CSS - ボックスモデルを理解する - 千葉商科大学 Web表現
CSS - ボックスモデルを理解する - 千葉商科大学 Web表現
Atsushi Tadokoro
芸術情報演習デザイン(Web) 最終課題制作相談会
芸術情報演習デザイン(Web) 最終課題制作相談会
Atsushi Tadokoro
芸術情報演習デザイン(Web) Tumblrを使う 4 静的ページの作成、サイトの設計
芸術情報演習デザイン(Web) Tumblrを使う 4 静的ページの作成、サイトの設計
Atsushi Tadokoro
jQueryプラグイン フォトギャラリーを作成する - 芸大Webデザイン演習B
jQueryプラグイン フォトギャラリーを作成する - 芸大Webデザイン演習B
Atsushi Tadokoro
iTamabi13 第1回: イントロダクション・開発環境の準備
iTamabi13 第1回: イントロダクション・開発環境の準備
Atsushi Tadokoro
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
Atsushi Tadokoro
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Atsushi Tadokoro
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
Atsushi Tadokoro
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
Atsushi Tadokoro
Tamabi media130624
Tamabi media130624
Atsushi Tadokoro
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
Atsushi Tadokoro
openFrameworks iOS 入門
openFrameworks iOS 入門
Atsushi Tadokoro
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
Atsushi Tadokoro
coma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworks
Atsushi Tadokoro
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
Mais conteúdo relacionado
Destaque
Interactive Music II SuperCollider入門 2 - 関数とUGen
Interactive Music II SuperCollider入門 2 - 関数とUGen
Atsushi Tadokoro
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
Atsushi Tadokoro
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
Atsushi Tadokoro
情報編集(Web) 130409
情報編集(Web) 130409
Atsushi Tadokoro
情報編集(Web) 第7回:CSSレイアウト
情報編集(Web) 第7回:CSSレイアウト
Atsushi Tadokoro
CSS - ボックスモデルを理解する - 千葉商科大学 Web表現
CSS - ボックスモデルを理解する - 千葉商科大学 Web表現
Atsushi Tadokoro
芸術情報演習デザイン(Web) 最終課題制作相談会
芸術情報演習デザイン(Web) 最終課題制作相談会
Atsushi Tadokoro
芸術情報演習デザイン(Web) Tumblrを使う 4 静的ページの作成、サイトの設計
芸術情報演習デザイン(Web) Tumblrを使う 4 静的ページの作成、サイトの設計
Atsushi Tadokoro
jQueryプラグイン フォトギャラリーを作成する - 芸大Webデザイン演習B
jQueryプラグイン フォトギャラリーを作成する - 芸大Webデザイン演習B
Atsushi Tadokoro
iTamabi13 第1回: イントロダクション・開発環境の準備
iTamabi13 第1回: イントロダクション・開発環境の準備
Atsushi Tadokoro
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
Atsushi Tadokoro
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Atsushi Tadokoro
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
Atsushi Tadokoro
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
Atsushi Tadokoro
Tamabi media130624
Tamabi media130624
Atsushi Tadokoro
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
Atsushi Tadokoro
openFrameworks iOS 入門
openFrameworks iOS 入門
Atsushi Tadokoro
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
Atsushi Tadokoro
coma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworks
Atsushi Tadokoro
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
Destaque
(20)
Interactive Music II SuperCollider入門 2 - 関数とUGen
Interactive Music II SuperCollider入門 2 - 関数とUGen
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
情報編集(Web) 130409
情報編集(Web) 130409
情報編集(Web) 第7回:CSSレイアウト
情報編集(Web) 第7回:CSSレイアウト
CSS - ボックスモデルを理解する - 千葉商科大学 Web表現
CSS - ボックスモデルを理解する - 千葉商科大学 Web表現
芸術情報演習デザイン(Web) 最終課題制作相談会
芸術情報演習デザイン(Web) 最終課題制作相談会
芸術情報演習デザイン(Web) Tumblrを使う 4 静的ページの作成、サイトの設計
芸術情報演習デザイン(Web) Tumblrを使う 4 静的ページの作成、サイトの設計
jQueryプラグイン フォトギャラリーを作成する - 芸大Webデザイン演習B
jQueryプラグイン フォトギャラリーを作成する - 芸大Webデザイン演習B
iTamabi13 第1回: イントロダクション・開発環境の準備
iTamabi13 第1回: イントロダクション・開発環境の準備
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
jQuery 2 イベントを理解する - 芸大Webデザイン演習B
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
Tamabi media130624
Tamabi media130624
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
openFrameworks iOS 入門
openFrameworks iOS 入門
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
iTamabi 13 第3回:iPhoneアプリ実践開発講座 1 画像ファイルの読み込み 画像でアニメーションを作成する
coma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworks
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Mais de Atsushi Tadokoro
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
Interactive Music II Processing基本
Interactive Music II Processing基本
Atsushi Tadokoro
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Atsushi Tadokoro
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Atsushi Tadokoro
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Atsushi Tadokoro
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
Atsushi Tadokoro
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Atsushi Tadokoro
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
Tamabi media131118
Tamabi media131118
Atsushi Tadokoro
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Atsushi Tadokoro
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Atsushi Tadokoro
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Atsushi Tadokoro
Mais de Atsushi Tadokoro
(20)
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
coma Creators session vol.2
coma Creators session vol.2
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Interactive Music II Processing基本
Interactive Music II Processing基本
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Tamabi media131118
Tamabi media131118
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
芸術情報演習(Web) Tumblrを使う3 カスタムHTMLテーマの作成
1.
芸術情報演習(Web) Tumblrを使う3 カスタムHTMLテーマの作成 2013年6月27日 東京藝術大学 芸術情報センター(AMC) 担当:田所淳
2.
今日の内容 ‣ TumblrのカスタムHTMLテーマの作成 ‣ つまり、Tumblrのテーマをまっさらな状態から作ってみる! ‣
目指せテーマ販売 (?)
3.
TumblrのカスタムHTMLテーマの作成
4.
TumblrのカスタムHTMLテーマの作成 ‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能 ‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料 ‣
http://www.tumblr.com/docs/en/custom_themes
5.
TumblrのカスタムHTMLテーマの作成 ‣ カスタマイズの画面を表示するには? ‣ Dashboardで、カスタマイズするブログを選択し、 Customize
Themeボタンを押す
6.
TumblrのカスタムHTMLテーマの作成 ‣ 表示されるカスタマイズ画面の左コラムのサムネイル直下にあ る、Edit HTMLボタンを押す
7.
TumblrのカスタムHTMLテーマの作成 ‣ ここに表示されるHTML(と内包されるCSS)を編集していく
8.
ThumblrのカスタムHTMLテーマの作成 ‣ カスタムHTMLの確認用に、全ての種類の投稿をテスト用ブロ グにしておく ‣ Text,
Photo, Quote, Link, Chat, Audio, Video
9.
VariableとBlock
10.
Variable(変数)とBlock(ブロック) ‣ カスタムHTML作成で重要となるTumblr専用の2つの演算子 ‣ HTMLの中に埋め込んで使用する ‣
Variable (変数) ‣ タイトルや記述など、特定のデータを挿入する ‣ Block ‣ データの集まりを挿入する ‣ インデックスページ、個別の記事、ナビゲーションなど {《Variable名》} {block:《Block名》} ... {/block:《Block名》}
11.
<h1>{Title}</h1> <h2>{PostTitle}</h2> <p>{Description}</p> VariableとBlock ‣ Variableの記述例
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.
Tumblrテンプレートの構造
14.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text}
15.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示
16.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示
17.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示
18.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト
19.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真
20.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用
21.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用 ビデオ
22.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用 ビデオ 音
23.
Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 ページ送り機能 テキスト 写真 引用 ビデオ 音
24.
ミニマムなHTMLの作成 ‣ まず、カスタムHTMLの実験としてミニマムなHTMLを作成し てみます ‣ ミニマムなHTMLから徐々に本格的なテーマへと発展させてい きたい ‣
まずは、Tumblrのタイトルと説明を表示してみましょう!
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.
ミニマムなHTMLの作成 ‣ タイトルと説明が表示される!
27.
ミニマムなHTMLの作成 ‣ 次に投稿を表示しましょう ‣ 投稿画面は、Postsブロックの中に、種類に応じてポストのブ ロックを配置していく ‣
まずは、Photo(写真)の投稿で実験
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.
ミニマムなHTMLの作成 ‣ 写真の投稿が表示された!!
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.
ミニマムなHTMLの作成 ‣ 写真のキャプションも表示
32.
ミニマムなHTMLの作成 ‣ この要領で全ての投稿のタイプを網羅していく ‣ Text ‣
Photo ‣ Quote ‣ Link ‣ Chat ‣ Video ‣ Audio ‣ ちょっと長いので、下記のURLからダウンロード ‣http://goo.gl/oe0jG
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.
{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.
{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.
{/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.
</div> </body> </html> ミニマムなHTMLの作成 ‣ さらに写真のキャプションも表示してみる
38.
ミニマムなHTMLの作成 ‣ 実際にページを開いてみて、投稿した全てタイプが表示されて いることを確認
39.
CSSを追加
40.
CSSを追加 ‣ CSSは、HTMLファイルのhead要素内に直接追加する ‣ style要素で囲んで、その中にCSSを記述する ‣
簡単なサンプルで解説します
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.
CSSを追加 ‣ ページにデザインが付加された!!
43.
CSSを追加 ‣ この方法で、これまで学んできたHTMLとCSSの知識を駆使 して、Tumblrをカスタマイズしていく ‣ 次週さらに細かなテクニックについて探求していきます!!
Baixar agora