tumblrのデザインやカスタマイズ14選

最近になってようやくTumblrをいじり始めたので、いろいろなまとめ14です。

▼作成したtumblrブログ
skuare.net
ウェブサイトのデザインをクリッピングしているサイト。
TumblrでWebデザインギャラリーを作成しました!手順を公開します | WebParadiseの記事を参考に手軽運用

ピーチク 公式ブログ
会社で担当するサービスのブログ。

tumblr自体は昔からあるので、開設とか凄いよ的なまとめは割愛します。

デザイン6選 海外を中心にウェブサービスのスタートアップではブログとしてtumblrがよく使われています。
どの利用例もシンプルですが、ブランドイメージを保っています。

【海外】
#1:turntable.fm
turntableはデザインもいいですね。

#2:Instagram Instagramはカメラのマークがあり、シンプルなデザイン。

#3:Path サービス同様シンプルで洗練されています。
またresposible layoutにも対応しています。

【国内】
#4:campfirejp 家入さんでおなじみcampfireも導入

#5:Wondershake 巷を賑わすWondershakeでも利用されています。

#6:ピーチク 公式ブログ ptic.png ソーシャルテレビサービス「ピーチク」公式ブログです。

カスタマイズ7選 #1:独自ドメインでの運用
ドメインのAレコードを72.32.231.8にし、設定画面でドメインを設定するだけです。

#2:画像を拡大
下記を入れるだけでOK。
<!-- Start of Tumblrbox Code -->
<script type='text/javascript'>
document.write(unescape("%3Cscript
src='http://picuous.github.com/tumblrbox/tumblrbox.js'
type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- End of Tumblrbox Code -->
via:Tumblrbox - Lightbox for Tumblr

#3:Infinite Scrolling
ページングさせたくない方向けです。
<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>
▼動作サンプル
skuare.net

#4:Open Graph設定
{block:PermalinkPage}
<meta property="og:title" content="{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}" />
<meta property="og:description" content="{MetaDescription}" />
<meta property="og:url" content="{Permalink}" />
{/block:PermalinkPage}
{block:IndexPage}
<meta property="og:title" content="{Title}" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="ベース画像" />
<meta property="og:site_name" content="{Title}" />
<meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />
{/block:IndexPage}
基本テキストで利用しているピーチク 公式ブログでの例です。
トップと詳細ページでの例で、og:imageはアイコンだとさみしいので、どこかにアップした画像を使用しています。

#5:ソーシャル設定
▼Facebook
<div class="fb-like" data-href="{Permalink}" data-send="false" data-layout="button_count" data-width="105" data-show-faces="false"></div>
▼Twitter
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-text="{Title}" data-via="あなたのアカウント" data-lang="ja">ツイート</a>
▼Google+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <g:plusone href="{Permalink}" size="small"></g:plusone>

#7:関連リンクを表示
tagから関連リンクを自動表示させる方法です。
{block:Permalink}
{block:HasTags}
<!-- Start In-Link widget -->
<script src="http://tumblr-in-link.googlecode.com/svn/branches/Version 2.0/js/tumblr-in-link.2.0.js?num=5&len=60&css=complete&title=Related Posts&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<!-- End In-Link widget -->
{/block:HasTags}
{/block:Permalink}
via:In-Link - A widget to display related tumblr content ? GaySpirit's Tech

#7:投稿者表示
複数人で運用していると投稿者を表示させたいものです。
画像と名前を出してみましょう。
Posted by <img src="{PostAuthorPortraitURL-24}"> {PostAuthorName}

最後に おしゃれな感じで、これtumblr?な例です。
Ann's Blog


皆様も手軽にtumblr始めてみませんか。

sponsors

「tumblrのデザインやカスタマイズ14選」をシェアする

記事作成:
記事URL:

TOP > > tumblrのデザインやカスタマイズ14選