投稿

2月, 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 ページ下部の例示をご覧あれ。

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

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

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やら追加しているが省略)完成。 既成のフッタ カスタマイズ後

活版印刷の新作完成

イメージ
Anatomy of Type—Imaginary Lines, Areas, and Heights ドアップ写真 Detail photo 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ブログ(このブログ)の方は、サイトの変更に合わせるようにしたために新設計とした。

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

先日マイナーチェンジしたばかりだが、グループ分けをより明確にする変更を行う。 NEWSグループとしてeszett・mojiru・letter-pressの各ブログをまとめる。 ヴァージョン番号を頁最下部に追加。 ナビゲーションのアニメーションをシンプルな動きに変更。

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

石彫り第2作目完成

イメージ
2012年7月14〜16日の3日間に渡って開催された 第3回ゴードン恵美WS「レターカッティング入門」 にて、文字を完成させて石にトレースしたところでお開きと相成った。 ドローイングしたß(エスツェット) チャコールペーパーを介して石に写したところ ここまでの話は 文字るのブログ の方をご覧あれ。 WS後、関東組・関西組それぞれが勉強会と称して文字彫りを進めていくことにし、我が関西組は10月・11月・1月と勉強会を開催。ワタクシ個人はこの3回で自分の第2作目を完成させた。今回はこの経緯を写真でお送りする。 関西組勉強会—第1回目 2012年10月8日時点 WS後最初の勉強会では上の写真まで彫り進めた。文字の接続部分をどういう風にするか迷ったので今回は保留。今回は12 mmという幅広のチズルで太い幅を彫るので、9時から17時まで彫り続けるのは結構シンドイ。その日のうちに腕は筋肉痛。 関西組勉強会—第2回目 2012年11月3日時点 2012年11月3日時点、接続部分のディテール WS後2回目の勉強会も9時から17時まで彫り続けたが、やはり接続部分をどういう風にするか思案しながらだったので余り進まず。上の写真の通り、太い→細い→太いとスムーズに繋げるのに難儀した。 関西組勉強会—第3回目 3回目の勉強会も9時から17時まで。この回でどうにか完成に持ち込む。まだまだ粗いけども、今回は色入れもせず素のままで。ちょうど完成した15時半頃、ここぞとばかりのイイ感じの陽射しが差し込んできたのですかさず撮影。 2013年1月27日時点 2013年1月27日時点、斜めから 2013年1月27日時点、ディテール 近づくと粗さが見えますな(苦笑)。この作品の仕様などは 拙website や作品投稿サイト JAYPEG にも掲載しているのでそちらも是非に。 というわけで、3作目は何の文字を彫ろうか、只今思案中。