webサービス

ShareHtmlで指定した画像をサムネイルにする方法

先日、ShareHtmlの基本的な使い方を紹介しました。今回はその応用編です。

他の方のブログの記事を紹介する時には前回紹介した方法であまり問題は無いのですが、自分のブログを記事で紹介する時に以下の様にどれも同じサムネイルとなってしまって記事の区別がつきづらい状態になってしまいます。

iPad miniを電子辞書として使うことに決めた理由

iPad miniを1ヶ月間使用してみての感想

これを改善したかったので、以下の記事で紹介されているように、ShareHtmlを使って自分の指定した画像をサムネイルに出来るようにチャレンジしてみたのでその方法を備忘録の意味をかねて紹介したいと思います。
平均PVを上げるためにShareHTMLでリンクタグを作成する際に加えている一工夫、から一手間なくす。 | みんなの扉を開くカギ

スポンサーリンク
スポンサーリンク

ShareHtmlをちょこっと編集する

▼まずは、ShareHtmlメーカーのページにいきます。以下のように空白にしておき、ポップアップのみを選択します。
ShareHtml1301051122

▼今回は書式テンプレートは左サムネイル大-tableで説明を進めます。今回編集する部分は、$memoの部分です。この部分を後で移動させます。
ShareHtml1301051115

$memoをどこに移動させるかというと、http://capture.~${posturl}の部分に移動させます。の部分は消して構いません。
ShareHtml1301051113 1

▼移動させると以下の様になると思います。
ShareHtml1301051116

▼あとは横幅、縦幅をそれぞれwidth,heightで好きな値に設定してください。僕は各記事毎に正方形のサムネイルをアップロードしているので、縦幅、横幅ともに150にしました。
ShareHtml1301051120

▼編集が終わりましたら、Bookmarkletを生成するボタンを押し、生成されたブックマークレットを登録します。
ShareHtml1301051123

ShareHtmlの実行方法

▼自分のブログリンクを貼りたいページにおいて、サムネイルにしたい画像を右クリックし、画像URLをコピーします。
Sharehtml 1301051137

▼そして、先ほど作成したブックマークレットを実行し、画像URLをペースとしてOKを押します。
Sharehotml 1301051135

▼するとタグが生成されるのでこれをコピーしてテキストエディタに貼付ければきちんと以下のように反映されます。
Sharehtml 1301051134

▼指定したサムネイルなので、内容がわかりやすいです。

iPad miniを電子辞書として使うことに決めた理由

まとめ

サムネイルにする画像は自分のブログのサーバーにアップロードしなければならないですが、ぱっと見ただけでどんな内容かを大体把握出来るのは、閲覧者の方にとってもブログ運営者にとっても好都合なので、利用してみてください。

ちなみに、記事中に画像が無くてもブログのサーバーにアップロードしている画像ならば、その画像URLを入力すればそのサムネイル付きのリンクを表示出来ます。

スポンサーリンク
スポンサーリンク

関連記事

  1. webサービス

    「Feedly Graph」Feedlyの購読者数を自動で取得してくれるwebサービス

    Feedly GraphというFeedlyの購読者数の推移を知ることが…

  2. webサービス

    Amazon Student会員限定の大学対抗キャンペーン上位5大学が発表!

    当ブログでも記事にしていました、Amazon Student会員限定の…

  3. webサービス

    Chrome拡張機能のEvernote Web Clipperを使えば見ているページを簡単&…

    ウェブサーフィンしている時に、このページ後でもう一回見たい!と思う事が…

  4. 1password

    webサービス

    1PasswordのChrome拡張機能が使えない!→Chromeの更新で解決

    Google Chrome上で、いつものように1Passwordの拡張…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

カテゴリー

  1. iPhone 5s

    ソフトバンクiPhone 5sのかいかえ割学生特典を受けるための学校確認書類の返…
  2. iPhoneケース

    iPhoneのTPUケースとハードケースの利点&欠点まとめ
  3. iPhoneアプリ

    AmazonのiPhoneアプリを使ってバーコードから商品を検索する方法
  4. chromeアプリ

    webサービス

    Google Chromeで新規タブを開いた時の挙動を調整する拡張機能「New …
  5. dueアプリ

    ブログ運営

    毎日ブログを更新するために工夫している2つのこと
PAGE TOP