tumblrでのブログ更新を地道に続けています。
開設当初からブログのデザインがあまり変わっていませんが、実はこっそりとカスタマイズを続けています。
以前書いたプチカスタマイズ記事が読んでいただいた方のお役に立ったようなので、誰でも簡単にプチカスタマイズができるような記事を書いていこうかと思います。
タグクラウドを表示する
tumblrは一般的なブログのようにカテゴリ分けをすることができませんが、タグを付けることでその代替とすることが可能です。
ただし、記事にタグを付けただけではブログ上に表示されませんので、今回はタグクラウドの表示をさせるようにします。
■Tumblr Tag Cloud Generatorを使う
タグクラウドをブログ上に表示するには、サードパーティ製のツールTumblr Tag Cloud Generatorを使います。
コピーしたコードは「テーマをカスタマイズ」→「説明」欄に貼り付けることも可能ですが、ここでは「HTMLを編集」でHTML内に貼り付けます。
タグクラウドはブログのサイドバーに表示したいので、<div id=”sidebar”> という記述を検索します。
※使用テーマは「Effector Theme」ですが、他のテーマでも応用できると思います。
<!— SIDEBAR —>
<div id=”sidebar”>
<div id=”blog-info” class=”side-box”>
{block:IfNotLogoInTopBar}
{block:IfLogoImage}<p><a href=”/” title=”{Title}”><img id=”logo” src=”{image:Logo}” alt=”Logo” /></a></p>{/block:IfLogoImage}
{/block:IfNotLogoInTopBar}
{block:IfBlogTitleInSidebar}
・
（中略）
・
</div>
{/block:Likes}
<!— END LIKES —>
{/block:IfShowLikesInSidebar}
{/block:IfShowLikes}
<!—Tumblr Tag Cloud [2012-06-01]—>
<script type=”text/javascript” src=”http://rive.rs/javascripts/tumblr.min.js?css=default&minsize=120&maxsize=280”></script>
</div><!— /#sidebar —>
（太字で表した部分がコードを貼り付けた箇所です）
サイドバーについての指定をしている<div id=”sidebar”> ～</div>中の任意の場所に貼り付けます。
今回はサイドバーの一番下にタグクラウドを設置したかったので、終わりの</div>の直前に貼り付けてみました。
貼り付け終えたら、「プレビューの更新」→「保存」を押して完成です。
まとめ
実はタグクラウドの設置の仕方は、ググればたくさんの記事が出てきます。
ただ、（自分には）専門的な内容でよく分からないものが多かったので、備忘的な意味も込めて今回の記事を書きました。
HTMLの知識がなくてもカスタマイズをしたい、そんな方に少しでもお役にたてれば幸いです。
コメント