ShareHTMLメーカーをカスタマイズ!解説とコードも載せちゃいます!

GooVwkEVe5F2oGN1408900155_1408900231

こんにちは。SeLe(@SeLe_wave)です。
リンクを貼る際に役に立つ超有名プラグイン『ShareHTMLメーカー』のカスタマイズが出来ましたので、そこで学んだコードと解説をして行きたいと思います。
載せているコードを参考に、自分だけのカスタマイズをしてみてください。

ShareHTMLメーカー

こちらのサイトの(@hiro45jp)さんが作成したブックマークレット。
ShareHTMLメーカー。ブロガーさん達の中では定番と言っていいほどのものです。

デフォルトで使っても問題はないのですが、折角なのでオリジナリティを出すために、自分のサイトだけのリンクを作ってみましょう。
こちらのサイトを参考にして、初心者でもなんとか作ってみました。

ShareHTMLメーカーのデフォルトコード

左サムネイル大のデフォルトコード

[html]
<a href="${posturl}" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150×130/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>
[/html]

デフォルトのコードがHTMLとなっているので、これをCSSでカスタマイズ出来るように変更していきます。
上記のコードのままリンクを作成すると、以下のようになります。

【楽天市場】Shopping is Entertainment! : インターネット最大級の通信販売、通販オンラインショッピングコミュニティ

私の元々のCSSが悪いのも相成って、見事ぐちゃぐちゃです…

ShareHTMLメーカーのショートコード

デフォルトのコードを読めばなんとなくで理解できそうですが、ここで一度ShareHTMLメーカーの特殊なショートコードをまとめてみましょう。

${posturl} リンク元URLを抽出
${posttitle} リンク元タイトルを抽出
${postselect} リンク元で選択した文字を抽出
${memo} ポップアップ時入力したメモを抽出

ショートコードはこの4つだけ使います。

そのほか、みて解りにくいコードは
サムネイル抽出コードの↓ですね。
[html]
<img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150×130/shadow?${posturl}" alt="" width="150" height="130" />
[/html]

こちらは、HeartRails Captureというサイトの機能を使って、サムネイルを自動生成し、抽出しているというものです。URL末尾にサムネイルを作成したいサイトのURLを追加すれば、自動で生成できるという優れものです。

ShareHTMLをCSSでカスタマイズ

HTMLで出来ているコードをCSSで編集するために、すべての部分をばらしてClass名を付けて、後からでも編集できるようにしていきます。

[html]
<div class="shareHtmlFrame"><span class="shareThumb"><a href="${posturl}" target="_blank"><img src="http://capture.heartrails.com/150×130/shadow?${posturl}" class="shareThumbImg" alt="" width="150" height=""></a></span><span class="shareTitle"><a href="${posturl}" target="_blank">${posttitle}</a><a href="http://b.hatena.ne.jp/entry/${posturl}" target="_blank"><img style="margin:0; padding:0; vertical-align:text-top" src="http://b.hatena.ne.jp/entry/image/${posturl}" alt=""></a></span></div>
[/html]

このClass達に要素を付け加えていきCSSを以下のようにしました。

[css]
.shareHtmlFrame{
-moz-box-sizing: border-box; /* IE */
box-sizing: border-box;
width: 100%;
background-color: #eef1f7;
border: 1px solid #000000;
border-radius: 10px; /* css3 */
-moz-border-radius: 10px; /* FireFox */
-webkit-border-radius: 10px; /* IE */
margin: 20px 0;
padding: 10px;
overflow: auto;
}

.shareThumb {
float: left;
margin: 0;
padding: 0 5px 0 0;
}
img.shareThumbImg {
margin: 0;
padding: 0;
vertical-align: text-top;
}

.shareTitle {
font-size: .9em;
font-weight: bold;
display: inline;
}
[/css]

shareHtmlFrameで外枠を作り、中にshareThumbでサムネイル用の箱、shareThumbIMGでサムネイルを入れて、floatで横にタイトルを並べました。

どうしてもはてなブックマークの画像だけはmarginpaddingが上手く行かなくて諦めてHTMLの中に直接挿入してしまいましたが、これで上手く形にすることができました。

文章引用とメモは、はてブ画像が上手くいかない時点で諦めてしまいましたが、上記のショートコードを使うことで簡単に入ると思います。
たぶん、CSSの優先順位の問題?それっぽいものは見つけたのですが「それを変えるなんてとんでもない!」ってくらい、頻繁に使っているところなので後回しにしてしまいました。

まとめ

やっぱりCSSは初めが肝心なのがよくわかりました。
なんとか少しづつ知識は付いてきているので、自作テーマを作っていけたら…と思っています。
兎にも角にも、超初心者の方々はShareHTMLメーカーを使いこなしてください!

以上、SeLe(@SeLe_wave)でした!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする