document.write('<div id="blogrank"></div>');
if(document.getElementById('blogrank')) {
    var displayframe = document.getElementById('blogrank');
    generateHtml();
}

function generateHtml() {
    // item要素参照の配列
    var item_num = blogrank['comments'].length;
    var i;
    for (i=0; i<item_num; i++) {
        if(! blogrank['comments'][i]) {
          break;
        }
        // コメント全体を囲むdivタグを生成
        var item_div = document.createElement('div');
        item_div.className = 'item';
        // 上段行のdivタグを生成
        var upper_div = document.createElement('div');
        // 評価画像のimgタグを生成
        var rating_img = document.createElement('img');
        rating_img.src = blogrank['comments'][i]['ratingimgurl'];
        rating_img.alt = 'rank' + blogrank['comments'][i]['ranking'];
        rating_img.className = 'ratingimg';
        upper_div.appendChild(rating_img);
        // 名前
        var commentatorname_span = document.createElement('span');
        commentatorname_span.className = 'commentatorname';
        if(blogrank['comments'][i]['commentatorurl'] == '') {
          var commentatorname_caption = document.createTextNode(' by ' + blogrank['comments'][i]['commentatorname']);
          commentatorname_span.appendChild(commentatorname_caption);
        } else {
          var commentatorname_caption = document.createTextNode(' by ');
          commentatorname_span.appendChild(commentatorname_caption);
          var commentatorname_a = document.createElement('a');
          commentatorname_a.setAttribute('href', blogrank['comments'][i]['commentatorurl']);
          var commentatorname_a_caption = document.createTextNode(blogrank['comments'][i]['commentatorname']);
          commentatorname_a.appendChild(commentatorname_a_caption);
          commentatorname_span.appendChild(commentatorname_a);
        }
        upper_div.appendChild(commentatorname_span);
        // 日付
        /* var date_span = document.createElement('span');
        date_span.className = 'date';
        var date_caption = document.createTextNode(' ： ' + blogrank['comments'][i]['date']);
        date_span.appendChild(date_caption);
        upper_div.appendChild(date_span);
        */
        // 上段行のdivタグを追加
        item_div.appendChild(upper_div);
        // タイトル用divタグを生成
        /* 
        var title_div = document.createElement('div');
        title_div.className = 'title';
        var title_caption = document.createTextNode(blogrank['comments'][i]['title']);
        title_div.appendChild(title_caption);
        item_div.appendChild(title_div);
        */
        // コメント用divタグを生成
        var comment_div = document.createElement('div');
        comment_div.className = 'comment';
        var comment_caption = document.createTextNode(blogrank['comments'][i]['comment']);
        var comment_a = document.createElement('a');
        comment_a.setAttribute('href', blogrank['comments'][i]['url']);
        comment_a.setAttribute('target', '_top');
        comment_a.appendChild(comment_caption);
        comment_div.appendChild(comment_a);
        item_div.appendChild(comment_div);
        // コメント全体を囲むdivタグを追加
        displayframe.appendChild(item_div);
    }
    // 「コメントを書く・見る」
    var comment_link_div = document.createElement('div');
    comment_link_div.className = 'comment_link';
    var comment_link_a = document.createElement('a');
    comment_link_a.setAttribute('href', blogrank['comment_url']);
    comment_link_a.setAttribute('target', '_top');
    var comment_link_caption = document.createTextNode('\>コメントを書く・見る');
    comment_link_a.appendChild(comment_link_caption);
    comment_link_div.appendChild(comment_link_a);
    comment_link_div.style.marginTop = '10px';
    comment_link_div.style.textAlign = 'right';
    displayframe.appendChild(comment_link_div);
}