つくりてのざれごと

思うところあって、拙サイトにmetaタグを追加することに。そしてBlogger2つとTumblr2つを独自ドメインに変更した。 拙サイトにmetaタグを追加 追加したのは、 <meta name="format-detection" content="telephone=no" /> <meta name="copyright" content="©2012–2013 eszett design, Osaka Japan" /> <link rel="canonical" href="http://eszett-design.com/" /> の3つ。 1番目は、iPhone上で数字の羅列が勝手に電話番号と解釈されてリンクにならないようにする設定、とのことで、念のために導入（XHTMLに使って良いかはっきり判らないが、 Another HTML-lint 5 でチェックしてもエラーにならなかったので良しとする）。（※参照：「 iPhoneのSafariでこのblogを見たときに数字の列が電話番号扱いされないようにした | コーヒーサーバは香炉である 」深謝！） 2番目は、著作権表記metaタグ。元々フッターに表記しているが、これも念のため。 3番目は、「URL正規化タグ」なるもの。拙サイトの場合、http://www.eszett-design.com/の他にhttp://eszett-design.com/もあって重複しているが、これを指定した方へ統一して、もう一方へアクセスした場合もリダイレクトしてくれる、らしい。（※参照：「 link rel="canonical"（カノニカルタグ）の使い方。URLを正規化させて重複コンテンツの発生を防ぐ方法 | SEOのホワイトハットジャパン 」深謝！） BloggerとTumblrを独自ドメインに変更 Tumblrに独自ドメインを設定するのは簡単で、契約しているレンタルサーバーでサブドメインを設定してそれをTumblrのカスタムドメイン設定に導入すれば良いだけ。 大変だったのはBloggerの方。 これに先立ってこのNE...

ホンマに性懲りも無く本日も拙サイトその他一式のマイナーチェンジを行なう。 トップページのメインに掲載するものを最大2つに絞り込む。その時々の旬な自分の仕事やプロジェクトをピックアップするようにした。 大見出しの文字サイズを大幅に大きくし、大見出しのみの書体も変更。 薄い文字色とリンクhover時の文字色の変更。 上記に伴って、CSSにてレイアウトの微調整。 NEWS・MOJIRU・LETTER-PRESSの各ブログ及びLINE MUSEUM・MOJI SHOPは、拙サイトの変更に合わせた。 チョット珍しい本を紹介するページ（RARE）を新設（といっても2冊のみだが）。 昨日までのレイアウトが… こんな感じにスッキリ。 たぶんこれで落ち着いた、と思う。。。

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

本日は午後よりBlogger（このブログ、 文字る 、 活字の小箱 ）およびTumblr（ 文字の雑貨店 ）のテンプレートを、拙サイトとほぼ同仕様へ大幅に改造。Bloggerは拙サイトをふまえて独自のCSSを組み、Tumblrは拙サイトで使用のCSSを読込み、微調整は独自CSSを組んだ。jQueryは丸々拙サイトで使用のものを読込んだ。意外にすんなりと改造できた。明日は残りのTumblr（線の博物館）の改造。

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

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.

文字グッズの陳列棚サイト「 文字の雑貨店 」始めました。 Introducing items related to the letter—I have just opened a website “ The Moji Shop ”.

線に魅了され、線に興奮し、線に感嘆するためのサイト「 線の博物館 」始めました。 Affecting, exciting, and amazing lines that inspire me—I have just opened a website “ The Museum of Lines ”.