外部リンクをわかりやすくする試み
Webにリンクはつきもの。
引用やリンク集など外部へリンクを張ることも多いと思います。
そんな外部リンクを視覚的にわかりやすくする方法として良くみかけるのがアイコン(
)を表示させる方法。
直観的に別のサイトに飛ぶ感じがわかりやすいです。
WordPressには外部リンクのアンカータグに自動でクラスをつけてアイコンを表示してくれるプラグインもあります。
この方法をさらに発展(?)させて外部リンクにFaviconを表示するjavascriptをみつけたので試しに導入してみました。
このスクリプトのいいところはFaviconのないサイトにはあらかじめ設定したアイコンを表示してくれること。
リストのレイアウトが崩れません。
表示方法の様々なバリエーション
上記のサイトには表示方法の様々なバリエーションがあるのでお好みのサンプルページのソースを拝見させていただきます。
サイドバーやバナーリンクなどにいちいち全部表示されてもアレなんで、表示箇所を限定した方がいいかもしれません。
導入例
ワタシは特定のリスト内のみに表示するようにしたので例としてその導入方法を。
1.)上記のサイトのソースを表示してスクリプト部分を適当な名前で保存
(faviconize.jsなど)
2.)Faviconのないサイト用のアイコンを用意
3.)スクリプトの31行目あたりのアイコンのパスを修正
JavaScript:
-
cue.onerror = function () {
-
this.src = “アイコンへのパス”;
-
}
4.)スクリプトとアイコンをサーバーにUPし<head>～</head>間に以下のコードを追加
HTML:
-
<script type=“text/javascript” src=“faviconize.jsへのパス”></script>
5.)CSSファイルに以下を追記
CSS:
-
img.faviconimg {
-
border:0;
-
width:アイコンサイズ;
-
height:アイコンサイズ;
-
padding:0 4px;
-
}
*お使いのCSSによっては微調整が必要かも?
この記事でもさっそく使ってみてますが、以下のリンク集の方が導入イメージがわかるかも?
Leave a Reply