Tumblr サムネイル付関連記事を表示する その2

Tumblrでサムネイル付関連記事を表示する方法を紹介する。

Install - tumblr-in-link - How to install In-Link - In-Link: Display Your Tumblr Related Posts - Google Project Hosting

Tumblrユーザーではお馴染みの関連記事を表示するサービスであるが、「version 2.0」を利用することで、サムネイル付で表示することが可能になる。勿論、レスポンシブ対応である。

表示例 - パソコンの場合
116038262453_02665e3048_o.png

表示例 - スマホの場合
216036316564_2281262545_o.png

設置コード (事例)

{block:PermalinkPage}

<!-- 関連記事 開始 -->
{block:HasTags}
<h3 style='margin:1.5em 0 1em;'>関連する記事</h3>
<!− Start In-Link widget −>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://tumblr-in-link.googlecode.com/svn/branches/Version 2.0/js/tumblr-in-link.2.0.js?num=10&len=60&css=dark&title=&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<!− End In-Link widget −>
{/block:HasTags} 
<!-- 関連記事 終了 -->

{/block:PermalinkPage}

レイアウトのカスタマイズはCSSで行う。今回は、150x250枠に150x150のサムネイルを表示する。当ブログでは、”text”と”video”しか利用していないが、videoのサムネイルが150x150に対応していないので別途独自にサムネイルを用意した。 (←文中の数値の単位はピクセル)

CSS (事例)

#tumblrinlink {
    border-top: none !important;
    padding: 0 !important;
}
#tumblrinlink #inlink-title {
    visibility: hidden !important;
    display: none !important;
}
#tumblrinlink ul#inlink-list {
    margin: 0 !important;
    padding: 0 !important;
}
#tumblrinlink #inlink-logo {
    clear: both !important;
    padding-top: 5px !important;
}
#tumblrinlink li.inlink-item p {
    height: 90px !important;
    font-size: 95% !important;
    font-weight: normal !important;
    line-height: 1.4em !important;
}
li.inlink-item {
    display: block !important;
    float: left !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    height: 250px !important;
    border: none !important;
    padding: 0px !important;
    width: 150px !important;
    position: relative !important;
    overflow: hidden !important;
}
li#text.inlink-item img {
    height: 150px !important;
    width: auto !important;
    max-height: 150px !important;
    max-width: 800px !important;
}
li#text.inlink-item a:hover img {
    opacity: 0.75 !important;
}
#tumblrinlink a, .ninja-recommend-block a, #tagCloud a {
    color: #222 !important;
}
#tumblrinlink a:hover, .ninja-recommend-block a:hover, #tagCloud a:hover {
    color: #2a8998 !important;
}
li#video.inlink-item {
    background: url("http://static.tumblr.com/k7wp1u5/us8nkeh9u/film.png") no-repeat 0 0 transparent !important;
}
li#text.inlink-item {
    background: none !important;
}

見栄えはよくなるが、当然のことながらサムネイル画像は単に縮小して表示しているだけなので、そのへんは頭に入れておいたほうがよいだろう。

Tumblr サムネイル付関連記事を表示する その1: Jkun Blog
Tumblr サムネイル付関連記事を表示する その2: Jkun Blog

admin
カテゴリ:ブログサービス
タグ:tumblr
2015/02/27 01:02 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ