ようこそゲストさん

ITメモ

     

トラックバック先のサイトをサムネイル画像で表示させたい

はてブ情報 はてブに登録 はてブ数
トラックバックを送信してもらったサイトをサムネイル表示するようにadiaryを改造する方法をご紹介します。

【表示例】


今回はサムネイル作成にHeartRails Captureを利用させていただきご説明しますが、その他のサムネイル作成サービスを利用することもできます。興味のある方はこちらから探してみてください。

adiary本体を一部変更を加えますので、作業の前に必ずバックアップをとってから作業してください。
失敗した場合、adiaryが動かなくなる場合もあります。
また、動作に関する一切の保証、責任は負いませんのでご了承ください。
adiary Version 1.44 で動作確認をしております。その他のバージョンは未確認です。

【目次】

1.準備

「_main.html」と「_main_onelog.html」を編集します。
FTPソフトでサーバに接続し、「/diary.user.skel/」ディレクトリに「_main_onelog.html」が存在するか確認します

1−1.存在する

「/diary.user.skel/_main.html」
「/diary.user.skel/_main_onelog.html」
の2ファイルをパソコンにダウンロードします

1−2.存在しない

「/diary.skel/_main.html」
「/diary.skel/_main_onelog.html」
の2ファイルをパソコンにダウンロードします

2.「_main.html」を編集する

「_main.html」をテキストエディタを開きます。
125行目付近の
			<a class="switch" href="javascript:change('tbe', '<@idx>');"><span class="<@tbe_sw>" id="<@idx>a">▼</span></a> 
			<span class="title"><a href="<@t2.url>" rel="nofollow" title="<@t2.excerpt>"><@if(t2.title eq '', "(no title)", t2.title)></a></span> 
			<@if(t2.blog_name, '<span class="blog_name">' . t2.blog_name . '</span>')>
			<@if(t2.author, #' <span class="author"><@t2.author></span>')>
			<@ifexec(s.disp_excerpt, begin)><div id="<@idx>" class="excerpt"><@t2.excerpt></div><$end>
			</li>
		<$end>

			<a class="switch" href="javascript:change('tbe', '<@idx>');"><span class="<@tbe_sw>" id="<@idx>a">▼</span></a> 
			<span class="title"><a href="<@t2.url>" rel="nofollow" title="<@t2.excerpt>"><@if(t2.title eq '', "(no title)", t2.title)></a></span> 
			<@if(t2.blog_name, '<span class="blog_name">' . t2.blog_name . '</span>')>
			<@if(t2.author, #' <span class="author"><@t2.author></span>')>
			<@ifexec(s.disp_excerpt, begin)><div id="<@idx>" class="excerpt">
			<img src="http://capture.heartrails.com/90x90/border?<@t2.url>" style="float: left;">
			<@t2.excerpt>
			<div style="clear: both;"></div>
			</div><$end>
			</li>
		<$end>
に書き換え保存します。

3.「_main_onelog.html」を編集する

「_main_onelog.html」をテキストエディタを開きます。
156行目付近の
			<a class="switch" href="javascript:change('tbe', '<@idx>');"><span class="<@tbe_sw>" id="<@idx>a">▼</span></a> 
			<span class="title"><a href="<@t2.url>" rel="nofollow" title="<@t2.excerpt>"><@if(t2.title eq '', "(no title)", t2.title)></a></span> 
			<@if(t2.blog_name, '<span class="blog_name">' . t2.blog_name . '</span>')>
			<@if(t2.author, #' <span class="author"><@t2.author></span>')>
			<@ifexec(s.disp_excerpt, begin)><div id="<@idx>" class="excerpt"><@t2.excerpt></div><$end>
			</li>
		<$end>

			<a class="switch" href="javascript:change('tbe', '<@idx>');"><span class="<@tbe_sw>" id="<@idx>a">▼</span></a> 
			<span class="title"><a href="<@t2.url>" rel="nofollow" title="<@t2.excerpt>"><@if(t2.title eq '', "(no title)", t2.title)></a></span> 
			<@if(t2.blog_name, '<span class="blog_name">' . t2.blog_name . '</span>')>
			<@if(t2.author, #' <span class="author"><@t2.author></span>')>
			<@ifexec(s.disp_excerpt, begin)><div id="<@idx>" class="excerpt">
			<img src="http://capture.heartrails.com/90x90/border?<@t2.url>" style="float: left;">
			<@t2.excerpt>
			<div style="clear: both;"></div>
			</div><$end>
			</li>
		<$end>
に書き換え保存します。

4.サーバへアップ

FTPソフトでサーバの「/diary.user.skel/」ディレクトリに「_main.html」と「_main_onelog.html」の2ファイルをアップロードします。

5.動作確認

トラックバックのある記事にアクセスし動作を確認します。
はじめて表示する場合、数分間画面が表示されませんのでしばらく待ってからアクセスして画像が表示されるか確認してください。

ご参考:サムネイル画像をカスタマイズする

上記の説明では90×90ピクセルのサムネイル画像をボーダー付きで表示する設定となっています。
<img src="http://capture.heartrails.com/90x90/border?<@t2.url>" style="float: left;">
という部分がサムネイル画像を設定している部分になります。

HeartRails Captureの設定例を参考にお好みの画像に変更してみてください。


以上で作業完了です。
うまく動作しましたか?うまくいかない場合は、はじめから確認してみてくださいね。
  • adiaryのトラックバックにサムネイル画像を表示させるようにしてみた ひとぅブログ ひとぅ
    「サムネイルを作成するウェブサービス」という記事を書いた後に、ふと思いついて勢いでadiaryを改造してみました。トラックバックを送信してくれたサイトのサムネイル画像を90×90ピクセルで表示しています。ちょっとしたアクセントになるのでおもしろいです。今回...