ガジェニュー

~iPhone・格安スマホとか~

サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

      2017/04/03    後で読む

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「ShareHtmlメーカー」のカスタマイズをしましたのでメモしておきたいと思います。こちらのブックマークレットはかなり便利で、リンクを貼りたいページの上でブックマークレットを起動させるだけでOK。後はWordPressにペタリ。ということでかなり重宝しています。サイトをいじるに当たりちょっとデザインを変更してソースもスッキリさせたいなぁということでカスタマイズをしていきます。

SPONSORED LINKS

「ShareHtmlメーカー」のカスタマイズ

自分でオリジナルのClassを設定することで、後々のカスタマイズも楽になるかと主ますので使っている人は試してもいいかも。ちなみにどんな感じに感じしたかは下記を御覧ください。

びふぉー

ガジェニュー

コード

<a href="http://smart-phone.783783783.com/" target="_blank">
<img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?http://smart-phone.783783783.com/" alt="" width="150" height="130" />
</a>
<a style="color:#0070C5;" href="http://smart-phone.783783783.com/" target="_blank">ガジェニュー</a>
<a href="http://b.hatena.ne.jp/entry/http://smart-phone.783783783.com/" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/http://smart-phone.783783783.com/" alt="" />
</a>
<br style="clear:both;" /><br>

こんな感じの表示なのですが、コンテンツとして独立させたいのでいつもどおり枠を付けてみようと思います。このへんは個人の感覚なので皆さんの好きなようにしたらいいと思いますよ。

あふたー

コード

<div class="shbox">
<span class="sThumb">
<a href="http://smart-phone.783783783.com/" target="_blank"><img src="http://capture.heartrails.com/150x130/shadow?http://smart-phone.783783783.com/" width="150" height="130" class="shThumbImg" border="0" style="float:left;" alt="" /></a></span>
<span class="shTitle"><a href="http://smart-phone.783783783.com/" target="_blank">ガジェニュー</a></span>
<span class="shHatena"><a href="http://b.hatena.ne.jp/entry/http://smart-phone.783783783.com/" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/http://smart-phone.783783783.com/" alt="" /></a></span>
<span class="shPostselect"></span><span class="shMemo"></span>
<br style="clear:both;" /><br></div>

はい。このような形になりました各項目にClassが設定されるようにブックマークレットがカスタマイズされています。ブックマークレットで出力されるコードの変更方法は次に書きます。

ShareHtmlメーカーカスタマイズの手順

1.下記のサイトにアクセスします。

ShareHtmlメーカー

2.画像の矢印の部分にカスタマイズしたコードを入力し、ブックマークレット作成
sshcap
ここに下記を追加

<div class="shbox"><span class="sThumb"><a href="${posturl}" target="_blank"><img src="http://capture.heartrails.com/150x130/shadow?${posturl}" width="150" height="130" class="shThumbImg" border="0" style="float:left;" alt="" /></a></span><span class="shTitle"><a href="${posturl}" target="_blank">${posttitle}</a></span><span class="shHatena"><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="shPostselect">${postselect}</span><span class="shMemo">${memo}</span><br style="clear:both;" /><br></div>

これで入力したコードからブックマークレットを作成してくれますので、こちらをブックマークに入れておきます。

注意事項
ちょっとはまってしまったのですが、こちらに入力するコードに改行が含まれている場合、きちんとブックマークレットが動きません。これがわかるまで10分以上悩んでしまった。テキストエディタ等でわかりやすくしてからいじる際には要注意です。

以上でShareHtmlメーカーのカスタマイズは完了です。
下記が見やすく整形したコードです。コピペの際は上のコードを使ってくださいね。

<div class="shbox">
<span class="sThumb">
<a href="${posturl}" target="_blank"><img src="http://capture.heartrails.com/150x130/shadow?${posturl}" width="150" height="130" class="shThumbImg" border="0" style="float:left;" alt="" /></a>
</span>
<span class="shTitle">
<a href="${posturl}" target="_blank">${posttitle}</a></span><span class="shHatena"><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="shPostselect">${postselect}</span>
<span class="shMemo">${memo}</span>
<br style="clear:both;" /><br></div>

後は、style.cssで各クラスの定義をしてあげればOKです。今回は「shbox」しかいじりませんでした。他の部分は将来のデザインの変更も考えて入れておきます。

style.cssには下記を追加しています。

/*-----------------------------
ShareHtmlメーカーのカスタマイズ
------------------------------*/
.shbox {
	line-height: 1.8em;
	border: 1px dashed #ff1493;
	border-radius:10px;
	padding: 10px; 
	margin-bottom: 10px;
	width: auto;
}

いつも通り囲みました。今回は柔らかい感じでドットにしてみましたよ。

内部リンク用カスタマイズ

今書いたのは、別窓でサイトを開く「外部リンク」用のブックマークレットの作り方でした。サイト内の過去記事などにリンクを貼る際は同じ窓でサイトを移動できたほうが親切ですのでこちら用のブックマークレットも作成しておきます。

上のコードのaタグ内にある「target=”_blank”」を消せばOK。貼り付け用コードはこちら。

<div class="shbox"><span class="sThumb"><a href="http://www.htmq.com/style/border.shtml" ><img src="http://capture.heartrails.com/150x130/shadow?http://www.htmq.com/style/border.shtml" width="150" height="130" class="shThumbImg" border="0" style="float:left;" alt="" /></a></span><span class="shTitle"><a href="http://www.htmq.com/style/border.shtml">border-スタイルシートリファレンス</a></span><span class="shHatena"><a href="http://b.hatena.ne.jp/entry/http://www.htmq.com/style/border.shtml" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/http://www.htmq.com/style/border.shtml" alt="" /></a></span><span class="shPostselect"><br><span style="color: #808080;font-size: 80%;">dotted ...</span></span><span class="shMemo"></span><br style="clear:both;" /><br></div>

そうするとこうなります。

これで内部リンク用もばっちりです。はてブのみ外部サイトですのでそこは消してませんよ。ちなみに、classを新しく定義してあげれば外部リンクと内部リンクの見た目も変えられます。自分的には不要と判断してこのサイトではやってませんが。

以上です。

長々と書いてしまいましたがおしまいです。

コードをいっぱい見ているとつかれますね。

てな感じで。

今回参考にさせていただいたサイト
http://delaymania.com/201210/blog/sharehtml_customize/

 - WordPress , ,

  関連記事

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

sicon_1r_192_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

icon_1r_192
【アクセス数報告】2015年4月のPVとアフィリエイトの収益とか

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

sum
Gush2カスタマイズ~背景色がPCだけ反映されない~

いつもはstingerを使用しているのですが、運営しているサイトが全部「STIN …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です