Loading...

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

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

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

    2013年04月24日(水)
    4373Views

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

    Tumblrのオリジナルテーマはクリエイティブな要望に答えます。その作成手順を解説します。

    「リブログ」してニヤニヤするブログサイト作成サービス、Tumblr(タンブラー)のはじめかた | 小棹制作所

    上の記事で、基本を解説したTumblr。
    遊ぶだけでなく、かなりクリエイティブな使い方もできます。
    それがオリジナルテーマの作成。
    オリジナルテーマは、Tumblrを企業サイトやポートフォリオサイト作成ツールへと、華麗に変身させます。

    テーマってなに?

    テーマとは、Tumblrブログのデザイン部分を指します。
    たとえば、

    • 例1) ブログ記事部分を「更新履歴」の代わりに使うことで、企業サイトのようなテーマを作成する
    • 例2) 写真がページ全体に並ぶような、ポートフォリオ向けのテーマを作成する

    など。

    Tumblrはテーマしだいでさまざまな使い方ができます。
    そして、こんなテーマをゼロから作成してしまおう、というのがオリジナルテーマです。

    こんなサイトが作れます

    Tumblrで制作されたサイト
    水野美紀 Miki Mizuno Official Website

    AMEN†FASHION

    @innovations | Washington Post on news innovation

    一番上の女優水野美紀さんのサイトはかなり作り込んでいる印象を受けますね。
    ほかのサイトも、Tumblrの特長であるリブログ機能を活かす意図が感じられます。

    オリジナルテーマ作成に必須の知識

    オリジナルテーマを作成するには、Webサイト制作の知識が必要です。
    具体的にはhtml+CSS、それにTumblr独自タグの習得。

    独自タグとは、例えば投稿した記事名、記事内容など、おもに投稿記事まわりの情報を表示させるための機能のことです。
    公式サイトにタグ一覧があります。
    Creating a custom HTML theme | Tumblr
    これを参考にして制作するのが効率的です。
    WordPress等でテーマを作った経験のある方なら、すんなりと入っていけるでしょう。

    また、Tumblrは多種多様な、無料・有料テーマが配布されています。
    オリジナルテーマを作るのはちょっと手間が掛かり過ぎる、とお考えの方は配布テーマを用いるのもいいでしょう。
    テーマ配布サイト
    Tumblr

    それでは、次の項でTumblrオリジナルテーマ作成の流れを見ていきましょう。

    オリジナルテーマ作成の流れ


    htmlでオリジナルテーマを作っておく

    ダッシュボードから、ブログ画面に移動する

    画面右上の「カスタマイズ」をクリック

    画面左側にカスタマイズ用画面が表示されますので
    「HTMLを編集」ボタンをクリックします

    htmlコードが表示されますので、ここに自分で作成したコードを貼り付けます

    コードはCreating a custom HTML theme | Tumblrにあるサンプルを使用しました。

    とてもシンプルなテーマが表示されました。
    これをベースにスタイル(CSS)を加えていく、という制作手順です。

    まとめ

    オリジナルテーマは、Tumblrを遊ぶためのサービスから、様々なアイディアをカタチにできるクリエイティブなツールに変えてくれます。
    Webサイト制作の際は、選択肢のひとつとして考えていいかもしれませんね。

    もし、テーマ作成に行き詰まったら、お気軽にご相談ください。

    おわりに

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

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


    筆者に何か教える?

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

    feedlyでブログを購読する?

    follow us in feedly

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

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

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

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