28
芸術情報演習デザイン(Web) Tumblrを使う2 テーマをカスタマイズする 2013年6月20日 東京藝術大学 芸術情報センター(AMC) 担当:田所淳

芸術情報演習デザイン(Web) Tumblrを使う2 テーマをカスタマイズする

Embed Size (px)

Citation preview

Page 1: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

芸術情報演習デザイン(Web) Tumblrを使う2テーマをカスタマイズする2013年6月20日東京藝術大学 芸術情報センター(AMC)担当:田所淳

Page 2: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

今日の内容‣ Tumblrをカスタマイズして、自分のオリジナルのテーマに

‣ 2通りのアプローチ1.既存のテーマをカスタマイズしていく2.一から、自分のテーマを作成していく (上級者編)

Page 3: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする

Page 4: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ まず今回は、比較的簡単な方法で‣ 既存のテーマベースにをカスタマイズしていく

Page 5: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ もし自分のメインのTumblrブログがあって、そちらの設定は変えたくない場合は、別のブログを作成しておく

Page 6: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ 追加したブログは、右上のリストにどんどん追加されていく

Page 7: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ テーマの効果を試すため、あらかじめいくつか投稿する‣ 画像、動画、テキスト、リンクなど様々な種類で

Page 8: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ まずは、テーマを選択する‣ Dashboardでカスタマイズするブログを選び、Customize themeを選択

Page 9: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ テーマは、Theme Gardenからカテゴリーごとにブラウズしていくことも可能 (http://www.tumblr.com/themes/)

Page 10: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ 今回は、Effector Theme というテーマを題材にしてカスタマイズしてみます

‣ 下記のリンクからインストール‣ http://www.tumblr.com/theme/17403

Page 11: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ シンプルな2カラムのデザインのブログへ

Page 12: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ まずは、基本機能をカスタマイズしてみる

‣ テキストの色、フォント‣ 背景、バナー、サイドバーなどの画像‣ ロゴ‣ 余白‣ 外部サービス(Facebookなど)

Page 13: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ 自分なりに、様々なカスタマイズをしてみる

Page 14: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ 外部Webサービスへのリンク‣ カスタマイズ画面の末尾近くには、外部へのWebサービスの連携機能

‣ 自分が登録しているサービスがあれば、どんどんリンクを貼ってみる

Page 15: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

既存のテーマをカスタマイズする‣ 連携した外部サービスへのリンクは、サイドバーに表示される

Page 16: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

コメント機能を追加

Page 18: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

コメント機能を追加‣ Disqusのアカウントを作成‣ Disqusのサイトにアクセスして、Sign Up ボタンを押す‣ http://disqus.com/

Page 19: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

コメント機能を追加‣ Site URLには、TumblrのURLを記入‣ あわせて、Disqusのユーザの登録も(下の欄)

Page 20: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

コメント機能を追加‣ Disqusにログインした状態 - 管理画面

Page 21: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

コメント機能を追加‣ 生成された、site shortnameとusernameを先程のTumblrのテーマカスタマイズの画面に記入する

Page 22: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

コメント機能を追加‣ すると、投稿ごとにコメント欄が生成されている!!

Page 23: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

さらに高度なカスタマイズへHTMLを編集

Page 24: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

さらに高度なカスタマイズへ - HTMLを編集‣ テーマを選択して設定をいじるだけでは物足りないという方へ‣ よりきめ細かなカスタマイズも可能‣ HTML、CSSをスクラッチから作成

Page 25: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

さらに高度なカスタマイズへ - HTMLを編集‣ テーマのカスタマイズ画面の Edit HTML ボタンを押す

Page 26: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

さらに高度なカスタマイズへ - HTMLを編集‣ HTMLのソースが表示される

Page 27: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

さらに高度なカスタマイズへ - HTMLを編集‣ ここで、HTMLを完全にオリジナルに自作可能‣ さらにCSSも添付されているので、これを変更することも

‣ HTMLのソース内で、{....} という記号で囲まれている部分‣ Tumblrのオリジナルの機能を使用している

‣ 詳細な機能はTumblrのページのドキュメントを参照‣ http://www.tumblr.com/docs/ja/custom_themes+

Page 28: 芸術情報演習デザイン(Web)  Tumblrを使う2 テーマをカスタマイズする

さらに高度なカスタマイズへ - HTMLを編集‣ 今日はとりあえずここまで‣ カスタムHTMLの作成の詳細については、また来週