見やすいリンクを簡単に作成するブックマークレット「ShareHtmlメーカー」

 

こんにちは、GENです。ブログ記事を書く時にリンクを貼ることがないでしょうか?

 

僕の記事では、勉強させてもらったブログや興味のあるブログのリンクを貼ることがあるんですが、周りの皆さんのブログを拝見しているとすごく見やすいリンク貼りをされています。

 

周りのみなさんはこんな感じ

ピクチャ 34

 

僕のはこんな感じ

- 破天荒極まりない!そこがいいね。WEB制作企業 | 株式会社LIG

この違い・・・あかん。

 

 

シャレオツなサムネイル

シャレオツなタイトル

いかしてやがる。

 

 

コレのやり方を紹介していきます。

 

 

ブックマークレットという便利ツール

このリンクデザイン。ブックマークレットというツールを使うことで簡単に作成することができますが、ブックマークレット!!?ってなりますので、そこから説明していきます。

 

 

“ブックマークレット”

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。

from wikipedia

 

らしいです。もっと噛み砕いて紹介したいですが、今回はこんなものとご理解ください。

 

世の中にはこういった便利ツールを作ってくれている神のような存在がいます。ありがとうほんと

 

 

ShareHtmlメーカーの使い方

そしてリンク作る際のブックマークレットがこれです。
ShareHtmlメーカー
まずはリンクをクリックします。

 

ピクチャ 37

—————————————————————————————————

こんなページが開く。

 

 

 

ピクチャ 40

—————————————————————————————————

上半分はなにも触らず、画像のように出力方法と書式テンプレートを選んで ピクチャ 42をプッシュ!

 

 

 

 

ピクチャ 45

—————————————————————————————————そうするとー、下の方にこんなのが表示される。難しいのは、全部無視してShareHtmlをドラッグ&ドロップでブックマークバーかお気に入り登録してください。

 

 

 

実際にやってみるよ

まずはリンクを貼りたいサイトを開く。

ピクチャ 46

ブックマークバーの[ShareHtml]をクリック

 

ピクチャ 49

こういうのが開くので[OK]をクリック。

 

 

ピクチャ 50

生成されたコードをコピーする。

 

 

これをブログに貼れば

こんな感じに。すごく便利!

あかめ女子のwebメモ
いつもあかめさん(@mk_mizuho)にはお世話になっております。

 

 

追記:たまにサムネイル画像が表示されないことがあるらしい。

タイムラグがあるらしいので、少し置くと表示されているらしいですね

ねこまたり: 223 ShareHtmlで引用したサイトの画像が表示されないとき
う作成者の方に聞くしかないと、Twitterでおたずねしたところ、作者の@hiro45jpさんは、すぐお返事をくださった。 …

ランキング|現在16位/500サイト
1日1回旅バナーをクリック頂けると更新の励みになります^^
にほんブログ村 旅行ブログ 日本一周へ

Pocket

コメントを残す