響き

BARとボサノヴァ、ローカルな旅、響きあう時間

  1. TOP
  2. プロフィールと近況
  3. 画像付きリンクを張るならCreate Linkがおすすめ。Amazon用のプラグインも不要に

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

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

Create Link – Chrome ウェブストア
Copy current page title and URL to clipboard in various formats.

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

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

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

Create Link

初期メニューは4つ

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

  • Create Link
    • Plain text
    • HTML
    • markdown
    • mediaWiki

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

createlink

というより、適当に文章を選択した状態で右クリック、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 }

実際に使ってみましょう

  1. 説明文として表示したいテキストを選択してCreateLinkでコピー
  2. エディターにペースト
  3. ダミーの画像URL”画像”に表示したい画像のURLを入れる

chromeだと、表示したい画像を右クリック「画像URLを取得」。他のブラウザでも同様のことはできると思います。これで、

  • 画像(該当ページへのリンクあり)
  • ページタイトル(該当ページへのリンクあり)
  • 選択したテキスト

が箱の中に表示されるはずです。

良さ

どんなページのどんな画像やテキストへも自由にリンクを設定できるのが魅力。URLや商品コードだけで自動でやってくれるウィジェットもありますが、これを使えばどんなリンクも同じ書式で扱える魅力があります。

実際、amazonアフェリエイトでコードを取得するよりはるかにシンプルな手順とコーディングで好きなようにリンクが張れます。汎用性も高い。相手先の画像をそのまま表示しているので、画像のダウンロード・アップロードなんていうちょっとグレーかつ手間のかかることもしなくていいのがポイント。

どうしてもアフェリエイトのリンクにしたい人は、amazon用や楽天用の設定を作って<a>タグのURL中に tag=○○みたいな形でアフェリエイトネームを埋め込めばどうにかなるんじゃないかとは思います。その代わり、記述は長く複雑になります。

なお、もともとMarkdown形式のエディターを使っている人はもっとシンプルで可読性の高いコードで書けると思いますので挑戦してみて下さい。

さらに蛇足。amazonの商品のURLは商品名が中に入っていたりして一般的に長いですが、単にリンクを張る場合はamazonの商品番号ASIN(Amazon Standard Identification Number)を使って

http://www.amazon.co.jp/dp/ASIN

でリンクが張れます。書籍の場合は10桁ISBN(International Standard Book Number)がそのままASINになっています。