Tumblrでもここまでデザインできる!オリジナルカスタマイズの実例解説

Tumblrでもここまでデザインできる!オリジナルカスタマイズの実例解説

ぺちこ

ぺちこ

テーマカスタマイズの解説最新版
(2015年3月26日更新)
本記事より分かりやすく、テーマカスタマイズについて解説した記事を、連載形式でアップしています!以下よりご覧ください。

こんにちは、デザイナーのぺちこです!

お盆が過ぎたら、本当に夜が涼しくなった気がします。ツクツクボウシが「ツクツクボウシ」って鳴いてると最初に思った人は、けっこう想像力豊かだったんだなあと思う今日このごろです。

そんなわけで、9月も近づいて参りました。9月といえばLIGが運営を手がけるシェアオフィス「いいオフィス」のオープンが控えています。そして「いいオフィス」では公式ブログ「いいオフィスBLOG」をTumblrで運用しています。

私はこのTumblrのカスタマイズを担当しましたので、今回は「Tumblrオリジナルカスタマイズ方法」について紹介したいと思います!

デザインありきで、デザインを再現することにフォーカスしたカスタマイズだったため、完全なカスタマイズ法とは言い難いかもしれませんが、ある程度皆さんの参考になればと思います。

Tumblrでもここまでデザインできる!オリジナルカスタマイズ実例解説

今回のカスタマイズにあたっては、以下の2つのサイトを参考にさせていただきました。

まずはTumblr独自タグを押さえつつ、適宜ここに戻ってくるようにしましょう。

▼参考記事

  • Tags of tumblr.

    公式をもとに日本語解説を展開してくださっています。(助かりました!)

もくじ

1. アカウントを非公開に設定する

調整中のページがアクセス可能なのはよろしくないので、まずは非公開モードにしておきましょう。

すでに運用しているアカウントをリニューアルしたいのであれば、新しいブログを作って作業をしましょう。

設定画面へは、上部の歯車アイコンから。

設定対象のブログは右カラムより切り替えることができます。

設定画面の最下部に「パスワード」という項目があるので、スイッチをオンにして閲覧用のパスワードを入力します。

入力するだけでOKなので、さっそくブログにアクセスしてみてください。

以下のような認証フォームが出てくれば設定は完了です!

2. カスタマイズ前の注意点

カスタマイズを始める前に、以下に紹介する注意点をチェックしておいてください。

カスタマイズ画面

設定画面の「サイトのテーマ」>「テーマの編集」より移動ができます。

画像・CSS・JavaScriptについて

テーマ用のファイルをアップする場所はTumblrにあるのですが、1ファイル5MB&1日15MBまでという制限付きのため、あまり実用的ではありません。

別途サーバーを用意して、そこから引っ張ってくるのが良さそうです。

CSS、JavaScriptに関しては、テーマHTMLに直接記載している場合も多いです。そのあたりはメンテナンス性を考慮して、各々やりやすい方を選んでいただければと思います。

テーマHTMLについて

TumblrのテンプレートHTMLは1ソースです。

トップも詳細もひとつのHTMLで振り分けているので、見づらくなってしまいがちです。

組みかたは各々やりやすい方法でよいと思いますが、今回はローカルでひととおり組んでデバッグまである程度済ませてから、独自タグを粛々と組み込んでいきました。

スマホ用テーマについて

スマホ用のデフォルトテンプレートがあります。

少しだけカスタマイズできるようになったようですが、今回はレスポンシブのため不使用。

カスタマイズについては以下の記事が参考になります。

▼参考記事

スマホテンプレートが適応されないようにするには、カスタマイズ画面下部の「詳細設定」にある「デフォルトのモバイルテーマを使用」という項目をオフにしてください。

ヘッダーのウィジェットについて

これをウィジェットと呼ぶのかは分かりませんが…

非公開モードだと表示されませんでした。

カスタマイズ中に必要なタグを消してしまったのか? と少し頭を抱えたので、気にしないで大丈夫ということだけお伝えしておきたいです。

検索機能について

残念ながら、日本語に対応していません。(2014年8月現在)

日本語で運用する場合は、検索フォームは役割をほとんど果たさないため、導入はしばらく待ちでよいと思います。

3. {block}タグとTumblrの構造

前述のとおりTumblrは1ソースのため、{block}タグを用いて分岐をしていきます。

これがまた少々厄介で、以下のようになっています。

{block:IndexPage}~{/block:IndexPage}
トップページ、検索結果ページ、タグページなどの「一覧系ページ」全てが該当
{block:PermalinkPage}~{/block:PermalinkPage}
個別記事詳細ページに該当

さらに、「一覧系ページ」は以下のように分岐タグが用意されています。(一部抜粋)

{block:DayPage}~{/block:DayPage}
特定の日付の投稿一覧ページ
{block:TagPage}~{/block:TagPage}
タグページ
{block:SearchPage}~{/block:SearchPage}
検索結果ページ

さて、どこが厄介かと申しますと、Tumblrのトップページであることを判定するタグが無いことです。
トップページのみに何かをしたい場合には、JSでURLを取得・判別したり、idやclass名を駆使して打ち消しあったりと、少し手を加える必要があります。

デフォルトのテンプレートにもあるように、なるべく大枠のdivなどに細かくclassをふるようにしておくと、後々助かります。

<div id="wrapper" class="{block:IndexPage} home{/block:IndexPage}{block:PermalinkPage} permalink{/block:PermalinkPage}{block:SearchPage} search-page{block:NoSearchResults} no-results{/block:NoSearchResults}{/block:SearchPage}{block:TagPage} tag-page{/block:TagPage}">

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーをやっております、ぺちこです。イヌとうさぎとぺんぎんが大好きです。「趣味は冬はスノボ、夏はダイビングです!」と言うために2013年からじわじわと奮闘中です。

このメンバーの記事をもっと読む