つくりてのざれごと

イラスト入りロゴの制作 残念ながらコンペで落選しましたが、このような犬のイラストを用いたレストランのロゴを作成しました。 このお店は、ドッグラン併設の犬と一緒に入れるバリの雰囲気を持つレストランということでしたので、頭にはバリの民族衣装風ヘッドドレスを付けた、看板犬でもあるゴールデンレトリーバーが、フリスビーならぬ大文字のNを咥えて「レトリーブ」してくるイメージとしたりと、我ながら楽しいロゴができました。 また、お店の壁が黒色でもあるということで、黒地に白抜きのバージョンも作成しました。 使用書体は、 Centaur Pro Bold になります。 手書き文字のロゴ制作も 自分で書いた文字のロゴの制作もしています。 日本語よりもアルファベットを得意としています。カリグラフィー歴11年になります。 実際に制作したものはまだお見せできませんので、参考例として、私の屋号を書いてみたものを掲載します。 元の書体はイタリック体ですが、 Hermann Zapf 氏や Gottfried Pott 氏などのドイツ系のカリグラファーや、アメリカの John Stevens 氏などを参考にしつつ、かなりオリジナルな書き振りになっています。 ロゴ制作承っています ということで、以上のようなロゴ制作は随時承っておりますので、お気に召しましたならばご連絡お待ちしております。 mail eszett.sz@gmail.com twitter http://twitter.com/eszett

今までのウェブ制作で、jQueryのhoverを使って文字色をふんわり変える効果をつけていたところ、どうもページ読込完了後の最初のマウスホバーでふんわり変わらないことに気付いた。これはjQueryのhover内の始めのfunction（マウスホバー時の関数に当たる）でアニメーション時間を遅くした時に出くわしたもので、それ以後ひじょ〜に気になって仕方が無いのでその解消方法を探してみたら、CSS3を使えば良さそうだということがわかったので以下にチョットだけ解説を。 1. jQueryのhoverで文字色をふんわり変える コードはいつもこんな感じのものを使っている。 $(function(){ $("a").hover( function () { $(this).stop().animate({color: "任意の色A"}, 500); }, function() { $(this).stop().animate({color: "任意の色B" }, 500); } ); }); jQueryのhoverは、対応ブラウザが多いのだが、ページ読込完了後の最初のマウスホバーではアニメーションが効かないようだ。この現象は、特に、CSSにもa:hoverを同時に指定している場合に起こる現象のようだ。 対応策としては、CSSのa:hoverでの指定はしないことで、アニメーションが効かない現象は解消されるが、これだとjQueryが読込めない時にa:hoverが出来なくなる、という欠点がある。 2. CSS3のtransitionで文字色をふんわり変える 通常のリンク色とマウスホバー時の色指定はこんな感じ。 a {color: 任意の色A;} a:hover {color: 任意の色B;} CSS3のtransitionの対応ブラウザは、IEがver10のみで、他のブラウザもベンダープレフィックスでの対応となっている。 しかし1.と違い、ページ読込み完了時の最初のマウスホバーでも効く。 なぜなら、CSSのa:hoverはそのままで、aに a { color: #000; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-...

ワタクシがwebデザイン上一番気にするのが見出しのマージン。いつもその時の感覚で決めるが、しっくり来ないことが多々ある。何か巧い方法が無いものかと『 文字の組方ルールブック ヨコ組編 』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。 2013.5.14追記 デモページの内部に書き込んでいたこのスクリプトを外部ファイル化。 上下マージン比1:1時と8:5時を ボタンで切り替えられるデモページ を追加。 参照 日本エディタースクール編. 文字の組方ルールブック ヨコ組編 . 本エディタースクール, 2001 JavaScript：文字を数値に変換する方法その２ | THE HAM MEDIA BLOG line-height の値には単位なしが良いとされる理由 - lucky bag Can I use rem units? ほか、色々なサイト・ブログを参照させていただいた。深謝。 注意 なにせjQueryはおろかJavaScript、いやプログラミング全般に素人なので間違ってたりする可能性があるので、使用時は自己責任でお願いする。 実作したweb組版 本文の文字サイズ・1行の字詰・行間（行送り）などを決めると版面が決まる。見出しもその版面に則り「行取り」の方法でその上下のアキを決めていく。具体的には下図をご覧あれ。本文だけでなく見出しも行に綺麗に乗っているのがわかる。 本文サイズ12px、行高22px、行間10px、42字詰。各見出しサイズなどは図の通り。 完成形をブラウザで表示後キャプチャし、イラレで作成した水色の版面上にキャプチャ画像を配置した。 web組版の注意点 行送りの設定方法がDTPと異なる。 webの行送りはline-heightで設定するが、これは厳密には文字通り行の高さを設定するもので、アキの付き方は以下の図の通りになる。 本文上下のグレー網がline-heightで設定されるアキ これを踏まえて版面設計や見出しのマージンを算出する。 見出しマージンの計算式 ということで、計算式を導くために、下図のように必要な部分を設定。 var bFont = body要素（本文）のfont-size var bHe...

本日はワタクシの管理している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 ページ下部の例示をご覧あれ。

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

本日、拙サイトロゴを「eszett」から「ß」に変更してみた。 現在の拙サイト。新しいロゴに変更してみた 従来の「eszett」ロゴはサイドのナビ上に仕込んでページダウンすると現れるようにした。 「eszett」ロゴはサイドのナビ上に それから序でに、試しで手書きの「eszett」も作ってみた。 手書きの「eszett」 ただ、この手書きの「eszett」は拙サイトの雰囲気に合ってないような気がして悩み中。もう少し字の雰囲気を変えた方が良いのだろうな…。