拙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データの取得と表示...
