ブックマークレット「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;}
あとは作成していたブックマークレットを編集してコードを張り付ければ完成です。
今回参考にさせて頂いたサイト
