ガジェニュー

~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-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

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

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

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

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

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

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

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

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

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

ana-sum
【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

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

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

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

Loading Facebook Comments ...

Message

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