拙websiteをマイナーチェンジ；Tumblr API取得コードの改造について

昨日今日の2日間、拙websiteをマイナーチェンジした。約80％のHTML構造を変更した。構造的に整合性がとれていなかった部分の修正と、煩雑なDIV分けの簡潔化と、jQueryでの動きの廃止（randomdisplay.jsとnavfixed.js）が主目的。これでHTML構造はよりシンプルになった。
CSSは、見た目は殆ど変更せずだが、HTML構造の変更に伴う修正（主にclassとidの整理）と、微妙なスペース修正およびwebfontのウェイト追加を施した。
ついでに、文字本のうちおススメのものを新ページ（サイドメニューのBIBLIOGRAPHY）にまとめた。

Tumblr API取得コードの改造について

煩雑なDIV分けの簡潔化、つまりULやPなどのブロック要素を無駄にDIVで囲っていたものを止めた結果、トップページ上のTumblr APIで取得した画像のレイアウトがおかしくなる問題が発生。具体的にはある大きさで画像を横に8つ並べていたが、ページ下に横スクロールバーが現れてしまった。

一見問題なさそうだが…

OMG！横スクロールバーが出現！！

いろいろ試行錯誤した結果、どうも画像に設定したCSSが悪いことが判明。下記のTumblr API取得コードはLI要素1つ（下記青部分）で画像を8つ（下記赤部分で指定）一括で吐き出す仕様で、各画像を識別することができないので、LI要素に「margin-right:15px;」を設定後、UL要素の右マージンを「margin-right:-15px;」として、イチバン右の画像の右マージン設定を打ち消してたのが原因。この時は各画像を識別し1つ1つにマージン設定する方法を思いつかなかった。

各画像は識別されず全てに「margin-right:15px;」が設定される

最後の画像は「:last-child」疑似要素で「:last-child　{margin-right:0;}」とすればよいのではとお思いだろうが、それをすると、

全ての画像が「margin-right:0;」になる結果に。

使用させてもらったTumblr API取得コード
（by『ブログのフッター等にjQueryでTumblrに投稿した画像を表示する - かちびと.net』）

//JSONデータの取得と表示件数の指定
  $.getJSON("http://foo.tumblr.com/api/read/json?num=8&callback=?", function(data) {
    $.each(data.posts, function(i, posts) {
      //写真のサイズ、URL、抜き出すアイテムのタイプの指定
      var photo = this['photo-url-75'];
      var url = this['url'];
      if (this['type'] === "photo") {
        //画像をul内にリストとして実装
         $('ul').append('<li><a href="' + url + '" target="_blank"><img src="' + photo + '" \/><\/a<\/li>');
      } else {
         return;
      }
    });
  });

で今回、取得画像数が指定できるなら各画像を識別できるのではと今更ながら（プログラムとかスクリプトは素人なので（苦笑））思った次第。画像識別はどうも変数iでしているらしいと見当をつけて、LI要素のID属性にこの変数iを含ませたら画像識別できるだろうと、上記を以下のように書き換えた。

//JSONデータの取得と表示件数の指定
  $.getJSON("http://foo.tumblr.com/api/read/json?num=8&callback=?", function(data) {
    $.each(data.posts, function(i, posts) {
      //写真のサイズ、URL、抜き出すアイテムのタイプの指定
      var photo = this['photo-url-75'];
      var url = this['url'];
      if (this['type'] === "photo") {
        //画像をul内にリストとして実装
         $('ul').append('<li id="tumblr_img' + i + '"><a href="' + url + '" target="_blank"><img src="' + photo + '" \/><\/a<\/li>');
      } else {
         return;
      }
    });
  });

こうして8つの画像はID属性「tumblr_img0」から「tumblr_img7」まで識別できるようになった。そして、CSSにて「tumblr_img0」〜「tumblr_img6」までの7つに「margin-right: 15px;」を設定すると（「tumblr_img7」は設定なし）、横スクロールも現れることなく見事におさまった。

各画像は見事に識別された！