ブログ記事を作成するのに大きな助けとなるのがタグ作成ツールです。
Firefoxの右クリックメニューからタグを作成できるアドオンとしては、「Make Link」と「CoLT」があります。
前回は、Make Linkの設定例まとめを書いたので、今回はCoLTについて書きたいと思います。
photo by Francesco Lodolo
目次
CoLTの利点
僕は、Firefoxを使っているときは、「Make Link」を使用しています。
Make Linkは、とても使いやすいアドオンです。けれど、1つ難点を言えば、設定のインポート・エクスポートができません。ですので、環境などを移行したときは、同様の設定にしたりするのが大変だったりします。一応、移行する方法を使えば、出来ないこともないんだけど、やっぱりちょっと面倒くさいです。
なので、今後は、インポート・エクスポート機能のある「CoLT」にいつでも乗り換えれるようにと、CoLTの設定例もまとめてみることにしました。
登録方法
CoLTの書式を登録するには、「ツール→アドオン」からCoLTの「設定」ボタンを押して登録します。
「新規作成→カスタム書式」を選択します。
「カスタム書式を編集」フォームが現れるので、項目を記入します。
Make Linkとは違ってアクセスキーの設定もできます。
「リッチテキストHTMLリンク書式を使用」はチェックを入れないほうがよさそう。Make Linkの「HTMLエンティティを使用する」とはまた違った設定の模様。
書式は、CoLT Custom Formatsに詳しく載っています。
普通にサイトやブログ記事などのリンクを作成する
フォーマット例
A（デフォルト）
<a href="%U">%T</a>
A（新しいタブで開く）
<a href="%U" target="_blank">%T</a>
A（新しいタブで開く＋このリンクをたどらない）
<a href="%U" target="_blank" rel="nofollow">%T</a>
使い方
WEBページの何もないところを右クリックしてCoLTメニューから選択。
表示例
選択テキストをサイト説明としてリンクを作成する
選択テキスト利用して、ページの説明文付きリンクを作成します。
フォーマット例
<a href="%U" target="_blank">%T</a><br />%S
使い方
サイトの説明となるテキスト（アンカーリンクではないテキスト）を選択し、選択部分を右クリックして作成します。
表示例
HTMLエスケープツール | Web制作小物ツール – dounokouno.com
入力された内容の「&」、「”」、「’」、「<」、「>」を参照文字に変換します。
WEBページのサムネイル画像とリンクを作成する
WordPressサムネイルサービスを利用してWEBページのキャプチャ画像を表示させています。
フォーマット例
<div style="overflow:hidden; margin: 20px 0;"><a href="%U" target="_blank"><img style="float:left;margin-right:.5em;" src="https://s0.wordpress.com/mshots/v1/%U?w=120&h=120" alt="" width="120" height="120" /></a><a href="%url%" target="_blank">%T</a></div>
使い方
WEBページの何もないところを右クリックしてCoLTメニューから選択します。
表示例
サムネイル画像とリンクを作成＆はてブ数表示
WordPressサムネイルサービスを利用してWEBページのキャプチャ画像を表示させ、はてなブックマーク数も表示させます。
フォーマット例
<div style="overflow:hidden; margin: 20px 0;"><a href="%U" target="_blank"><img style="float:left;margin-right:.5em;" src="https://s0.wordpress.com/mshots/v1/%U?w=120&h=120" alt="" width="120" height="120" /></a><a href="%url%" target="_blank">%T</a><a href=https://b.hatena.ne.jp/entry/%U target="_blank"><img src=https://b.hatena.ne.jp/entry/image/%U alt="" /></a></div>
使い方
WEBページの何もないところを右クリックしてMake Linkメニューから選択します。
表示例
サムネイル画像とリンクを作成＆はてブ数表示＆説明文
WordPressサムネイルサービスを利用してWEBページのキャプチャ画像を表示させ、はてなブックマーク数も表示、選択テキストから説明も表示させます。
フォーマット例
<div style="overflow:hidden; margin: 20px 0;"><a href="%U" target="_blank"><img style="float:left;margin-right:.5em;" src="https://s0.wordpress.com/mshots/v1/%U?w=120&h=120" alt="" width="120" height="120" /></a><a href="%U" target="_blank">%T</a><a href=https://b.hatena.ne.jp/entry/%U target="_blank"><img src=https://b.hatena.ne.jp/entry/image/%U alt="" /></a><br />%S</div>
使い方
まず説明文としたいテキストを選択します。選択テキストを右クリックしてCoLTメニューから選択してください。
表示例
引用文を作成する
フォーマット例
引用文
<blockquote>%S<p><a href="%U">%T</a></p></blockquote>
引用文（引用元右寄せ）
<blockquote>%S<p style="text-align: right;"><a href="%U">%T</a></p></blockquote>
使い方
引用したい文章（アンカーリンクではないテキスト）を選択して、右クリックからCoLTメニューを選択してください。
表示例
引用とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。報道や批評、研究などの目的で、自らの著作物に他の著作物の一部を採録したり、ポストモダン建築で過去の様式を取り込んだりすることを指す。
各国の著作権法の引用の要件を満たして行われる合法な無断転載等のこと。
クリエイティブ・コモンズの画像利用した時の著作権表示
Flickrなどのサイトの画像を利用した時など。
フォーマット例
photo by xxxx（写真のとき）
photo by <a href="%R" target="_blank">%T</a>
image by xxxx（イラストなど）
image by <a href="%R" target="_blank">%T</a>
credit: xxxx（クレジット表記）
credit: <a href="%R" target="_blank">%T</a>
使用例
以下のように著作者の名前や、作品のタイトルをテキスト選択した後、右クリックしてCoLTメニューを選択してください。
表示例
photo by Francesco Lodolo
image by Francesco Lodolo
credit: Francesco Lodolo
一括設定（今回の書式の一括ダウンロード）
CoLTは、インポート・エクスポート機能があるので環境移行が簡単です。
CoLTの設定をインポート・エクスポートするには、「ツール→アドオン」からCoLTの「設定」ボタンを押して登録します。
「エクスポート/インポート→カスタム書式をインポートorエクスポート」を選択します。
今回まとめた設定をダウンロード
今回まとめた設定を、JSONファイルにまとめて以下でダウンロードできるようにしてみました。
CoLTの設定からインポートして使えます。
注意
既存の設定がある場合、書式をインポートするときは、必ず上書き確認ダイアログで「追加」を選択してください。
従来の設定が必要ない場合は、「上書き」を選択してください。
※既存の設定がある場合は、バックアップをとってからインポート作業を行ってください。
CoLTの利点とMake Linkの利点まとめ
今回両者をまとめてみてわかった、それぞれのアドオンの利点を以下にまとめたいと思います。それぞれ、利点・難点があります。
CoLTの利点
- インポート・エクスポートができるので環境の移行が容易
- 右クリックメニューにセパレーターを追加して見やすくできる
- 右クリックメニューにアクセスキーを設定できる
難点は、設定画面を出すのが面倒くさい、書式を一行で書かなければならない、HTMLエンティティが使用できないなどです。
Make Linkの利点
- 右クリックメニューから設定画面が表示できるので手軽に設定できる
- 書式を数行にわたって書くことができる
- HTMLエンティティが使用できるので、ワードやWYSIWYGエディタにそのまま貼り付けられる
難点は、環境移行が大変などあります。
まとめ
今回、CoLT、Make Link両方使ってみた感想としては、多くの環境で使うならばCoLT。基本的に1つのFirefoxしか使わないならば、Make Linkを使うとよさそうです。
ただ、現在どちらかを使っているならば、両者は書式が違うので、使い慣れている方を使った方が無難かと思います。
ただ、初めてこのような書式作成補助アドオンを使用するような人の場合は、CoLTは、CoLT設定まとめをダウンロードしてインポートして使えるので、自分で設定する面倒くささは多少軽減されると思います。
関連記事
