Loading...

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

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

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (33,475Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (16,763Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,356Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,090Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (14,841Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (14,232Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (13,673Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,349Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,703Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,280Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,179Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,135Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,157Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,004Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,884Views)
  • 翻訳機能をWebサイトに埋め込む方法 (8,463Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,805Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,582Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (4,987Views)
  • 【番外編】フィッシングサイトからの偽メールが来た ~+120563143からのメールはフィッシングサイトへの誘導です~ (4,808Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう

    2013年04月30日(火)
    15356Views

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

    tumblrのオリジナルテーマを作るための基礎であるtumblrの独自タグを解説します。

    tumblrとは

    tumblrは、無料のブログサイト作成サービスです。
    “リブログ”という機能で、twitterのようにブログ記事を拡散できることが大きな特長です。

    tumblrリブログ画面

    詳しくは以前書いたこちらの記事を参照してください。
    「リブログ」してニヤニヤするブログサイト作成サービス、Tumblr(タンブラー)のはじめかた | 小棹制作所

    tumblrはブログのテーマをかなり自由に変更することができます。
    テーマとは、ブログのデザイン部分のことです。

    Tumblrのテーマギャラリー
    tumblrテーマギャラリー

    今回はtumblrでゼロからテーマを作るときに、押さえておきたいtumblrの独自タグを解説します。

    今回作成するオリジナルテーマについて

    今回作成するオリジナルテーマは、文章投稿のみを表示させるシンプルなものです。
    文章以外の投稿の場合は、何も表示されません。
    Tumblrサンプルサイト

    tumblr独自タグとは

    独自タグは、tumblrが生成する様々な情報をブログ画面に表示させるための機能です。

    たとえば、ブログ記事のタイトルは、投稿画面で記事にタイトルをつけることで、自動的にブログ画面に表示されます。
    tumblrのタイトル1 tumblrのタイトル2

    これは、htmlコードに{Title}というタグを挿入することで、tumblrがこれを自動的に記事ごとのタイトルに差し替えているのです。

    tumblrではこういった独自タグが多数用意されています。
    これらのタグを挿入したhtmlコードをtumblrに読み込ませることで、オリジナルテーマが作成されます。

    tumblr独自タグ(VariableとBlock)

    tumblrの独自タグには大きく分けて、VariableとBlockが存在します。

    Variableはページに諸々の情報を挿入します。
    上記、”tumblr独自タグとは”で解説したのは、この種類のタグです。
    htmlコード内に
    {Title}と書くとブログのタイトルを表示され、
    {Description}と書くとブログの説明が表示されます。

    Blockは、{block:xxx}から{/block:xxx}で囲まれたhtmlを、状況によって出し分けるために使います。
    たとえば、投稿された記事の種類が”テキスト記事”の場合、
    htmlコード内の{block:Text}から{/block:Text}のあいだに書かれた部分がブラウザ上で表示され、写真記事{block:Photo}や引用記事{block:Quote}のために書かれたblock内のhtmlコードは無視されます。
    これで、ひとつのコードで様々な種類の投稿に対応できます。

    作ってみよう

    制作手順はhtml+cssでページを制作しつつ、そこに独自タグを挿入していく、という流れです。
    企業ホームページやポートフォリオサイトなど、オリジナルテーマで広がるTumblr活用方法 〜オリジナルテーマ作成入門〜 | 小棹制作所

    作成するサンプルの完成版を見てみます。
    Tumblrサンプルサイト

    テキストによる投稿のみが表示されるシンプルなブログサイトです。

    コードは以下。

    <!DOCTYPE HTML>
    <html lang="ja">
    <head>
    <title>{Title}</title>
    <style type="text/css">
    #title_box{
         position: absolute;
         left: 100px;
         top: 20px;
         width: 500px;
         height: 60px;
         font-size: 50px;
         font-weight: bold;
         color: #00cc33;
    }
    #Description_box{
         position: absolute;
         left: 100px;
         top: 105px;
         width: 500px;
         height: 50px;
         font-size: 18px;
    }
    #post_box{
         position: absolute;
         left: 50;
         top: 200px;
         width: 500px;
         background-color: #99ffff;
         padding-top: 30px;
         padding-left:50px;
         padding-right: 50px;
         font-size: 12px;
    }
    #page_box{
         position: absolute;
         left:560px;
         top:150px;
         width: 100px;
         height: 80px;
    }
    h1{
         color:#0099cc;
         font-size: 18px;
    }
    </style>
    </head>
    <body>
    <div id="title_box">
    {Title}
    </div>
    <div id="Description_box">
    {Description}
    </div>
    
    <div id="post_box">
    {block:Posts}
         {block:Text}
         <h1>{Title}<h1>
         <p>
         {Body}
         </p>
         {/block:Text}
    {/block:Posts}
    </div>
    
    <div id="page_box">
    {block:PreviousPage}
         <a href="{PreviousePage}">前へ</a>
    {/block:PreviousPage}
    {block:NextPage}
         <a href="{NextPage}">前へ</a>
    {/block:NextPage}
    </div>
    </body>
    </html>
    

    CSSについて

    tumblrではスタイルを外部ファイルに記述する方法が用意されていません。
    自分でサーバを持っている場合は、そこにCSSファイルを作って読み込ませることは可能です。それ以外はhtmlファイルの中に直接記述します。

    訂正とお詫び:tumblrで外部ファイルを保存できるサーバが用意されていました。
    Tumblr
    上記tumblrページにて、ファイルをアップロードすると、自動でアドレスが割り当てられるので、tumblrに貼りつけたhtmlファイルからこのアドレスを元に、CSSファイル、JSファイル、画像ファイルが読み込めます。
    失礼しました。

    サンプルで使われている独自タグについて

    このサンプルで使われているtumblr独自タグを解説します。

    {Title}
    Variable要素です。
    ブログの”タイトル”を表示させるためのタグです。
    htmlコードで{Title}と書かれた箇所が、ブラウザで見ると「サンプルテーマ」と差し替えられているのが確認できます。

    {Description}
    Variable要素です。
    ブログの”説明”を表示させるためのタグです。
    こちらも、Titleタグと同様に、{Description}と書かれた箇所が、ブラウザでは「これはオリジナルテーマ作成のためのテストバージョンです」と差し替えられます。

    {block:Posts} {/block:Posts}
    Block要素です。
    投稿記事が存在する場合に、表示するための領域を作成します。
    投稿記事が1件もない場合は、このBlock要素で囲まれたhtmlコードの内容はブラウザ上に表示されません。

    {block:Text} {/block:Text}
    投稿記事がテキスト投稿の場合、このなかに書かれたコードが表示されます。
    今回のサンプルの場合、テキスト投稿以外のblockは作成していないため、それ以外の投稿の場合はなにも表示されません。

    {TItle}
    {Title}はブログの”タイトル”を表示させる、と上記しましたが{block:Text}など、ブログ投稿領域に入った場合に意味が変わります。
    ここでは投稿画面で作成した、テキスト投稿のタイトルを表示します。

    {Body}
    投稿画面で作成した本文を表示します。

    {block:PreviousPage} {/block:PreviousPage}
    前ページが存在する場合に中身を表示します。

    {block:NextPage} {/block:NextPage}
    次ページが存在する場合に中身を表示します

    その他のタグ

    今回使ったタグはごく一部です。すべてのタグについは下記サイトを参考にしてください。
    Creating a custom HTML theme | Tumblr

    まとめ

    この記事のまとめはありません。

    おわりに

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

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


    筆者に何か教える?

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

    feedlyでブログを購読する?

    follow us in feedly

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

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

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

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