ブログ記事の作成を支援するのにタグ作成ツールの存在は欠かせません。
使用しているブラウザがGoogle Chromeなら、今のところ最も使われているのは「Create Link」だと思います。
以下では、僕が普段ブログなどで使用するタグの書式をまとめてみました。Chromeからメニュー選択一発で作成できるのでブログ記事作成の手助けになると思います。
photo by Clive Darra
目次
普通にサイトやブログ記事などのリンクを作成する
フォーマット例
A（デフォルト）
<a href="%url%">%text%</a>
A（新しいタブで開く）
<a href="%url%" target="_blank">%text%</a>
A（新しいタブで開く＋このリンクをたどらない）
<a href="%url%" target="_blank" rel="nofollow">%text%</a>
使い方1
- WEBページの何もないところを右クリックしてCreate Linkメニューから選択。
- ページのタイトルとURLからリンクが作成されます。
使い方2
- リンクテキストにしたいテキストを選択してCreate Linkメニューから選択。
- 選択したテキストとURLからリンクが作成されます。
表示例
WEBページのサムネイル画像とリンクを作成する
HeartRails Captureを利用してWEBページのキャプチャ画像を表示させています。
フォーマット例
<a style="overflow:hidden;display:inline-block;" 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%<span style="display:block;overflow:hidden;">%text%</span>%newline%</a>
使い方
WEBページの何もないところを右クリックしてCreate Linkメニューから選択します。
表示例
サムネイル＆はてブ数を表示してリンクを作成
HeartRails Captureを利用してWEBページのキャプチャ画像を表示させ、はてなブックマーク数も表示させます。
フォーマット例
<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 src="https://b.hatena.ne.jp/entry/image/%url%" alt="" /></a>%newline%</div>
使い方
WEBページの何もないところを右クリックしてCreate Linkメニューから選択します。
表示例
サムネイル＆はてブ数＆説明文でリンクを作成
HeartRails Captureを利用してWEBページのキャプチャ画像を表示させ、はてなブックマーク数も表示、meta要素のdescriptionから取得した説明も表示させます。
フォーマット例
<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 src="https://b.hatena.ne.jp/entry/image/%url%" alt="" /></a><br />%newline%%htmlEscapedText%%newline%</div>
使い方
サイトの説明となるようなテキストを選択し、右クリックしてCreate Linkメニューから選択します。
表示例
引用文を作成する
フォーマット例
引用文（簡易版）
<blockquote>%htmlEscapedText%</blockquote><p>引用：<a href="%url%">%title%</a></p>
引用文（HTML5のセマンティック上正しい書き方）
<figure><blockquote>%htmlEscapedText%</blockquote><figcaption>引用：<cite><a href="%url%">%title%</a></cite></figcaption></figure>
使い方
引用したい文章を選択して、右クリックからCreate Linkメニューを選択してください。
表示例
広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。
クリエイティブ・コモンズの画像を利用した時のクレジット表記
Flickrなどのサイトの画像を利用した時など。
フォーマット例
photo by xxxx（写真のとき）
photo by <a href="%url%" target="_blank">%text%</a>
image by xxxx（イラストなど）
image by <a href="%url%" target="_blank">%text%</a>
credit: xxxx（クレジット表記）
credit: <a href="%url%" target="_blank">%text%</a>
使用例
以下のように著作者の名前や、作品のタイトルをテキスト選択した後、右クリックしてCreate Linkメニューを選択してください。
表示例
photo by Clive Darra
image by Clive Darra
credit: Clive Darra
まとめ
これらの書式を使うことで、一般的な入力方法でタグを作成するよりは、数手順操作を短縮することができます。
時間にすると、わずかな時間ですが、毎日使用していると、そのわずかな時間が活きてきます。あと、「リンク作成するの面倒くさいなぁ」という心理的障壁がなくなるのが一番大きいです。
