つくりてのざれごと

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

以前の エントリ で、Tumblr APIで「線の博物館」と「文字の雑貨店」の画像を読み込み表示出来るようにした。ただ、Macでは無問題なのにWinではページ自体の表示がおかしくなる現象があって試行錯誤の結果、randomdisplayとかち合っていることが判明。どうしてもrandomdisplayは使用したい。再び試行錯誤後、Tumblr APIの書き方をJavascriptそのものではなくてjQueryにしたらどうかと思いつく。実は以前の エントリ でjQueryでの書き方も参考サイトとしてあげていたのでそちらを参照した。 ブログのフッター等にjQueryでTumblrに投稿した画像を表示する - かちびと.net 結果、無事成功！ これで、Tumblr APIとrandomdisplayの併用が可能に。

拙サイトのナビを上下に展開・格納するようにしたいと思い色々物色。すると、『 Web制作の現場で使う jQueryデザイン入門 』p.244〜p.245の「サンプル1」に応用できそうなjQueryを見つけ拝借。 $(function(){ $("展開・格納する要素名orクラス名orID名").hide(); $("クリックする要素名orクラス名orID名"). hover (function(){ $("展開・格納する要素名orクラス名orID名:not(:animated)" ,this ). slideDown("slow") ; } , function(){ $("展開・格納する要素名orクラス名orID名",this).slideUp("slow"); } ); }); これを元に、 クリック時の動作用に変更。 自分が後で理解しやすいようにする。 上下展開・格納動作にアニメーションをつけたい。 クリックする箇所が、展開・格納で文字色が変わるように。 上述動作が2箇所で交互に動作するように。 となるように改造していく。 1.クリック時の動作用に変更〜2.自分が後で理解しやすいようにする 「hover」を「click」に変更。 clickするごとに展開・格納させるので、slideDown()、slideUp()はslideToggle()にまとめて条件式の1つを削除。 「this」の意味が良く分かってないので現段階で取っちゃう（後で、冗長的になるけど、これがなくても良い書き方にする）。 3.上下展開・格納動作にアニメーションをつけたい 今まさに必要なコラムを発見。 ＠ITの記事『 jQueryのアコーディオン効果の使い方・作り方（2/3） 』より、 コラム　「jQueryのslideDown/slideUp/fadeIn/fadeOutメソッドの正体」 slideDown/slideUpメソッドはheightプロパティを、fadeIn/fadeOutメソッドはopacityプロパティを、書き換えることにより実装します。jQueryは、これらのプロパティを書き換えるのに、animateメソッドを使用...

検索してみたら以下を発見。 画像をモノクロ変化するjquery.monochromer.jsをアップデート | 秋葉秀樹個人ブログ [JS]カラー画像を白黒に自動変更して表示する画像ギャラリー -Black and White | コリス jQuery.BlackAndWhite 画像にロールオーバー効果を付けるjQueryプラグイン-Hoverizr | memocarilog Hoverizr 画像を自動でモノクロに！「$.GreyScale jQuery Plugin」｜skuare.net $.GreyScale jQuery Plugin を試してみたが、 1は、APIで読込んだ画像には適用されないようだ。残念。 2、3、4はレイアウトが完全崩壊。orz...　これらもAPIで読込んだ画像には適用されない。 2012-9-24追記： コメンター（CMMNTR）にて、 Gianluca Guarini - black and white image jQuery plug-in が紹介されていたので試してみたが、残念ながらこちらもAPIで読込んだ画像には適用されない。今までで一番セッティングしやすいものなだけに。。。

HOMEページに、 文字るブログ と 活字の小箱ブログ の最新フィードを追加。 Google Feed API を利用してRSSを取得・表示しています。 参考にしたサイトは以下の通り（ありがとうございます）。 Google AJAX Feed API入門 Google AJAX Feed APIの使い方メモ | GNJYOブログ Google AJAX Feed APIでRSSフィードの日付も表示｜Webpark 誰でも簡単に外部RSSをサイトに表示できる「Google Feed API」の使い方！ - ウェブソク I have added MOJIRU and TYPE CASKET blog feeds on HOME page. I use “ Google Feed API ”.

HOMEページを改装し、新たにイベントカレンダー（文字・活版関連）を追加。googleカレンダーを、jQueryベースのAjax対応カレンダープラグイン「 FullCalendar 」を使用して読み込ませてみました。見た目はCSSとFullCalendar内のjQueryをカスタマイズしてこのサイトに合うようにしています。また、Tumblr APIで「線の博物館」と「文字の雑貨店」の画像を読み込み表示できるように改良。それに伴い、NEWSを新設した NEWSページ に移動しました。 Tumblr APIについては以下を参考にしました（ありがとうございます）。 Tumblr API – JSON 形式で Javascript で読み込み表示する | gutarin API | Tumblr ブログのフッター等にjQueryでTumblrに投稿した画像を表示する - かちびと.net I have added a event calendar of letters and letterpress on HOME page. I use the “ FullCalendar ” that is a jQuery plugin and uses AJAX to fetch events provided by Google Calendar on-the-fly. I customize the calendar style by modifying its CSS and FullCalendar's jQuery. And I have added Tumblr API to show images of “The Museum of Lines” and “The Moji Shop”. In addition to this, I have separated NEWS page from HOME page.