サイト一覧に favicon.ico を付けていい感じにしたい

かしこ 25views 更新:2016年9月27日

サイトの一覧を文字だけじゃなくて

・[アイコン] サイト名1

・[アイコン] サイト名2

 …

のように表示したいと思いました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-language" content="ja">
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script>
$(function()
{
    // id 用
    var count = 0 ;
    // class : list の値を全取得して、反復
    $("a.list").each(function()
    {
        // リンクをとってきて、http~最初のスラッシュまでを切り取る($1 = http, $2 = //+最初のスラッシュ
        var fav = $(this).attr("href").replace(/^(http:{1}|https:{1})(\/\/{1}[^\/]+)(.*)$/, '$1$2') + '/favicon.ico' ;
        // ↑を加工してイメージとして記述していく
        $("#id" + count).html("<img src=\"" + fav + "\" style=\"height:20px;width:20px;margin:0px 3px 0px 0px;\" />") ;
        count++ ;
    }) ;
}) ;
        </script>
        <title>タイトル</title>
    </head>
    <body>
        <header id="header_area"></header>
        <div id="main_contents">
            <ul style="list-style-type: none;">
                <!-- ここにサイトを記述してく -->
                <li><span id="id0"></span><a class="list" href="https://www.google.co.jp/">google</a></li>
                <li><span id="id1"></span><a class="list" href="http://www.yahoo.co.jp/">yahoo! japan</a></li>
                <li><span id="id2"></span><a class="list" href="http://hacknote.jp/">hacknote</a></li>
            </ul>
        </div>
        <footer id="footer_area"></footer>
    </body>
</html>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません