ITメモ

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

【表示例】


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

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

【目次】

• １．準備
  • １−１．存在する
  • １−２．存在しない
• ２．「_main.html」を編集する
• ３．「_main_onelog.html」を編集する
• ４．サーバへアップ
• ５．動作確認
• ご参考：サムネイル画像をカスタマイズする

■ １．準備

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

１−１．存在する

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

１−２．存在しない

「/diary.skel/_main.html」
「/diary.skel/_main_onelog.html」
の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>

に書き換え保存します。

■ ３．「_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>

に書き換え保存します。

■ ４．サーバへアップ

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

■ ５．動作確認

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

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

上記の説明では90×90ピクセルのサムネイル画像をボーダー付きで表示する設定となっています。

<img src="http://capture.heartrails.com/90x90/border?<@t2.url>" style="float: left;">

という部分がサムネイル画像を設定している部分になります。

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


以上で作業完了です。
うまく動作しましたか？うまくいかない場合は、はじめから確認してみてくださいね。