Upload
atsushi-tadokoro
View
2.078
Download
2
Embed Size (px)
Citation preview
芸術情報演習デザイン(Web) Tumblrを使う2テーマをカスタマイズする2013年6月20日東京藝術大学 芸術情報センター(AMC)担当:田所淳
今日の内容‣ Tumblrをカスタマイズして、自分のオリジナルのテーマに
‣ 2通りのアプローチ1.既存のテーマをカスタマイズしていく2.一から、自分のテーマを作成していく (上級者編)
既存のテーマをカスタマイズする
既存のテーマをカスタマイズする‣ まず今回は、比較的簡単な方法で‣ 既存のテーマベースにをカスタマイズしていく
既存のテーマをカスタマイズする‣ もし自分のメインの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+
さらに高度なカスタマイズへ - HTMLを編集‣ 今日はとりあえずここまで‣ カスタムHTMLの作成の詳細については、また来週