yoppa.org


immediate bitwave

芸大 – 芸術情報演習デザイン(Web) 2016

Tumblrを使う3 カスタムHTMLテーマの作成

今回も引き続き、Tumblrのテーマのカスタマイズについて解説していきます。今回は、前回のテーマのカスタマイズよりもさらに高度な方法として、Thumblrの「edit HTML」の機能を使用して、自分独自のテーマをまっさらな状態から作成する方法について取りあげていきます。

スライド資料

スライド資料は下記のリンクから閲覧してください。

カスタムテーマ、テンプレート

カスタムテーマの基本テンプレートは、下記からダウンロードしてください。

サンプルコード

Tumblr基本テンプレート(HTMLのみ)

< !DOCTYPE html>


  
  {Title}


  
  

{Title}

{block:Description}

{Description}

{/block:Description} Archive
{block:Posts} {block:Text}
{block:Title}

{Title}

{/block:Title} {Body}
{/block:Text} {block:Photo}
{PhotoAlt} {block:Caption}
{Caption}
{/block:Caption}
{/block:Photo} {block:Panorama}
{LinkOpenTag} {PhotoAlt} {LinkCloseTag}{block:Caption}
{Caption}
{/block:Caption}
{/block:Panorama} {block:Photoset}
{Photoset-500}{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset} {block:Quote}
"{Quote}" {block:Source}
{Source}
{/block:Source}
{/block:Quote} {block:Link}
{Name} {block:Description}
{Description}
{/block:Description}
{/block:Link} {block:Chat}
{block:Title}

{Title}

{/block:Title}
    {block:Lines}
  • {block:Label} {Label} {/block:Label}{Line}
  • {/block:Lines}
{/block:Chat} {block:Video}
{Video-500}{block:Caption}
{Caption}
{/block:Caption}
{/block:Video} {block:Audio}
{AudioEmbed}{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio} {/block:Posts}

Tumblrテーマサンプル(HTML+CSS)

< !DOCTYPE html>


  {Title}
  
  
  {block:Description}
  
  {/block:Description}
  


  
  

{Title}

{block:Description}

{Description}

{/block:Description} Archive
{block:Posts} {block:Text}
{block:Title}

{Title}

{/block:Title} {Body}
{/block:Text} {block:Photo}
{PhotoAlt} {block:Caption}
{Caption}
{/block:Caption}
{/block:Photo} {block:Panorama}
{LinkOpenTag} {PhotoAlt} {LinkCloseTag}{block:Caption}
{Caption}
{/block:Caption}
{/block:Panorama} {block:Photoset}
{Photoset-500}{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset} {block:Quote}
"{Quote}" {block:Source}
{Source}
{/block:Source}
{/block:Quote} {block:Link}
{Name} {block:Description}
{Description}
{/block:Description}
{/block:Link} {block:Chat}
{block:Title}

{Title}

{/block:Title}
    {block:Lines}
  • {block:Label} {Label} {/block:Label}{Line}
  • {/block:Lines}
{/block:Chat} {block:Video}
{Video-500}{block:Caption}
{Caption}
{/block:Caption}
{/block:Video} {block:Audio}
{AudioEmbed}{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio} {/block:Posts}