また旅

日々のこと、画面の中でのこと (今はIDCFクラウド、KUSANAGI、WordPress、Vagrant及びCodeIgniter).

ブログ

ブログで見かける、サムネイル画像付きサイトのページへのリンク作成方法

ShareHtmlメーカー
←こういうページのサムネイル画像が付いたリンクの作り方の紹介です。

 

まさに上のようなブログでよく見かける、あるページを紹介するための小さなサムネイル画像(スクリーンショット)をともなうリンクの作り方です。

簡単に作れるってことを知ったばかりですが説明したいと思います。

まずは上のShareHtmlメーカーのページをクリックして開いて下さい。

 

sharehtml choose template 2

 

入力する欄がたくさん出てきますが、「書式テンプレートを選択して下さい」をクリックして左サムネイル大 - alignleftを選んで下さい。

すると「以下を直接カスタマイズすることもできます」の下のテキストボックスに何やら文字列が表示されまが、それは気にせずBookmarkletを生成するボタンをクリックして下さい。

 

sharehtml create bookmarklet

 

クリックしたボタンの下が上の画像のようになりますので黄色の線で囲ったShareHtmlをブックマークバーにドラッグ&ドロップして下さい。

 

sharehtml bookmarklet drag and drop

 

スクリーンショットには写らないようですが、実際には矢印の先にマウスカーソルと中にプラスが書かれた緑色の丸が表示されます。

ドロップ(マウスのボタンを離)した所にShareHtmlのボタンが追加されましたか?されなかった場合はもう一度やってみて下さい。

 

ここまでが準備で、いよいよ実際のサムネイル付きリンク作成です。

といってもShareHtmlのボタンさえあれば、リンクを作りたいページを表示してボタンをクリックするだけです。

クリックしたら文字を入力するためのウィンドウが表示されます。リンクにコメント入れたければ入力して下さい。

またリンクを作りたいページを表示して、ページ内の任意の文字列を選択した状態でリンクを作成すると、選択した文字列がコメントの上に表示されます。

 

ShareHtml page link with thumbnail

 

コメントを入力するウィンドウでOKをクリックすると、リンクを作りたいページの上部にリンクのHTMLとそのプレビューが表示されますのでHTMLを選択するボタンをクリックし、あとはコピーしてお使いのブログエディタやWordPressのエディタ画面などにペーストして下さい。

どちらもHTMLモードである必要があります。ちなみにMarsEditでリッチテキストモードの場合はcontrol + command + Vで直接ペースト可能です。

以上、最も単純なサムネイル付きリンクの作り方でした。

 

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. 3.5.4App
価格: ¥3,450(記事公開時)
カテゴリ: ソーシャルネットワーキング, 仕事効率化

-ブログ