はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

ブログ記事作成を効率化!サムネイル画像付きのリンクを2クリックで作成

HTMLやCSSに慣れていない人でも、簡単にサムネイル画像付きのリンクを2クリックで作成できる。効率化できるところは効率化して、もっと重要な部分に時間を使おう。

概要

Google Chromeの拡張機能「Create Link」を少しカスタムして使う方法を述べる。

Create Linkって何?

Google Chromeの拡張機能。Chromeで現在表示されているページのタイトルとURLをクリップボードにコピーできる。また、ページタイトルやURLにあらかじめ設定したHTMLを追加できる。

つまり、下のようなリンクを2クリックで作成可能。

Chrome ウェブストア - Create Link

サムネイル画像なしのリンクならすぐ作れる

上記リンク先から拡張機能を追加したら、右クリックのメニューにCreate Linkという項目が増えている。その下層にあるHTMLをクリックすればコピー完了。ページタイトルとURLが入力済みのaタグがクリップボードにコピーされている。あとは貼り付けるだけ。

サムネイル画像ありのリンクを作成するには

最初に1回だけ下準備

Chrome右上にあるアイコンをクリックし、表示されたプルダウンメニューからConfigure...をクリック。

Create Linkのオプション管理画面が開く。

下のGifアニメを参考にコードをコピペする。

  1. をクリックでブランクを作成。
  2. Name列の空欄にはthumbnail-boxをコピペ。
  3. Format列の空欄には次のコードをコピペ。
<a style="overflow:hidden;display:inline-block;width:100%;" href="%url%" target="_blank">%newline%<img style="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/shorten?%url%" alt="" width="120" height="120" border="0" />%newline%<span style="display:block;overflow:hidden;">%title%</span>%newline%</a>

上記2つのコードをコピペしたら勝手に保存される。これで準備完了。

2クリックでコピー可能

サムネイル画像ありでリンクを作成したいページで右クリックし、Create Linkthumbnail-boxをクリックするだけ。2クリックでコピーできる。

はてなブックマーク数も表示するコード

上記コードではなく、次のコードをコピペで追加する。

<div style="overflow:hidden;">%newline%<a href="%url%" target="_blank">%newline%<img style="float:left;margin-right:.5em;" src="http://capture.heartrails.com/120x120/shorten?%url%" alt="" width="120" height="120" />%newline%</a>%newline%<a href="%url%" target="_blank">%title%</a>%newline%<a href="http://b.hatena.ne.jp/entry/%url%" target="_blank">%newline%<img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" border="0" alt="" /></a>%newline%</div>

↓表示サンプル

HTMLやCSSについての簡単な説明は次のページで確認できる。

リンク先のサムネイル画像をHTMLタグで表示しCSSで装飾を設定する方法 - はぴらき合理化幻想

クリックできるエリアの違い

上記2つのコードははてなブックマーク数表示のあるなし以外にも、クリックできるエリアに違いがある。

イメージ画像。グレーの部分がクリック可能エリアを示す。

実際の表示例。マウスオーバーするとカーソルの変化でクリック可能エリアが分かる。エリアが広い方が利便性は高いかな。

Chrome ウェブストア - Create Link

サムネイル画像サイズのカスタム方法

コード内の120x120が横×縦のピクセル数を表している。高さを90pxに変更したいなら、120x90に変更する。

また、width="120" height="120"width="120" height="90"に変更する。

↓サンプル

まとめ

無料で使える便利なサービスを使って、ブログ記事作成をどんどん効率化できるね。

てすとてすと