ブログ

外部リンクアイコン自動挿入Scriptを原形をとどめないほどに改造してみました。

すこし案件が重なってしまって、ブログ記事が遅れてしまいました。

Style Design Engineerへの道 :: [XHTML 1.0 Strict・IE6/7対応]外部リンクアイコン自動挿入Script」という記事を読んで、ちょうど手の空いていた時期だったこともあり、原型をとどめないほどに改良してみました。

不満だったことなど

このスクリプトを見たときに感じた不満がいくつかありました。

  • PDFやZIPなどにもアイコンがついてしまう。
  • PDFやZIPなどにはできるなら別のアイコンをつけたい。
  • 外部リンクだけでなく、PDFなどでも外部リンクをつけたい。
  • lightboxやポップアップリンクなどのリンクに非対応。
  • クラス名を指定したい。
  • アイコンサイズの自動取得。

このうち、「アイコンサイズの自動取得」以外のことができたので公開してみようと思います。

従来からの仕様

  • 外部サイトは自動的に別ウィンドウで開く(target="_blank"不要)。
  • 外部リンクにはリンクテキストの末尾に自動的にアイコンを挿入(class不要)。
  • IE6/7で複数行インライン要素における背景画像の表示バグ回避のため、IE6・7のみは<img>要素を自動で挿入。
  • 内部リンクでも意図的に別ウィンドウで開きたい場合にも対応。

追加仕様

  • pdf/doc/docx/xls/xlsx/txt/zip形式のファイルは自動的に別ウインドウで開くように。
  • 外部リンクにアイコンを付けたくない場合(画像からのリンク等)に対応。
  • クラス名編集に対応(設定部分で)。
  • 外部リンクスクリプトとアイコン指定スクリプトのコード分離(外部リンクスクリプトのみの使用も可能)。
  • <a>要素の下に<img>要素があると自動的にクラスを削除。
  • lightboxとポップアップウインドウに対応(jQuery.colorbox.jsで動作確認)。
  • とポップアップウインドウに対応(jQuery.popup.js使用)。

ライセンスについて

ライセンスですが、完全フリーです。商用利用や改造も問題ありません(注:この点に関しては元記事の作者にも確認しました)。

ただ、著作権表示はこのコードに残してほしいです。
実質的にはMITライセンスと同等(再配布時には著作権表示を残す+無保障)です。

さいごに

「アイコンを追加する場所を前か後か選択できる。」という要望を元記事の作者さんが出していたけど、面倒なのでやっていません(単純にファイルを2つ作ることになるので)。

ただ、仕事で使うという場合には十分に使えるはずです。少し改造すれば外部リンクの機能だけ使うこともできますし。また、アイコン追加もコードを改造すれば外部リンク以外にも簡単にできます。

というわけで、「アイコンサイズの自動取得」だけはだれかやってください(笑)

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。