Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (34,904Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (17,471Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,550Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,479Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (15,429Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,130Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (15,114Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,518Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,882Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,471Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,370Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,299Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,606Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,391Views)
  • 翻訳機能をWebサイトに埋め込む方法 (9,130Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,896Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,834Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,595Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (5,289Views)
  • TwitterBootstrapでも採用されている、たぶんもっとも簡単なレスポンシブ対応テーブルの作り方 (5,231Views)
  • tumblrの変数{Variables}とブロック{Blocks}を学んで、tumblrテーマ作成の基本を知ろう

    2014年06月18日(水)
    1341Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    tumblrのテーマ作成において、学ぶべき最重要項目のひとつ、変数{Variables}とブロック{Blocks}についてtumblrテーマ作成初心者向けに解説します。

    はじめに:tumblrテーマ作成においての前提知識

    tumblrのテーマを作成するのに前提となる知識は、html/cssです。
    さらに、WordPressやMovableTypeなどでブログやCMSを構築した経験があれば、スムーズな習得が可能です。

    tumblrテーマ作成のミソは、テンプレートタグ (変数{Variables}とブロック{Blocks})

    tumblrテーマ作成には、テンプレートタグと呼ばれる、tumblr特有の記述を理解する必要があります。
    テンプレートタグには変数{Variables}とブロック{Blocks}があります。
    テンプレートタグをhtmlコードに組み込んでいくことで、投稿記事や、ブログのタイトルなど、ユーザーが入力した情報をブログに出力させます。

    変数{Variables}とは

    変数{Variables}は、例えるなら「ひじょうに優秀なおつかいロボット」です。
    テーマ内に特定の変数{Variables}を記述(命令)すると、それに合ったデータを取ってきて、ブログ上に表示してくれます。

    たとえば、「テーマの編集」のなかにある「タイトル」の項目を入力します。
    すると、テーマ内htmlコードで変数{Variables}、この場合だと{title}という記述ある箇所に、自動的に、「タイトル」に入力した内容が表示されます。

    variables1

    変数{Variables}のメリット

    変数{Variables}を使うメリットは、制作側で変数を用意してあげれば、ユーザーはhtml/cssを全く理解していなくても、ブログのタイトルやプロフィール画像などなど、の変更ができる点です。

    変数{Variables}を使ったサンプルコード

    <!DOCTYPE html>
    <html>
    <head>
    <title>{Title}</title>
    </head>
    <body>
         <header>
         <div class="container">
              <img class="avatar" src="{PortraitURL-128}">
              <h1><a href="{BlogURL}">{Title}</a></h1>
              <h2>{description}</h2>
              </div>
         </header>
    </body>
    </html>
    

    ここで使われている変数{Variables}

    上記のコードでは、テーマ作成において、特に使用頻度の高い変数{Variables}を使っています。
    以下、解説です。

    {title} ブログのタイトルを表示します。
    {description} ブログの説明を表示します。
    {BlogURL} ブログのURLを表示します。
    {PortraitURL-128} プロフィール画像を縦横128pxで表示します。

    これらの変数{Variables}に格納されるデータは、「テーマの編集」からユーザーが自由に変更することができます。

    variables2

    その他の変数{Variables}

    tumblrのすべての変数{Variables}は下記のtumblr公式サイトで確認できます。
    Creating a custom HTML theme | Tumblr

    基本的な変数{Variables}の日本語訳を下記します。

    変数名
    解説
    {Title}
    ブログのタイトルを出力
    {Description}
    ブログの説明を出力
    {MetaDescription}
    メタタグ用ブログの説明を出力
    {BlogURL}
    ブログのメインURLを出力
    {RSS}
    ブログのRSSフィードのURLを出力
    {Favicon}
    ブログのファビコンのURLを出力
    {CustomCSS}
    カスタマイズページに追加されたCSSを出力
    {PortraitURL-16}
    プロフィール画像のURLを出力。画像サイズが縦横16px
    {PortraitURL-24}
    プロフィール画像のURLを出力。画像サイズが縦横24px
    {PortraitURL-30}
    プロフィール画像のURLを出力。画像サイズが縦横30px
    {PortraitURL-40}
    プロフィール画像のURLを出力。画像サイズが縦横40px
    {PortraitURL-48}
    プロフィール画像のURLを出力。画像サイズが縦横48px
    {PortraitURL-64}
    プロフィール画像のURLを出力。画像サイズが縦横64px
    {PortraitURL-96}
    プロフィール画像のURLを出力。画像サイズが縦横96px
    {PortraitURL-128}
    プロフィール画像のURLを出力。画像サイズが縦横128px
    {CopyrightYears}
    ブログが存在した年数を出力

    ブロック{Blocks}とは

    ブロック{Blocks}は、テーマ内に書かれたコードを「判断」して、「表示」させるための機能です。
    ブロック{Blocks}の書き方は

    {block:◯◯◯◯}
    <h1>テスト</h1>
    {/block:◯◯◯◯}
    
    このようになっていて、
    ◯◯◯◯
    の部分にtumblrで決められた文言を入れます。

    言葉で説明するよりも、実際のコードや使い方を見たほうが、理解が早いと思います。

    ブロック{Blocks}の例

    たとえば、tumblrテーマ内に下記の、記述があったとします。

    {block:Photo}
    <h1>テスト</h1>
    {/block:Photo}
    

    ここで{block:Photo}と{/block:Photo}が1セットで、ブロック{Blocks}と呼ばれます。
    このブロック{Blocks}は、投稿種類が写真投稿かどうかを「判断」します。
    そして、写真投稿だった場合、

    {block:Photo}~{/block:Photo}
    で囲まれた、コードがブログに表示されます。

    この例なら
    <h1>テスト</h1>
    
    これです。

    tumblrでは、すべての投稿種類に対応するブロック{Blocks}が用意されています。

    投稿種類
    ブロック
    テキスト投稿
    {block:Text}~{/block:Text}
    写真投稿
    {block:Photo}~{/block:Photo}
    引用投稿
    {block:Quote}~{/block:Quote}
    リンク投稿
    {block:Link}~{/block:Link}
    チャット投稿
    {block:Chat}~{/block:Chat}
    オーディオ投稿
    {block:Audio}~{/block:Audio}
    ビデオ投稿
    {block:Video}~{/block:Video}

    これで、すべての投稿種類に対して、適切なコード=レイアウトを表示することが可能になる仕組みです。

    ブロック{Blocks}の使いみちは、投稿種類の出し分けだけじゃない

    例えば、{block:Photo}~{/block:Photo}で囲まれたコード内に下記のように、キャプション用ブロック{Blocks}を記述します。

    {block:Photo}
    
    {block:Caption}{Caption}{/block:Caption}
    
    {/block:Photo} 
    
    こうすると、その写真投稿にキャプション(写真についての説明文)がついていた場合のみ、この変数{Caption}の中身=キャプションが表示されます。
    ※ちなみにこのコードだと、写真を表示させるコードを書いていませんので、写真は表示されません。Captionブロックを理解しやすくするために、あえてこうしています。

    すべての{Variables}および、ブロック{Blocks}については公式サイトで

    すべての変数{Variables}および、ブロック{Blocks}については下記公式tumblrサイトで確認できます。
    Creating a custom HTML theme | Tumblr

    まとめ

    変数{Variables}:ユーザーが入力した情報を表示させる機能。

    ブロック{Blocks}:ブロック{Blocks}内で囲まれた範囲を条件によって、表示・非表示にする機能。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.