合成フォントの設定方法 イラストレーター編

Twitterで横浜市が無料配付しているフォント
imagine yokohamaについて投稿しましたが、
このフォント、ほぼ仮名しかないフォントです。
制作側の人間にとっては何でもないことですが
念のためadbeイラストレーターでの合成フォントの設定方法を書いておく事にします。

使用しているのは Mac,illustlatorcs4です。
タイトルにイラストレーター編とありますが、これのみです。あしからず。

まず、イマジン・ヨコハマ フォントをこちらからダウンロードしてください。

http://www.city.yokohama.lg.jp/bunka/outline/brand/output02.html

フォントをPCにインストールしたら、イラストレーターを立ち上げてください。

新規ドキュメントを開き、文字を打ってみます。

「文字」ウィンドーで書体をイマジン・ヨコハマ フォントにします。

イマジン・ヨコハマ フォント見本

 

 

 

 

 

書体がイマジン・ヨコハマになりましたが、上の段の漢字はゴシックです。

この書体には漢字が入っていない為、無い字は別の書体に置き換わってしまいます。

したの段の漢字「横浜」はこの書体にある為正しく表示されています。

こういう書体は他にも多くあります。写植時代から仮名のみ別の書体というのはありましたね。OKLかNKLかなんて懐かしいです。

それでは合成フォントの設定方法です。

まず、書式→合成フォントを開いて右の「新規」ボタンを押してください。

合成フォントテーブル

 

 

 

 

 

好きな名前で合成フォントの新規登録をします。

ウィンドーで、漢字:かな:全角約物:全角記号:半角欧字:半角数字をどの書体にするか選んで行きます。

かなは当然イマジン横浜ですね。合わせる漢字は好きな書体でいいんですが、太さがかなに近いものがいいでしょう。私は“TBUD丸ゴシック Std SL”にしてみました。かな以外の指定はかなと同じ書体にしましょう。

合成フォント設定画面

 

 

 

 

 

 

指定が出来たらOKを押して、先程打った文字をいま作った合成フォントにしてみます。

合成フォントは書体リストの一番上にあります。

設定完了

 

 

 

 

 

 

これで完了です。いろいろな組み合わせが出来ますので、応用してみてください。

facebookページのカバー写真サイズ

新しくFBページを開設したのでカバー写真を作らなくっちゃと思ったんですが、どうしても忘れちゃう。カバー写真のサイズは幅851ピクセル、高さ315ピクセルです。ここに書いてありますね。

店のイメージカラーがオレンジなんで、オレンジな写真を使おうと思います。ちなみにここは宣伝スペースじゃないので、広告的な文句は入れてはいけないそうです。

 

フェイスブックのガジェットを貼る方法

これは簡単。というか、この頁のリンクをどこかにメモっておけばよろしい。

https://developers.facebook.com/docs/reference/plugins/like-box/

幅を決めて、自分のfbアドレスを入れて、Get codeを押せばコードが入手できる。簡単。

WP ログインできない(焦った!)

ずぶの素人はこれだから怖い。
ダッシュボードよりサイトアドレスを弄っていたら、突然レイアウトが崩れ、ログインも出来ないように!
相当焦りましたが、ググッてみると素人がよくやらかす失敗のようです。
直し方はこちらに詳しく書いてありますね。助かった〜。

メールフォームで一部の文字のみ文字化け

ほぼ終了しているはずの企業HPで、フォームからのメールが一部文字化けしているとの連絡。
どうして??
もう何ヶ月も稼働しているのにいまさら・・・しかも一部分だけ。
まだ、詳しい情報が無いのでわらないが、フォームのcharsetもサーバーもsift_jisで間違いなし。
全体じゃなく一部なのでエンコードの問題じゃないと思うし。
ブラウザ、メーラー、OS、あとはケータイって事はあるのか??

CSS 画面上の隙間を無くす

ホームページを作れる人なら解ると思いますが、パッディングというのは要素と周りの間のアキ数値(微妙に違うか)のことです。レイアウトしていく時によく使うのがこのパッディング、マージンですね。ところが、ページ全体を画面の上に隙間なくつけようと思ってbodyにmargin=”0px”と入れても隙間はなくなりません。これは、ブラウザの初期値として勝手に隙間が空いてしまっているためです。隙間を無くすためには、初期値をクリアにしなければなりません。CSSのできるだけ上の位置に次のコードを書き込みます。

*{margin: 0; padding: 0; }

これでOK! こちらも参考になります。

 

 

Proudly powered by WordPress | テーマ: Baskerville 2 by Anders Noren

ページ先頭へ ↑