リンク先をサムネイル付きで簡単に紹介できるShareHtmlの使い方

ブログを書いていてリンクを張る際、皆さんはどうされていますか?

普通はページタイトルにリンクしたいサイトのアドレスを張り付ける感じでしょうかね。

例えば、前回自分が書いた記事にリンクを張る場合はこんな感じで。

SiteGuardをインストールしてWordPressへの不正アクセスに対処しましょう!　(ブログの気になる気になーる)

これでも全然問題はないんですが、せっかくなら画像とかも一緒に張りたいと思いませんか?
実際に最近いろんなブログを見ていると、そういうリンクをちょこちょこ見かけるんですよね。

で、調べてみたら意外と簡単にできることが分かったのでした。
ということで、今回はその方法について解説していきましょう。

ShareHtmlメーカーというところがその機能を提供してくれていました

実はその機能を提供してくれているのは

ShareHtmlメーカー

というページです。

こちらのリンクからどうぞ。

 

実際のページに飛んでみると

こんな感じで非常にシンプルな構成となっています。
基本的にBookmarkletを作成するページなんですね。

で、基本的には前半の方はデフォルトのままでOKです。
変更したければしてもよいですよ。

選択しなくちゃいけないのは、青で囲ってある

書式テンプレート

というのですね。

これは

１．左サムネイル大 – alignleft
２．左サムネイル小 – alignleft
３．左サムネイル大 – table
４．左サムネイル小 – table
５．サムネイル無し
６．予約語一覧

の６つの中から選択します。

標準的なのは１．ですかね。

たとえば１．を選択すると

このようにボックスの中に文字列が表示されるとともに

Bookmarkletを生成する

というボタンが表示されます。

あとはこのボタンをクリックすれば

このようにさらに下のボックスにそのコマンドが表示されます。
あとはブックマークレットとして登録すればOKです。

方法としては、図に書いてあるように

“ShareHtml”のリンクをブックマークバーにドラッグ&ドロップ

すれば登録されるはずです。

ブラウザにChromeを使っている方はご注意を

ただし注意しないといけないのは、文書中にも書かれれているとおり

Chromeで登録しようとすると、うまく動かない

ようですので、Chrome使っている方は、ブックマークレットのリンク先を編集する必要があります。

その方法としては、まずブックマークバー上で右クリックをして

“ページを追加”

を選択します。

そうすると

ブックマークの編集画面が出てきますので、ここで名前とURLの項目に、ボックス内の内容をコピペすれば完成です。

実際に使ってみました

このブログのメインページでShareHtmlのブックマークレットを利用してみるとこうなりました。

こんな風に画面の上部に記事に挿入すべきコマンドが表示されます。
そして実際のプレビューが左に表示されます。

あとはその表示されているコマンドを自分の記事中に張り付ければ完成です。

 

ShareHtmlを使った方が、明らかに見栄えは良くなりますよね。

やっぱり文字だけのリンクよりも、サムネイルの画像がついていたりする方が絶対に見た目は良いです。

というわけで、すごく便利なShareHtmlですが、そんなに難しくもないので皆さんもぜひ使ってみてくださいね。
自分も今後ありがたく使わせてもらおうと思っています(^^)

本日もありがとうございました。