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

スライド資料

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

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

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

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

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

サンプルコード

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

< !DOCTYPE html>


  
  


  
  
{Title}

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

  
  Archive

  
  

    {block:Posts}

    
    {block:Text}
    

      {block:Title}
      
{Title}
      {/block:Title}
      {Body}
    
    {/block:Text}

    
    {block:Photo}
    

      
      {block:Caption}
      
{Caption}
      {/block:Caption}
    
    {/block:Photo}

    
    {block:Panorama}
    

      {LinkOpenTag}
      
      {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}
  
  

  
  

    
    {block:PreviousPage}
    < 前のページ | 
    {/block:PreviousPage}
    {block:NextPage}
    次のページ >
    {/block:NextPage}
  

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

< !DOCTYPE html>


  
  
  
  {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}
    

      
      {block:Caption}
      
{Caption}
      {/block:Caption}
    
    {/block:Photo}

    
    {block:Panorama}
    

      {LinkOpenTag}
      
      {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}
  
  

  
  

    
    {block:PreviousPage}
    < 前のページ | 
    {/block:PreviousPage}
    {block:NextPage}
    次のページ >
    {/block:NextPage}