Tumblrのカスタムthemeの勉強

2013.2.7:学習週


  • Tumblrのカスタマイズについて勉強
    • Tumblr公式のcustom themeタグリファレンス
    • Tumblrにstaticファイルをアップロード
    • Essential boilerplate theme
  • メモ:uploadしたリセットCSS

Tumblr公式のcustom themeタグリファレンス:


How to create a custom HTML theme

http://www.tumblr.com/docs/en/custom_themes

Themeに必要なリセットCSS、imageなどのstaticファイルのアップロード


[注意] アップロードした際に表示されるURLをメモしておかないと、DashboardやSettingsには表示されないみたいです。

Tumblr Upload a static file

http://www.tumblr.com/themes/uploadstaticfile

以前、紹介したリセットCSSをファイルに落としてuploadしておけば便利。

HTML5 Reset Stylesheet

http://html5doctor.com/html-5-reset-stylesheet/

Essential boilerplate theme:修飾が入っていないデザインベースとして使えるTheme:


Theme作るときのベースとして。CSSは全て、CustomCSS内で設定できる。ページ内のDemo base codeをコピペしてベースとして使用。

Essential boilerplate theme

http://buildthemes.tumblr.com/code/essential

これはスゴイ!便利!

シンプルなので見やすく、HTMLタグの設計も変更しやすいと思います。

また、実際にEssentical boilerplate themeを使ったブログは下記。必要最低限のHTMLって感じです。:

http://essentialtheme.tumblr.com/

Tumblrでの制限:分かったこと


  • 1記事表示のとき、「最近の記事」とかを取ってくることはできない
  • ADVANCEDの「10 posts per page」の10(ポスト数)を意識しないといけない場面が出てくる
  • {block:PermalinkPagination}・{block:PreviousPost}・{block:NextPost}はIndexPageでは表示されない
  • {block:IndexPage}・{block:Pagination}などはトップページ、NextPageなどで表示される:Page概念
  • google web fontsはthemeに直接埋め込む

資料


2010年の記事。少し古いものの、Theme作成の手順がざくっと分かってよかった:

Things to Know About Custom Tumblr Theme Design

http://buildinternet.com/2010/04/things-to-know-about-custom-tumblr-theme-design/

Tumblrのテーマ開発をchapterに分けて解説している。ステップに分かれているので学習しやすかった。必要なところだけ読むのもOK:

http://buildthemes.tumblr.com/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s