スポンサーリンク

自分のブログ記事へのリンクをアイキャッチ画像付きで作成する方法(改)

【この記事を読むのに必要な時間は約 6 分です。】


今回はWordPressでブログを書いている方向けに。

origin_84030742

記事の中で他のページを紹介したい場合に、ShareHtmlという便利なブックマークレットがあります。

このブックマークレットを使うと、以下のようにそのページのスクリーンショット付きのリンクを作成することができます。

AppHtmlに続きまして他のBookmarkletも順次リニューアル中です。 今回はShareHtmlとFo…

スポンサーリンク

自ブログの過去記事へのリンク作成に使うための改造方法

ShareHtmlは、単純にテキストだけでリンクするよりも見た目も良いし、リンク先をイメージしやすいので非常にお気に入りのブックマークレット。使っていない方は是非使うと良いです。

そんな折、ShareHtmlを改造して、画像部分をスクリーンショットではなく、その記事のアイキャッチ画像にするための方法が紹介された記事を見つけました。

ShareHtmlという便利なブックマークレットがあります。ブログなんかで何かしらのリンクを紹介したい場合、画像付きでいい感じにリンクを作ってくれるっていうものですね。 ShareHtmlとFocu...

自分のブログ記事へのリンクにしか使えないようですが、スクリーンショットよりアイキャッチ画像の方が分かりやすいので、早速自分のブログ記事用のブックマークレットを作成してみました。それを利用したのが以下のリンクです。

1年前のこと思い出せますか? – Evernoteにライフログ vol.0 | MasaLog

毎日を記録する12のノートブック – Evernoteにライフログ まとめ | MasaLog

なんか、、、変。
私のWordPressの設定か利用方法に問題があるのかもしれませんが、アイキャッチ画像に利用している縦長・横長の画像をそのまま縮小されてしまったので、不格好になってしまいました。

WordPressでは、アップロードした画像に対して正方形に切り抜いた(トリミングした)画像が用意されています。その画像を使うにはどうしたらいいんだろう。。
参考:画像ファイルの大/中/サムネイルのサイズの設定 – WordPressの使い方

試行錯誤して紹介いただいていた方法をカスタマイズしました。その結果が以下のリンク。いい感じになりました。

1年前のこと思い出せますか? – Evernoteにライフログ vol.0 | MasaLog


毎日を記録する12のノートブック – Evernoteにライフログ まとめ | MasaLog

以下では、私が行った(再)改造の方法をご紹介します。元サイトの説明もご覧ください。

アイキャッチ画像を利用するためのShareHtmlの(再)改造方法

ショートコードを記述

まず、利用しているテーマフォルダーにある、fuctions.phpに以下を追記します。このコードを元々ご紹介いただいたものから変更しています。

/* アイキャッチ画像を渡す */
function get_my_thumbnail( $atts, $post_url = null )
{
	$src_info = wp_get_attachment_image_src(get_post_thumbnail_id(url_to_postid($post_url)),'thumbnail');
	return $src_info[0];
} 
add_shortcode('my_thumbnail', 'get_my_thumbnail');

ShareHtmlのブックマークレットを改造

次にShareHtmlのブックマークレットを改造します。こちらは、元サイトと変更ありません。ShareHtmlメーカーでお好みの書式でブックマークレットを作成した後、コードを同じように変更してください。

ちなみに私が利用しているブックマークレットは以下です。画像サイズを変えて、大中小の3パターン作っています。見栄えを考慮して微修正も加えています。(“style%3D”margin-right%3A10px”をimgタグ内に追記)

javascript:(function(){var d=document,e=d.createElement('script'),url='http://dl.dropbox.com/u/2271551/javascript/sharehtml.js';if(!url.match(/\?/))url+='?t='+(new Date()).getTime();url+='&out='+'preview'+'&cnt='+'100'+'&sts='+'<br><span style%3D"color%3A %23808080%3Bfont-size%3A 80%25%3B">'+'&ste='+'</span>'+'&cts='+'<br><strong>'+'&cte='+'</strong>'+'&fmt='+'<a href%3D"%24%7Bposturl%7D" target%3D"_blank" rel%3D"nofollow"><img class%3D"alignleft" align%3D"left" border%3D"0" src%3D"%5Bmy_thumbnail%5D%24%7Bposturl%7D%5B/my_thumbnail%5D" alt%3D"" width%3D"100" height%3D"100"  style%3D"margin-right%3A10px" /></a><a style%3D"color%3A%230070C5%3B" href%3D"%24%7Bposturl%7D" target%3D"_blank" rel%3D"nofollow">%24%7Bposttitle%7D</a><a href%3D"http%3A//b.hatena.ne.jp/entry/%24%7Bposturl%7D" target%3D"_blank"><img border%3D"0" src%3D"http%3A//b.hatena.ne.jp/entry/image/%24%7Bposturl%7D" alt%3D"" /></a>%24%7Bpostselect%7D%24%7Bmemo%7D<br style%3D"clear%3Aboth%3B" /><br>';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})(); 
スポンサーリンク

まとめ

ShareHtmlは多用しているブックマークレット。ただ、スクリーンショットはインパクトが弱いので、自分のブログ記事限定でもアイキャッチ画像が使えるようになり非常にいい感じになりました。ショートコードを利用するとか、まったく発想になかったので勉強にもなりました。私もオリジナルで何かできないか、考えてみたいと思います。

photo credit: Amin Allen Tabrizi via photopin cc

MasaLogが気に入ったら
いいね ! しよう

Twitter で

更新情報はこちらからどうぞ!

スポンサーリンク
スポンサーリンク