サムネイル画像付きのリンクを簡単に作れるブックマークレット!【ShareHtml】

Anthology~
photo by Adarsh Thakuri

非常に簡単にサムネイル付きのリンクを作れるブックマークレットをご紹介します。何度かお世話になりましたがこれからもっとお世話になりそうですね(笑)とにかく簡単に作成できて見栄えがいいです。

ブックマークレットて何?っという方はこちらをご覧ください。

↓   ↓   ↓

ブックマークレットの意味が今更分かった!導入方法と使い方! – easy and easy

まさしく上にあるようなリンクを手軽に作れてしまうブックマークレットなんです。始めに設定さえしていれば(しかもこれもムチャ簡単!)、この上のようなリンクを5秒くらいで作れてしまう凄いブックマークレットです。設定の方法から、実際の使い方までをご紹介します。

目次:

  1. 「ShareHtml」を設定しブックマックレットを生成する
  2. 「ShareHtml」の使い方!
  3. 「ShareHtml」のテンプレート一覧
  4. 最後に

スポンサードリンク

「ShareHtml」を設定しブックマークレットを生成する

こちらのページにアクセスしてください。

ShareHtmlメーカー

ページに飛ぶと設定画面が現れます。難しそうと感じる方もいるかもしれませんがほんとに簡単!

20140404232933

赤枠で囲んだ部分はそのままでかまいません。青枠で囲ったところからどのようなデザインのリンクを生成するかを設定します。(デザインの種類は記事の最後にサンプルとして載せています)

20140404232247

▼を押すとプルダウンで表示されるので選択するだけです!もうここまでで80%完了!

20140404231609

ここでは「左サムネイル大 – alignleft」を選んでみましょう。
すると空欄だった下のボックスにコードが現れます。
そのすぐ下のボタン「Bookmarkletを生成する」を押しましょう。

20140404235540

すると押したボタンの下に新しくリンクとコードが現れます。

20140405000836

これでブックマークレットは生成されましたので、ブックマークに登録しましょう。
ShareHtml」にカーソルを持っていきブックマークツールバーにドラッグアンドドロップしてください。
右クリックでもブックマークに登録できます。

20140405001611

僕はブックマークツールバーに置いておきますね。

20140405140826

これで準備完了です!

それでは使い方を見てみましょう!これもとっても簡単です!

「ShareHtml」の使い方!

サムネイル付のリンクを生成したいページを表示させます。
そこで先ほどブックマークに登録したブックマークレット「ShareHtml」をクリックします。

20140405141613

するとこんな画面になります。空欄のままOKを押しましょう。

20140405140827

するとウィンドウ上部に生成されたコード。
下部にプレビューが表示されます。

20140405142619

後はこのコードをコピーして、記事本文のリンクを貼りたい場所にペーストするだけです。

実際に張り付けてみるとこんな感じになります

↓   ↓   ↓

ラオス・カンボジアで不発弾などをアクセサリーにアップサイクル!【Purple Buddha Project】 – easy and easy

どうでしょう?本当に簡単に素敵なサムネイル付きリンクを作成できますよね。

作成者の方ありがとうございますm(__)m 感謝!

「ShareHtml」のテンプレート一覧

左サムネイル大 – alignleft

過密な場所でも安らぎの空間を提供するインテリア【HUSH】がかなりオシャレ! – easy and easy

左サムネイル小 – alignleft
【動画まとめ】世界にある珍しい面白スポーツ7選!!「な・なんだこれは!?」順でランキング! – easy and easy

左サムネイル大 – table

片方しかなくなった手袋で可愛いモンスターを作っちゃう!-Glove Monsters- – easy and easy

右サムネイル大 – table

【動画】絵の具の流れを利用して美しい模様を作るアート!【Trippy Paint-Spill Painting 】 – easy and easy

サムネイル無し

あなたが死ぬ前にやりたいことはなに?生きることの意味を考える!【Before I Die】 – easy and easy

最後に

ShareHtml」を使って生成したリンクは、しばらく(と言っても10分くらい)の間サムネイルが表示されないこともありますが、時間が経つときちんとサムネイルが表示されいます。

WordPressを使っている方は、サムネイル部分をアイキャッチ画像にしたりカスタマイズも楽しそうですね。よろしければこちらから。

ShareHtmlのサムネイル画像が自動でアイキャッチ画像になる様に改造しました。簡単!ほぼコピペでできます![WordPress]

[ブログ][WordPress]自分のサイトをブログで紹介するブックマークレット「アイキャッチ入りShareHtml」がステキ過ぎる件 | ツインズパパの徒然日記 Ver.2

てとこんさん作のShareHtmlを使って過去記事紹介リンクにアイキャッチが使える様になりました(wordpress用) | Sumirexxx

僕自身もまだまだIT関連については無知で色々と勉強している最中ですが、HTMLとCSSについてはだんだん知識も付いてきたので楽しんでいじくっていこうと思います!

僕もアイキャッチにできるようにしてもう少しサイト全体を見やすいものにしたいですね。

合わせてどうぞm(__)m

スポンサードリンク

シェアしとく?

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

フォローすると更新状況をチェックできるし、すげぇ喜びますw