Tumblrにサイドバーを追加する一番簡単な方法

Pocket

Tumblrにサイドバーを追加する方法
Tumblrのデフォルトテーマでもそうなっているように、テーマの中にはサイドバーがないものがたくさんあります。

このテーマ使いたいけどサイドバーほしい!という場合でもTumblrをカスタマイズすることで簡単に追加可能。このページではTumblrにサイドバーを追加する方法を紹介します。

Tumblrにサイドバーを追加する方法

Tumblrでは独自タグを使ってデータベースの情報を取り出していますが、それ以外のHTML構造やCSSの記述は通常のHTMLページを作るのと同じ。

サイドバーを追加する場合もHTMLタグを入れて、CSSでスタイリングすれば完了です。ここではデフォルトのテーマにサイドバーを追加してみます。

デフォルトではこんな感じ。
Tumblrにサイドバーを追加してみる

ここにサイドバーを追加してみます。カスタムページを開いてHTMLを編集をクリックし、編集モードへ。
Tumblrにサイドバーを追加してみる2

編集パネルのHTMLコードに以下のコードを追加します。追加する場所はid=”posts”の手前。

<!-- サイドバーを追加 -->
<section id="sidebar" style="display:inline-block;width:20% !important; vertical-align:top;">
    <strong>サイドバー</strong>
    <ul>
        <li><a href="#">リンク1</a></li>
        <li><a href="#">リンク2</a></li>
        <li><a href="#">リンク3</a></li>
        <li><a href="#">リンク4</a></li>
        <li><a href="#">リンク5</a></li>
    </ul>
</section>

<!-- section にstyleを追加 -->
<section id="posts" style="display:inline-block;width:70% !important;" ...>

コードを追加して、プレビューの更新ボタンを押すと、postsの横にサイドバーが追加されます。
Tumblrにサイドバーを追加してみる3
あとはCSSでスタイリングしたり、Tumblrの独自タグを使ってアーカイブページのリンクを表示したり、RSSの登録リンクを追加できます。

また、ここにjavascriptを読み込ませればWordpressブログのRSSを取得して最新記事を表示することもできそうです。他にもバナーや特定ページへのリンクなど、通常のHTMLページのように自由に追加できます。