Aug 31st, 2011
新着記事リストをTumblrに設置してみた
念願の新着記事・・というか所謂最近の投稿リストを置いたので。
以前Mach3.laBlogさんのTumblrでタグリスト/新規投稿リストを出力してみるという記事を参考に
タグクラウドを設置しましたが、新規投稿リストはスペース的な問題で置けずじまいでした。
今サイドバーにあるリストはそちらとは別のChris Moyer’s Ramblingsさんの
＜Put Tumblr on Your Site via Javascript＞という記事で紹介されているスクリプトを利用してみてます。
今のところいい調子。
そういうことで設置方法とか仕様とかを覚書。
【目次】
1．スクリプトの設置
1.) 基本は本家さんのコードをそのまま使用。
まずjQueryが必要なので例によってGoogle AJAX APIから持ってきます。
そしたら<head>内にコードと一緒に読み込み。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript">
function tumblr(resp) {
var posts = resp.posts;
$('#blog .loading').replaceWith('<ul/>');
$ul = $('#blog ul');
for (var i=0; i<posts.length; i++) {
var p = posts[i];
var title = p['regular-title'] || p['link-text'] || null;
if (title)
$ul.append('<li><a href="'+p['url']+'">'+title+'</a></li>');
}
}
</script>
2.) 次に<body>内へ移動してリストを設置したい場所に以下のソースを記述。
<div id="blog">
<h2>My Blog</h2>
<span class="loading">Loading...</span>
</div>
2行目はお好みで「最近の投稿」とか「新規投稿リスト」とかに変更。
置き場所ですがテーマによってはサイドバーにプロフィールや固定ページリンクとか、それ用のボックスがあるので
面倒なときは使わないボックスを乗っ取っとるか、コピペして流用するのが早いかもしれませんです。
※このサイトで実際に書いてるソース。
<div class="side last">
<div id="blog">
<h3>Recent posts</h3>
<span class="loading">Loading...</span>
</div>
</div>
3.) 最後に↑のソースの下にでも以下のスクリプトを設置したら出来上がり。
<script src="http://＊＊＊＊＊/api/read/json?callback=tumblr&num=10" type="text/javascript"></script>
「http://＊＊＊＊＊/」にはサイトのURLを、「num=」の数値で表示する記事数を設定できます。
2．仕様のようなものと見た目のカスタマイズ
2-1. 表示されるポストタイプ
- テキスト投稿
- リンク投稿
この二つのポストタイプ以外は新着記事リストに反映されません。
Tumblrの使い方に合わせて設置した方が良さそう。
2-2. リスト全体のデザイン調整
リストは箇条書きの<ul>タグで出力されます。先頭に丸が付くアレ。
ここではCSSでこれを画像に変えて、サイドバーの見た目を揃えるためリスト全体をやや左寄せにしてます。
#blog ul {
margin: 5px 0 5px 15px;
padding: 0.6em 5px;
list-style-image : url(画像URL);
}
あとそのためのアイコン素材はこちらからお借りしました。
—————————————————
特別ファイルをアップロードしなくても記事リストを表示できるので、手間が掛からないという点でこれはいいな～と思います。
冒頭のMach3.laBlogさん作成のライブラリをお借りしてて、
それでタグリストと合わせて新着記事も表示できるんですが、取り敢えず実験的に。
そんなこんなで新着記事リストを置くカスタマイズでした。
- posted by chips-tips
- Tags: # JavaScript # tumblr # カスタマイズ # jQuery
