ブックマークレット「ShareHtml」をちょっとカスタマイズしてみました。

まずはソースコード表示用に「SyntaxHighlighter Evolved」を導入

「ShareHtml」をカスタムするのに使ったソースコードを紹介したいって事でまずはWordPressプラグインの「SyntaxHighlighter Evolved」を導入してみました。

特に設定なんかをしない場合はダッシュボードのプラグイン検索からインストールしたら後は、
[表示させたい言語]コード[/表示させたい言語]と書けば自動で書きだしてくれるようです。


って事でさっそく使ってみたいと思います。

「ShareHtml」のコード書換え

まずは書式テンプレート選択した後に出てくる「以下を直接カスタマイズすることもできます(但し ‘ は禁止文字)」の所のコードをコピーして来てそれを元にカスタマイズしてみようと思います。

元のコード

<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で囲ってクラスを足してCSSで枠線をつけてみました。

<div class="sharehtml">
<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 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>
${memo}${postselect}<br style="clear:both;" /><br>
</div>

CSSはこんな感じです。

.sharehtml { border: dotted #ccc 1px; }
.sharehtml:after {content: ""; display: block; clear: both;}

ShareHtml2013-04-01

あとは作成していたブックマークレットを編集してコードを張り付ければ完成です。


今回参考にさせて頂いたサイト