画像付きリンクを張るならCreate Linkがおすすめ。Amazon用のプラグインも不要に

ブログなんかを書いていて、例えばこんな風に

chrome.google.com

どこかのページにリンクを張る場合、URLをコピーして、ページの中の文章なんかをコピーして、それぞれ正しくHTMLやMarkdownやHatena書式なんかに書かなくちゃならない。結構手間です。それを一発でやってくれるのがCreate Link。Chromeの機能拡張です（もとはFirefoxの機能拡張で名前は違うそうです）。

なにをやってくれるのかというと仕組みはシンプル。普通、テキストを選択して、コンテキストメニューでコピーすると、そのテキストだけがコピーされますが、CreateLinkを使うと、そのページのタイトルやURLも一緒にコピーできちゃいます。リンクのためのタグも埋め込んでくれます。ほんとそれだけ。

で、私はもうちょっと工夫して使っているのでそのご報告です。

Create Link

初期メニューは4つ

インストールすると、右クリックでCreate Linkと4つの子メニューが現れます。

Create Link
- Plain text
- HTML
- markdown
- mediaWiki

メニューバーのアイコンをクリックすると、そこにもコンテキストメニューがあり、一番下の「configure」を選択すると説明ページが表示され、取得できる文字列がどんなものか書いてあります。

というより、適当に文章を選択した状態で右クリック、4つのメニューのうちどれかを選んで、クリップボードにコピーされたものをテキストファイルにペーストしてみてください。

たとえばヨドバシカメラのトップページを右クリックして、マークダウン形式

[%text%](%url%)

でコピー、ペーストすると

[ヨドバシ.com - ヨドバシカメラの公式通販サイト【全品無料配達】](http://www.yodobashi.com/)

こんなふうになります。HTML形式だと、（の代わりに<a href="とかが入ります。%text%は選択したテキストで、何も選択していないとページタイトルになります。ブログのエディターにペーストしてプレビューすると、ちゃんとリンクになってるはずです。

さらに、フォーマットの表の下の＋マークをクリックすると、自分で好きな文字列を設定することができます。また、説明書きによると、選択テキストとは別に%title%でページタイトルを取得することもできます。

ここではamazonという名前で長い文字列を指定しています。amazon以外のページにも当然使えます。で、どんな文字列を設定したかというと...

設定

箱要素<div>（"amazon"とクラス指定しておきます）の中に

ダミーの画像<img>："amazonthumb"とクラス指定しておきます
ページのタイトル（%title%）
選択しているテキスト（%text%）
回り込みを解除するための空の箱要素<div>："clear"とクラス指定しておきます

の4つを配置し、ダミーの画像とページタイトルには該当ページ（%url%）へのリンクを張ります。また、一般的にはサイト外へのリンクなので、新しいウインドウで開くように target="blank" としておきます。なお、クラス指定する際の名前は何でもいいです。

タイトルとテキストは、並列にせず、定義文<dl>のタイトル<dt>と説明文<dd>にします。もちろん、単純にリスト形式<li>などにすることも可能です。

コードで書くとこのようになります。

class=amazonの箱要素 <div class="amazon">
- 当該ページへのリンクの中にclass=amazonのダミー画像を配置 <a href="%url%" target="blank"> <img class="amazonthumb" src="画像"> </a>
- 定義文を宣言 <dl>
  - 定義文タイトルとして、当該ページへのリンクの中にページタイトルを配置 <dt> <a href="%url%" target="blank">%title%</a> </dt>
  - 説明文として選択テキストを配置 <dd>%text%</dd>
- 定義文を終了 </dl>
- class=clear の空の箱要素を配置 <div class ="clear"> </div>
最初のの箱要素"amazon"を終了 </div>

実際には改行せずスペースで区切って

<div class="amazon"> <a href="%url%" target="blank"> <img class="amazonthumb" src="画像"> </a> <dl> <dt> <a href="%url%" target="blank">%title%</a> </dt> <dd>%text%</dd> </dl> <div class ="clear"> </div> </div>

のように入力します。

スタイルシート

今のところ、このようにスタイルを指定しています。画像の回り込みは色んな方法がありますが、float=leftで指定しています。正直、あまりエレガントな方法ではありませんが、シンプルな方法ではあります。clear:both は回り込みを解除する指定です。

/ ------------------- amazon ------------------- / div.amazon { border: 1px solid silver ; padding: 0px ;margin:0.5em 0} img.amazonthumb {width:150px ; margin-right:10px ;float:left} div.amazon dl { margin:10px 0 ; padding:0 ;display:block; } div.amazon dt {padding:0 ; margin:0 0 0.5em 0 ;virtial-align:top} div.amazon dt a { text-decoration:none ; font-size:100% ; font-weight: bold ; color:steelblue} div.amazon dd { text-decoration:none ; font-size:90% ; padding:0 ; margin:0} div.clear { clear:both }