Tumblrをカスタマイズしたのでまとめておく(備忘録とカスタマイズ説明サイト紹介)

【この記事を読むのに必要な時間は約 13 分です。】

Tumblrを画像中心の普通のブログっぽくカスタマイズしたので、自分の備忘録を兼ねて、カスタマイズに利用したサイトと簡単なカスタマイズ方法を紹介する。

カスタマイズに当たっては、出来るだけデフォルトで高機能なTumblrの無料テーマを見つけるのが重要だと思う。今回は、良いテーマを見つけることができたのでカスタマイズも楽だった。

利用した無料テーマ

Jennifer Theme for tumblrを利用した。

Jennifer Theme

デフォルトで用意されているカスタマイズ設定

ソーシャルボタンの表示

画面右上に「Twitter」「Facebook」「RSS」が設置できる。
デフォルトでは「RSS」ボタンだけしか、表示されない。
「Facebook」ボタンはTumblrダッシュボード>カスタマイズ>Facebook Usernameを記入すると表示される。
「Twitter」ボタンは、tumblrダッシュボード>セッテイング(歯車のボタン)から、一度、Twitterでログインしておく必要がある。(別に連携させなくても良い。)これで表示される。

「Twitter」ボタンを表示させる方法は、最初、どうやっても表示できなくて困った。テーマの作者のホームページの説明もどうも間違っている気がする。

Discusコメント欄の表示

Discusの利用登録をしたうえで、Tumblrダッシュボード>カスタマイズ>Discus Shortnameを記入すれば、利用できるようになる。

Flickrのサムネイル画像の表示

Tumblrダッシュボード>カスタマイズ>Flickr Usernameを記入すると表示される。

Twitterタイムライン

本来はデフォルトで表示される設定なのだが、Twitterのタイムラインの表示方法が変更されて以降、テーマが更新されていないので、これは、手動で表示させるようにした。

フォロー一覧とLike一覧

デフォルトで表示される。

自分でカスタマイズした部分

・フォントの変更
・上へ戻るボタンの設置
・画像をlightbox風に表示するように変更
・タグクラウドの導入
・Twitterタイムラインの導入
・Tumblrフォローボタンの設置
以上6点をカスタマイズした。

フォントの変更

全体のフォントは気に入っているのだが、コンテンツ部分は日本語も表示されるので、コンテンツ部分のフォントを変更した。
日本語フォントについては、毎回、CSSのfont-family指定はこれで決まり!(2013春)を参考にしている。
Tumblrダッシュボード>カスタマイズ>詳細設定>カスタムCSSを追加に、以下を追記。

/* Japanese font */
body {
    font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN',
          'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
/* Japanese font */

上へ戻るボタンの設置

tips!さんのスムーススクロールjQuery「Animated Scroll to Top」という記事を参考に、画像も拝借して、設定した。詳細は、本家を確認して頂くとして私は以下のように設定した。

HTMLヘッダー部分への記載

Jquery本体は、Google AJX APIを利用。Tumblrダッシュボード>カスタマイズ>HTMLを編集で、<head>~</head>部分に次のように記載する。

<head>
<!-- back to top -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
	// hide #back-top first
	$("#back-top").hide();
	
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 400) { //400pxでボタン表示
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0        //どこまで戻るか
			}, 800);                //スクロールスピード小さいほど速い
			return false;
		});
	});
});
</script>
<!-- /back to top -->
</head>

HTMLボディ部分への記載

Tumblrダッシュボード>カスタマイズ>HTMLを編集で、<body>~</body>部分に次のように記載する。</body>の直前に記載するとよい。

<body>
(略)
<!-- back to tpo -->  
<p id="back-top">
    <a href="#top"><span></span>Back to Top</a>
</p>  
<!-- /back to tpo -->  
</body>

カスタムCSSへの記載

Tumblrダッシュボード>カスタマイズ>詳細設定>カスタムCSSを追加に、以下を追記。

/* back to top */
#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: 90%;
}
#back-top a {
	width: 50px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	outline: none;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 40px;
	height: 40px;
	display: block;
	margin-bottom: 7px;
	background: #eae5e3 url(ここには、http://から始まる矢印画像をアップロードしたURLを記入。) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
#back-top a:hover span {
	background-color: #eee;
}
/* back to top end */

画像をlightbox風に表示するように変更

デフォルトだと、複数の画像をセットにして表示するとlightbox風に表示されるが、単独の画像だとlightbox風に表示されない。そこで、simaさんのTumblr で画像を Lightbox 表示!(しかも何も導入せずに)という記事を参考にして設定した。
Tumblrダッシュボード>カスタマイズ>HTMLを編集で、元々の設定部分をコメントアウトして、lightbox風表示設定を追加挿入した。

コメントアウトする部分

以下の設定が適用されないようにコメントアウトした

<!-- コメントアウトする					
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
 -->

追加挿入したもの

<!-- 代わりに挿入して単体画像にlightbox効果 -->
<a href="{PhotoURL-HighRes}" onclick="Tumblr.Lightbox.init([{
    'width'    : '{PhotoWidth-HighRes}',
    'height'   : '{PhotoHeight-HighRes}',
    'low_res'  : '{PhotoURL-500}',
    'high_res' : '{PhotoURL-HighRes}'
  }]); return false;"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></a>
<!-- /代わりに挿入して単体画像にlightbox効果 -->

タグクラウドの導入

上へ戻るボタンの設置で参考にしたtips!さんの『Tumblr Tag Cloud Widget』でタグクラウドを高速表示化という記事を参考に設定した。詳細は、本家を確認して頂くとよい。
【Tumblr Tag Cloud Widget】:http://post-theory.com/tumblr-tag-cloud-javascriptはだいぶ本家の説明と画面が変わっているが、基本的な内容は一緒なので、確認しながら詳細に設定できる。
できあがったコードを、Tumblrダッシュボード>カスタマイズ>HTMLを編集で、<body>~</body>部分の好きなところに追加すればよい。
私は、サイドバーにウィジェットをあらかじめ追加できるように作者が用意している<!– Insert any extra widgets below this line–>の中に以下のように追加した。

<!-- Insert any extra widgets below this line-->
<!-- tag cloud -->
<div class="about">
<h3>Tags</h3>
<div id="tagCloud"></div><script type="text/javascript" src="http://post-theory.com/public/tagcloud/jump-up-jp?sort=frequency&scale=false&fontsize=12px&pad=4&tagct=%20(%24)" async="async"></script>
<!-- /tag cloud -->			
<!-- Insert any extra widgets above this line -->

Twitterタイムラインの導入

本来デフォルトで表示されるようになっているが、Twitterの仕様の変更により表示できなくなっているので、自分で追加した。
1.Twitterにログイン
2.Twitterの「設定とヘルプ」ボタン(歯車ボタン)>設定>ウィジェット>新規作成でタイムラインを選択し、プレビューを見ながら作成する。
3.出来たら、「ウィジェットを作成」ボタンをクリック。
4.表示されたコードをコピーして、Tumblrダッシュボード>カスタマイズ>HTMLを編集で
<body>~</body>部分の本来表示される部分、<h3>{block:IfTweetsTitle}{text:TweetsTitle}{/block:IfTweetsTitle}</h3>のすぐ下に次のように貼り付ける。

<h3>{block:IfTweetsTitle}{text:TweetsTitle}{/block:IfTweetsTitle}</h3>
<!-- Twitter埋め込み --><a class="twitter-timeline" href="https://twitter.com/jump_up_" data-widget-id="ここには自分のIDが入る">○○○○からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- /Twitter埋め込み -->

Tumblrフォローボタンの設置

最後にTumblrのフォローボタンも設置してみた。
Tumblrダッシュボードの?マークをクリック。
一番下に表示されている「Tumblrについて」をクリック。
右側に表示されている「ボタン」をクリック。
ここで好きなボタンを選択し、「コードを取得」をクリック。
コードをTumblrダッシュボード>カスタマイズ>HTMLを編集で
<body>~</body>部分のサイドバーが表示されている箇所の好きなところに次のように貼り付ける。
ちなみに私は検索窓の終わり{/block:IfShowSearchBox}の次に貼り付けた。

			{/block:IfShowSearchBox}
<!-- tumblr follow -->
<div class="about">
<h3>Please follow me</h3>
<iframe class="btn" frameborder="0" border="0" scrolling="no" allowtransparency="true" height="25" width="153" src="http://platform.tumblr.com/v1/follow_button.html?button_type=1&tumblelog=jump-up-jp&color_scheme=light"></iframe>
</div>
<!-- /tumblr follow -->

出来上がり

その他にも、タイトル画像を挿入したり、ヘッダーの文字や文字位置の変更、自分のプロフィール画像の表示、全体のフォント色を変更したりとデフォルトのセッテイングで変更できる部分もたくさんあるので、是非試してほしい。
以下が完成した私のTumblrページ、クリックしてもらうと全体が表示される。以上

jump up tumblr

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。

コメント

  1. […] jump-up.info […]