memo ： 5月半ばまで停滞してます/ 予定：photoset云々、ページ作成

Sep 9th, 2011

Tumblrに関連記事を表示させてみた

関連記事表示サービスを使わずに表示させたいということで。
駄目もとでスクリプト探したんですが普通にあるもんです。もっとありそうですが、取り敢えずこの二つ。


今回はIn-Linkを設置。Tumblr用に表示が特化したスクリプトです。(↓はcssタイプ「complete」)

     

こちらはGoogle Codeでも配布・解説されてます。


その設置方法とカスタマイズについて備忘録。



【目次】

  1. In-Linkのバージョンについて
  2. In-Linkの設置方法と設定
  3. cssオプション(スタイル)の種類と表示内容
  4. CSSで表示をカスタマイズ




1．In-Linkのバージョンについて

先にこのスクリプトですがバージョン1.0と2.0の二つが存在します。
タグを元に関連記事を表示している仕様そのものに大きな違いはありませんが、
表示スタイルが若干異なったり2.0ではオプション設定とCSSにいくつか項目が追加されてます。

特に2.0ではリアクション数がハートマーク＋数字で表示されます。
(※ユーザー名は表示されません。)




当サイトではバージョン1.0を設置してるので主にそっちに重点を置いて紹介。





2．In-Linkの設置方法と設定

2-1. スクリプトの設置

動作にはjQueryが必要です。例によってGoogle AJAX APIにお世話になります。
既にテーマ内にjQueryがある場合、最低バージョン1.5.0以上でないと動作しないので注意。

関連記事リストを置くわけなので、パーマリンク内に表示されるようTumblr独自タグを使用して
{block:Posts} … {/blockPosts}内に以下を記述。

{block:Permalink}
  {block:HasTags}
      <!-- Start In-Link widget -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
      <script src="http://tumblr-in-link.googlecode.com/svn/trunk/js/tumblr-in-link.1.0.js?num=5&len=60&css=dark&title=Some Related Posts&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
      <!-- End In-Link widget --> 
  {/block:HasTags} 
{/block:Permalink}


※バージョン2.0を使う場合は5行目

http://tumblr-in-link.googlecode.com/svn/trunk/js/tumblr-in-link.1.0.js

を、以下に差し替えてください。

http://tumblr-in-link.googlecode.com/svn/branches/Version 2.0/js/tumblr-in-link.2.0.js




2-2. オプション設定について

オプション設定は同じく5行目の各値で変更・追加できます。

  • num ： 表示する関連記事数。デフォルトは8。
  • len ： 表示する記事タイトルorキャプションの文字数。デフォルトは60。
  • css ： 表示スタイルの設定。「simple」 「complete」 「dark」 「light」 「shadow(ver.2.0のみ)」の5タイプ。
    (詳細は項目３で)
  • title ： ウィジェットのタイトルを設定。いわゆる”関連記事”にあたる部分。デフォルトは「Related Posts:」
  • type ： 特定のポストタイプだけを表示したい場合に設定。Tumblrのポストタイプ全てから選択可能。
    値はtext、quote、audio、photo、video、link、answer。



※以下はver.2.0、cssタイプ「shadow」で追加された設定。

  • size ： 画像と記事名を含めたサムネイルのサイズ。75、100、250から選択可能でそれぞれpx単位の正方形で表示される。デフォルトは100。
  • imageurl ： 対象の記事に画像が無い場合、代わりにサムネイルとして表示する画像ＵＲＬを指定できる。






3．cssオプション(スタイル)の種類と表示内容

【simple】

次の例completeの冒頭アイコンが無くなり、<ul>タグを使ったときのような箇条書きで表示されます。
ある程度使用テーマのCSSに左右されるので注意。


【complete】

     

simpleと同じく箇条書きですが、冒頭にポストタイプのアイコンが表示されます。



【dark】、【light】

     

darkは背景色が明るいときに、逆にlightは背景色が暗めのときに使うと便利。
このタイプはどちらも表示がサムネイルになります。
テキストやリンク投稿はそれぞれ専用のアイコン画像が表示されるだけになるので、少し分かりにくいかも。
画像ポストが多めのときに使えそうなタイプ。



【shadow】

     

バージョン2.0のみ有効なスタイル。
ポストタイプに関わらず記事中の画像を自動的にクリッピング表示してくれる。(サムネ画像)
shadowのその名の通り、サムネイル画像にドロップシャドウがつく。




4．CSSで表示をカスタマイズ

またこれらの表示を用意されたＣＳＳで、ある程度カスタマイズすることが出来ます。

#tumblrinlink { } 		/* Main div Container */
#tumblrinlink h2 { }		/* Title */
#tumblrinlink a { }		/* Link Style */
li.inlink-item { }		/* List Item (each content is rendered as li) */
li.inlink-item img { display: none; }	/* if you don't want to display images use this */
li.inlink-item p { }		/* The actual title for the link */
#inlink-list { }		/* The ul container */

/* Each li has its own selector for individual styling depending
* on post type. */
li.inlink-item#regular { }
li.inlink-item#link { }
li.inlink-item#quote { }
li.inlink-item#conversation { }
li.inlink-item#video { }
li.inlink-item#audio { }
li.inlink-item#answer { }
.notes { }		/*New in version 2*/


※最後の行はバージョン2.0でのみ有効。



更にこの関連記事表示ウィジェット、カスタマイズページのデザイン設定から簡単にオプション設定を変更できるように、
まるごとテーマに組み込むことが出来るようになってたりします。
それについては本家さんのこちらの記事も参考にどうぞ。



機会があれば冒頭で紹介したmps-devさん作成の＜RelPosts Widget＞も設置してみたいなぁと。




ブログにつける関連記事表示サービスというと、最近はソーシャルボタンや各SNSの反応がセットになってるzenbackや、
サムネイル付きで表示してくれるLinkWithinをよく見かける(気がする)んですが、
こういうTumblr用に特化したスクリプトは嬉しいですね。タグをつける意味も増えて二度おいしい。
画像ポストメインでも使えそうです。




« Prev    Next »
Page 1 of 1

Back to Top