ShareHtmlを使う方法! 登録からリンクの作成まで

2012/12/09
ブログ / WordPress

ShareHtml

ShareHtmlには大変お世話になっております、@jinnaitakumiです!

私がShareHtmlを初めて使おうと思ったとき、かなり戸惑ったので、ここに登録からリンク生成までの手順をまとめておきます。

ShareHtmlとは

リンクをサムネイル画像つきで格好良く紹介できるブックマークレットです!

▼こんなふうにリンクを作れる!
僕がiPhone5を「白」の「64GB」にした理由! これでもう迷わない! | jinnaitakumi.com

ShareHtmlの登録

  1. ShareHtmlメーカーを開く
  2. 出力方法やテンプレートを好きなように選ぶ
  3. 「Bookmarkletを生成する」をクリック
  4. 出来上がったブックマークレットのリンクを、ブックマークバーへドラッグ&ドロップする

まずはShareHtmlメーカーを開きましょう!

▼ブックマークレット名や出力方法、テンプレートを選択します。(出力方法は「ポップアップのみ」、テンプレートは「左サムネイル大 – alignleft」がオススメ)
1 1

▼テンプレートをカスタマイズしたい場合はここをいじればいい。
2 1

▼もろもろ決まったら、「Bookmarkletを生成する」をクリック
3 1

▼生成されたリンクをブックマークバーへドラッグ&ドロップしましょう
4 2

これでブックマークレットは完成です!

ShareHtmlを使う

  1. リンクを作りたいページを開く
  2. ブックマークバーの「ShareHtml」をクリック
  3. ポップアップが出てきて任意でメモを付けられる(付けないで無視してもOK)
  4. 生成されたリンクをコピーする
  5. 記事のリンクを入れたいところに、貼り付ける

▼まずはリンクを作りたいページを開く
5 1

▼Sharehtmlをクリック
6 1

▼「Input memo」というポップアップが出てくるので、任意でメモをつけたり、付けなかったり。
スクリーンショット 2012 12 09 15 32 15

▼リンク生成されて出てくるのでコピーする
スクリーンショット 2012 12 09 15 32 24

コピーのショートカットキーを覚えておくと便利!

  • Windows:Ctrl + C
  • Mac:Command + C

あとはコピーしたリンクコードを記事に貼り付けるだけ!

貼り付けもショートカットキーを覚えておくと便利!

  • Windows:Ctrl + V
  • Mac:Command + V

まとめ

ということでポイントまとめると

  • ShareHtmlメーカーを開いて、テンプレートを決める
  • 「Bookmarkletを生成」してブックマークバーへドラッグ&ドロップ
  • リンクを作りたいページでShareHtmlをクリックすればOK!

かなりカンタンにお洒落なリンクが作れるようになるので、まだ使ったことのない人は、ぜひ一度試してみてください!