「ShareHTMLでリンクタグを作成する際に加えている一工夫、から一手間なくす」を実践してみた

sharehtml_3_wa

ブックマークレットのカスタマイズに凝ってます@delaymaniaです。

昨日書いたShareHTMLのカスタマイズ記事からさらに進化しました!

あらすじ

ちょっと複雑になってきたのでまずはあらすじを。

僕が元々書いた記事がこれ。ShareHTMLというブックマークレットをカスタマイズする記事です。

たまたま上記の記事と同じ日におつぱし(@OZPA)が書いた記事がこれ。

扱ったネタは同じShareHTMLについてなんですが、彼の記事の視点がすごく良くて早速マネしました。
で、そのやり方をマネして実践してみましたよ、っていう記事がこれ。

これで良い具合になった、と思ったらさらにみわさん(@3_wa)からの追撃が。

ここで紹介されてる方法を実践すると、おつぱしの提案した方法をさらにワンステップ少なくすることができます!これはすごい!!

記事のサムネイルをピックアップしたとき用ShareHTMLのカスタマイズ

というわけでさらにカスタマイズしました。

<div class="shareHtmlFrame">
<span class="shareThumb">
<a href="${posturl}" target="_blank"><img src="${memo}" width="200" height="" class="shareThumbImg" border="0" style="float:left;" alt="" /></a></span>
<span class="shareTitle"><a href="${posturl}" target="_blank">${posttitle}</a>
</span>
<span class="shareHatena">
<a href="http://b.hatena.ne.jp/entry/${posturl}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/${posturl}" alt="" /></a>
</span>
<span class="sharePostselect">${postselect}</span>
<br style="clear:both;" /><br>
</div>

例によって見づらいので改行入れてますが、上記が今回のソースです。

▼修正したポイントはここ。imgタグのsrc=""に「${memo}」と入れて、高さの指定をしない。

みわさんの記事でも書かれてますが、ShareHTMLメーカーで作る際に「コメントを囲むHTMLタグを入力して下さい(任意)」の欄は空欄にしてください。

是非皆さんもカスタマイズしてみてください。

最後に

ブロガーさんの連携すごすぎ。三人寄れば文殊の知恵とはよく言ったもので、たった1ネタ投下しただけでここまで広がるんですね。

一気にブログがカッコよくなりました!おつぱしとみわさんに感謝!!

そして、地味にCSSもいじりました。興味ある方はstyle.css覗いていってください。