Thursday, 28 February 2013

WIKIの見た目変更とwebフォントの微調整

本日はワタクシの管理しているWIKIの1つと、拙websiteやblogger、tumblrで使用中のwebフォントの微調整をば。

WIKIの見た目変更

先日拙websiteやblogger、tumblrのマイナーチェンジを施したので、WIKIの方も同じような見た目にしてみたく。
別段特別なことをしたわけでもなく、単純にWIKIの設定項目の「CSSカスタマイズ」にてCSSを設定したのみ。

デフォルトの見た目

CSS設定後


因みにこのWIKIは、@WIKIを利用している。

webフォントの微調整

拙websiteやblogger、tumblrでは、SNSアイコンやページ右下の「scroll to top」ボタンやサイドメニューの「dropdown」マークをwebフォントLigature Symbolsにて表現している。しかしこのLigature Symbols、IE未対応(IEがLigature機能に未対応というべきか)ゆえ、IEでは「scroll to top」ボタンや「dropdown」マークがそのまま文字として表示されてしまったので、読込ませ方を変更して、IEでは現れないようにした。

具体的には、CSSにて
.lsf-icon:after {
content: 'dropdown';
(以下略)
}

と指定していたものを
.lsf-icon:after {
content: attr(title);
(以下略)
}

と変更し、「dropdown」マークを表示したい箇所のタグに
<span class="lsf-icon" title="dropdown">works</span>

と、title属性にて指定すると、未対応のIEでは現れないようになる。

詳細は、Ligature Symbolsページ下部の例示をご覧あれ。

Tuesday, 26 February 2013

拙WEBSITEその他一式マイナーチェンジ その4

ホンマに性懲りも無く本日も拙サイトその他一式のマイナーチェンジを行なう。

  • トップページのメインに掲載するものを最大2つに絞り込む。その時々の旬な自分の仕事やプロジェクトをピックアップするようにした。
  • 大見出しの文字サイズを大幅に大きくし、大見出しのみの書体も変更。
  • 薄い文字色とリンクhover時の文字色の変更。
  • 上記に伴って、CSSにてレイアウトの微調整。
  • NEWS・MOJIRU・LETTER-PRESSの各ブログ及びLINE MUSEUM・MOJI SHOPは、拙サイトの変更に合わせた。
  • チョット珍しい本を紹介するページ(RARE)を新設(といっても2冊のみだが)。

昨日までのレイアウトが…

こんな感じにスッキリ。

たぶんこれで落ち着いた、と思う。。。

Sunday, 24 February 2013

bloggerのフッタのちょっとしたカスタマイズ(非推奨)

このNEWSブログは先日から弄っているが、本日もcssにてレイアウトの微調整を施した。
そんな中、どうしても気になるのがフッタ部分。拙websiteのフッタと同じ形式にするため、ちょっとしたカスタマイズを仕掛けた。以下、自己責任にてお願いする次第である

オリジナルのものにするために、既成のフッタ部分
<!-- outside of the include in order to lock Attribution widget -->
<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
を削除する必要があるが、一度削除してしまうと元に戻せないので、コメントアウトで隠す方法を採ることにした。
<!-- outside of the include in order to lock Attribution widget
<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section> -->
上記の通りにコメントアウトして隠して、あとはレイアウト画面で「HTML/JavaScript」ガジェットを追加してそれに拙websiteのフッタと同じHTMLを入れ、テンプレートデザイナーにてCSSを追加して(他にテンプレートのHTML側にもwebfontやらJavaScriptやら追加しているが省略)完成。

既成のフッタ

カスタマイズ後

Saturday, 23 February 2013

活版印刷の新作完成

Anatomy of Type—Imaginary Lines, Areas, and Heights
ドアップ写真 Detail photo

Letterpress Mini-Poster “Anatomy of Type—Imaginary Lines, Areas, and Heights”
Vandercook SP-15にスミ版の樹脂版をセット
Setting the photo-sensitive printing plate on the Vandercook

本日、なに活さんにてワタクシの活版印刷での新作の立会に伺ってきた。今回は2色刷。
詳細は近日公開予定なので、今回はチラ見せのみで。

2013年3月5日追記:
本日より販売開始。詳細は拙サイトにて。
新しい活版ミニポスター『Anatomy of Type—Imaginary Lines, Areas, and Heights』、一体何か。書体の「ベースライン」「ミーンライン」といった仮想線や高さなどの名称や別名を収集したもの。意外に別名が多いのにビックリ必至。印刷はなに活さんにて手動校正機「Vandercook SP-15」にて2色刷。


I have just finished my new print that Nanikatsu printed in letterpress. For more information coming soon!

On 5 March 2013:
it is available for sale! For more information on my website!
NEW letterpress Mini-Poster “Anatomy of Type—Imaginary Lines, Areas, and Heights”.
I have collected a variety of names that type has for a same imaginary line, area, and height. I have designed it, and NANIKATSU, which is a printing company, printed this with its own “Vandercook SP-15” proof press.

拙websiteマイナーチェンジその3とNEWSブログ修正

性懲りも無く昨日今日とサイトのマイナーチェンジと、NEWSブログ(このブログ)の大幅変更を行う。
サイトの方は、

  • トップページのNEWSグループ、eszett・mojiru・letter-pressの各ブログをAPIで読込んだものをサイドナビの下に移動し、各エントリ数も3→1に減らした。
  • 上記に伴って、CSSにてレイアウトの微調整。

などを行なった。
NEWSブログ(このブログ)の方は、サイトの変更に合わせるようにしたために新設計とした。

Thursday, 21 February 2013

拙websiteマイナーチェンジその2

先日マイナーチェンジしたばかりだが、グループ分けをより明確にする変更を行う。

  • NEWSグループとしてeszett・mojiru・letter-pressの各ブログをまとめる。
  • ヴァージョン番号を頁最下部に追加。
  • ナビゲーションのアニメーションをシンプルな動きに変更。

Monday, 18 February 2013

拙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」は設定なし)、横スクロールも現れることなく見事におさまった。

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

Monday, 4 February 2013

石彫り第2作目完成

2012年7月14〜16日の3日間に渡って開催された第3回ゴードン恵美WS「レターカッティング入門」にて、文字を完成させて石にトレースしたところでお開きと相成った。

My Drawing ß (final)
ドローイングしたß(エスツェット)

Tracing on a slate
チャコールペーパーを介して石に写したところ

ここまでの話は文字るのブログの方をご覧あれ。

WS後、関東組・関西組それぞれが勉強会と称して文字彫りを進めていくことにし、我が関西組は10月・11月・1月と勉強会を開催。ワタクシ個人はこの3回で自分の第2作目を完成させた。今回はこの経緯を写真でお送りする。

関西組勉強会—第1回目

Just Carving
2012年10月8日時点

WS後最初の勉強会では上の写真まで彫り進めた。文字の接続部分をどういう風にするか迷ったので今回は保留。今回は12 mmという幅広のチズルで太い幅を彫るので、9時から17時まで彫り続けるのは結構シンドイ。その日のうちに腕は筋肉痛。

関西組勉強会—第2回目

Just Carving
2012年11月3日時点

Just Carving (detail)
2012年11月3日時点、接続部分のディテール

WS後2回目の勉強会も9時から17時まで彫り続けたが、やはり接続部分をどういう風にするか思案しながらだったので余り進まず。上の写真の通り、太い→細い→太いとスムーズに繋げるのに難儀した。

関西組勉強会—第3回目

3回目の勉強会も9時から17時まで。この回でどうにか完成に持ち込む。まだまだ粗いけども、今回は色入れもせず素のままで。ちょうど完成した15時半頃、ここぞとばかりのイイ感じの陽射しが差し込んできたのですかさず撮影。

letter carving “ß eszett”
2013年1月27日時点

letter carving “ß eszett”
2013年1月27日時点、斜めから

letter carving “ß eszett”
2013年1月27日時点、ディテール

近づくと粗さが見えますな(苦笑)。この作品の仕様などは拙websiteや作品投稿サイトJAYPEGにも掲載しているのでそちらも是非に。

というわけで、3作目は何の文字を彫ろうか、只今思案中。