リンクタグの作成が楽々簡単!FireFoxアドオン「FireLink」カスタマイズで手間削減♪

公開日:  最終更新日:2014/10/13

リンクタグの作成が楽々簡単!FireFoxアドオン「FireLink」カスタマイズで手間削減♪
Webページ編集の際によく登場するタグとしてリンクを貼るタグ(アンカータグ)がありますよね。

<a href=”リンク先URL”>テキスト</a>

html編集ソフト等であればメニュー等から簡単に挿入出来るのでまだ手間は少ないかもしれませんが、もし手入力で設定する場合はどうしてますか?

まず、<a ・・・ </a>をコピペもしくは手入力する
次にリンク先のページを表示してURLをコピー
戻っきて href=”” に貼り付ける
テキストでのリンクなら、表示する文字を入力

うーん、これだけでも結構手間がかかってそうな感じがしますね。
商品ページへのリンク等を複数設定する場合など少しでも手間を減らしたいものです。
そこで、本日はリンクタグを簡単に生成できるFireFoxアドオンを紹介したいと思います。

スポンサードリンク

FireFox アドオン 「FireLink」

FireFoxアドオンインストールページ
FireFoxアドオン Firelink

開いているWebページのURLやタイトルを好きな形式でコピー出来るアドオンになります。
タイトルやURLといったページのリンク情報を好きな形式に変換し、クリップボードにコピーします。
HTML, Markdown, MeidaWiki, PukiWiki といった形式が標準で用意されているのですが、今回はHTMLについて注目したいと思います。

リンク生成したいページで右クリック

実際にコピーを行うには、右クリックしてコンテキストメニューからリンク形式を指定して下さい。

ショートカットキーを使えば、さらに素早くコピーすることも可能です。
98-3.png

↑↑↑が、このブログのトップを表示した状態で右クリック(2)HTML を選択した際にクリップボードにコピーされた内容になります。

タイトルの編集を選択した場合
98-4.png
リンクのテキスト内容等をその場で修正することが出来ます。

また、ページ内の文字を範囲選択した状態で、同様に右クリックから操作するとリンクのテキスト部分に選択している文字が反映してくれます。

商品ページへのリンクタグを作りたい場合
ページを表示して商品名を範囲選択した状態で実行すれば簡単に商品ページへのリンクタグが作れちゃいます。

リンク形式のカスタマイズも可能

98-5.png
実行時にコピーされる形式をカスタマイズすることが出来ます。

HTML 初期値としては <a href=”%url%”>%text%</a> となっています。
%で囲まれている部分が定数になります。差込印刷みたいなイメージですね。
それぞれ意味するのが
%text% ページタイトルか選択テキスト
%title% ページタイトル
%url%  ページのURL

自由にタグ等の設定をすることが出来るので

<a href=”%url%” target=”_blank” class=”mylink” id=”link1″>%text%</a>

といった感じで属性をあらかじめ設定しておいたり

リストにしたい場合など
<li><a href=”%url%”>%text%</a> </li>
画像リンクとテキストリンクを同時に
<a href=”%url%”><img src=””></a><a href=”%url%”>%text%</a>

上記は画像URLを別途指定する必要あるけど、それでも十分手間減りますね。

さらに %date% 定数を組み込めば、 2013/10/24 といった日付も設定できるので
その日にアップした新着商品用のリンクタグも設定出来そうですね。

改行、タブなども指定出来るので整形された状態にすることも可能です。

その他の定数については設定ページに出ているのでそちらを確認してみてください。


その時に生成したいタグ形式を設定して作業を進めていくのも良いですし、よく使うパターンをあらかじめ設定しておくと手間がかなり削減出来ると思います。
ぜひ、試してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑