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

Tumblrで関連記事をサムネイル付きで表示することにした。

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

↑ここに設置方法が書いてある。サムネイル付きは、”version 2.0”を利用すればよい。当ブログの実際の設置例は以下のとおり。

表示例
16133903668_43b4d4c123_o.png

HTML編集で貼り付けたコード

{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=5&len=60&css=dark&title=&tags={block:Tags}{Tag},{/block:Tags}" type="text/javascript"></script>
<!− End In-Link widget −>
{/block:HasTags} 
<!-- 関連記事 終了 -->

{/block:PermalinkPage}

カスタム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 {
    margin-right: 10px !important;
    margin-bottom: 10px !important;
}
#tumblrinlink li.inlink-item p {
    height: 70px !important;
}

表題を日本語にすると文字化けするため別途個別に表示してオリジナルは非表示にする。
タイトルが尻切れにならないように調整する。
ロゴが回りこむのを禁止する。

スクリプトのパラメータはInstall - tumblr-in-linkの”Options”を参考にされたし。

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

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

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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