ShareHTMLメーカーで画像付きリンクを簡単に作る

※追記:より素早くサムネイル付きリンクを作成する方法を考えました。⇒ShareHtmlより速く簡単に画像付きリンクを作成する方法

他サイトへのリンクを貼り付けする時にテキストにリンクを設定するだけだったらWordPressエディタの標準のショートカットキー

Shift+Alt+A

で簡単にリンク貼り付けできるんですけど画像は自分で用意しないといけないんですよねぇ。

そこで、ShareHtmlメーカーというサイトでいろいろ設定したら後はリンクを取得したいサイトを開いた状態でボタンひとつ押せば画像付きのリンクを取得できます。(上記のリンクもShareHTMLで作りました)

広告

ブックマークレットの作成

上記のShareHtmlメーカーにアクセスして設定はとくに何もいじらずに、
①で左サムネイル大を選択して
②をクリックするだけです。
見た目をいじりたい人はテンプレートをいろいろ試してみるべし。

クリップボード01

すると下のほうにニョキっと出てくるので、

クリップボード02

ShareHTMLと書いてある部分をGoogleChromeだと上のほう、インターネットエクスプローラーだったら左?のほうにあるブックマークバーにマウスでドラッグ&ドロップします。

画像付きリンクを取得

これで設定は完了してあとはリンクを取得したいサイトでクリックするとInputMemoと出てくるので

tmp00418

リンクの下に自分で説明を書きたいときはここに書きます。

そしてOKをクリックすると、

tmp00419

このようにリンクがどのように表示されるのかプレビューと一緒に確認してOKなら「HTMLを選択する」をクリックして、
Ctrl+C もしくは右クリックからコピーをして記事編集画面に貼り付けます。

貼り付けする時の注意点

この時気をつけないといけないのがWordPressの記事編集には

  • ビジュアルモード
  • テキストモード

クリップボード03

の2種類があっていったんテキストモードにしてから貼り付けしないといけません。

貼り付けした後にビジュアルモードに戻ると画像付きリンクの見た目になっている、はず。

ビジュアルモードで先ほどコピーしたHTMLタグをそのままコピペすると公開した記事にもプログラム言語みたいなうわぁー!っていう単語が並んでしまいます(笑)

書いてみると意外と設定って大変なのかもしれませんね。ところどころ説明を省いてる部分があるのでわからない場合は

「ShareHTML 使い方」

でGoogle検索するといろんな説明記事を見れると思います。

<関連>
ShareHtmlより速く簡単に画像付きリンクを作成する方法

広告

このページのシェア・保存はこちら

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。