HOME   »   webサービス  »  ShareHtmlで指定した画像をサムネイルにする方法
RSSフィード

先日、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を入力すればそのサムネイル付きのリンクを表示出来ます。

関連記事

iPhoneのSafariで見ているページタイトルとURLをTweetbotでつぶやくブックマークレットを作ってみた

記事紹介のリンクをサムネイル付きで表示出来るShareHtml

AppHtmlをAppStoreHelperと同じようなスタイルにしてみた

FC2ブログで最新記事にサムネイルを付けてサイドバーを見やすく!

Chrome拡張機能「Keyconfig」ショートカットでブックマークレット起動できるのが便利!

スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
ShareHtml   ブログ   サムネイル  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP