記事を紹介するブックマークレット「ShareHTML」をカスタマイズしました

sharehtml_customize00.png

ブログを書くにあたり誰かの記事を紹介することが多い@delaymaniaです。

そんなときに「ShareHTML」という超便利なブックマークレットがあるんですが、昨日のAppHTMLのカスタマイズと一緒にこちらもいじってみました。

ブックマークレット「ShareHTML」をカスタマイズする目的

ShareHTMLは記事を紹介するときに使うブックマークレットです。

テキストリンクだけじゃなく、サムネイル画像も引っ張ってこれるので見やすくて超便利なんですよね。

AppHTMLと違ってアフィリエイトリンクじゃないのでバンドマンのブログなどにも是非活用してもらいたいブックマークレットです。

ShareHTMLをカスタマイズする目的は1つだけ。

デザインをCSSで一括変更できるようにしたい

そのために、各項目をspanでくくってclass名をつけていきます。

▼元々使ってたブックマークレットではこんな感じに出力されます。
Evernoteマンの公式テーマソングがついに完成しました!! | delaymania.com

現状でさほど不満はありませんが、後々のためにカスタマイズしていきます。

実際にカスタマイズしてみる

ShareHTMLメーカーでShareHTMLのひな形を作成する

まずはShareHTMLメーカーのサイトへ行きます。

ソースを書き換える

▼こちらが「左サムネイル大 – alignleft」にしたときのデフォルトのソースです。

<a href="${posturl}" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?${posturl}" alt="" width="150" height="130" /></a><a style="color:#0070C5;" href="${posturl}" target="_blank">${posttitle}</a>
<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>
${postselect}${memo}
<br style="clear:both;" /><br>

▼そしてこちらが変更後。

<div class="shareHtmlFrame">
<span class="shareThumb"><a href="${posturl}" target="_blank"><img src="http://capture.heartrails.com/150x130/shadow?${posturl}" width="150" height="130" 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>
<span class="shareMemo">${memo}</span>
<br style="clear:both;" /><br>
</div>


主な変更点は

  • 全体をdivでくくってclass名をつけた
  • 各パーツをspanでくくってそれぞれclass名をつけた
  • imgタグのclass名を変更
  • タイトルのテキストリンクに色を直接指定しないようにして太字に変更した
  • HTML5で廃止される予定のimgタグのalign="left"style="float:left;"に変更

今回のカスタマイズのポイントは、タイトルのテキストリンクに色を直接指定しないようにして太字に変更したことです。

元々は

<a style="color:#0070C5;" href="${posturl}" target="_blank">${posttitle}</a>


となっています。

たとえばサイトのテーマカラーを青系から赤系にしたくなったとしたとき、デフォルトのままのShareHTMLだとaタグに直接リンクの色が指定してあるのであとで変更するのが大変です。
それをCSSの外部ファイルに書いてあげることで、CSSの記述を1か所変更するだけで全記事にいっぺんに適用できます。

あとAppHTMLと同様ですが、imgタグのclass名をユニークなものに変更しました。
デフォルトのままだとAppHTMLもShareHTMLも「alignleft」というclass名なので、別々の処理したいときに困るかなと思ったので。

CSSの外部ファイルにスタイルを書いた場合、RSS配信された記事内では反映されなくなります。RSS配信で反映させたいスタイルはHTMLに直接書き込んでください。

サムネイルの画像の大きさとスタイルを変更する

サムネイル画像の大きさも変えることができます。大きさだけじゃなく、スタイルを変えることもできるので、必要であればいじってみましょう。

僕は画像の大きさやスタイルをデフォのまま使うことにしました。

サムネイルの画像の大きさなどを変更したい方は下記の記事が参考になります。

【参考サイト】

ShareHTMLメーカーでブックマークレットを作成する

あとは先ほどカスタマイズしたソースをShareHTMLメーカーの任意の場所に入れてブックマークレットを作成すればおっけーです。

▼ここに入れます。
Sharehtml customize01

▼こうして完成したブックマークレットでサムネイル付きのリンクを生成したのがこちら。

カスタマイズの際の注意点

AppHTMLの記事でも書きましたが、HTML5で廃止されてるタグを使うのはやめておきましょう。

たとえばRSS配信のことを考えて特別な色を付けたいと思うなら直接styleで色をつけても問題ありませんが、fontタグではなくspanタグを使いましょう。

<!-- 正しい例 -->
<span style="color:#0088cc;">テキストリンク</span>

<!-- 使ってはいけない例 -->
<font color="#0088cc">テキストリンク</font>

最後に

他に僕が良く使うブックマークレットはMacアプリ用のAppHTMLと、あとはMusicHTMLなんですが、これらもカスタマイズして使うつもりです。

皆さんももしデザイン変えたくなったら試してみてください。

ちなみに、AppHTMLのカスタマイズしたときの記事はこちらです。合わせて読んでみてください。