fc2ブログ
2007.11/29 (Thu)

フォント指定 

VISTA&IE7ユーザーの方から、do_xmas_psbのフォント(文字)の種類をメイリオにするにはどうしたらいいかというご質問をいただいたので、ご回答したのですが、他のテンプレでも同様なので、新しく記事にしておきますね。

PCによって、インストールされているフォントはまちまちです。スタイルシートのフォント指定は、複数のフォントを指定していると、一番前に書いたものが最優先で表示され、それがなければ次のもの、何もなければそのPCに入っている標準のフォントで……というような仕組みになっています。
何も指定されていなければ、そのPCの標準フォントでの表示になりますので、何も指定しないことでも、VISTAユーザーに標準フォントであるメイリオで見せることは可能になるわけです。

なので、いっそ、bodyのフォント指定はなくてもいいかも……と思って、指定なしで、色々なブラウザでチェックしてみたんですが、SAFARIは明朝になるんですねえ(今頃知りました;)。これはちょっと読みづらいかも……もっとも標準フォントが読みづらいなんて思うSAFARIユーザーだったら、標準フォントを変更しているだろうし、たぶん問題ないだろうけど……。

でもまあ、とりあえず、MACの場合は、ヒラギノ角ゴ、なければosaka、WINの場合、メイリオがインストールされていればメイリオで、他のWINはMS Pゴシック、以上のものがなければ、そのPCにインストールされているなんらかのゴシック系で表示されるように、全テンプレを書き換えました。
以前のものをお使いの方で、メイリオにする必要があれば、一番前に'メイリオ',Meiryo,を付け加えか、以下の太字部分のように書き換えてください。

body {
text-align:center; /* IEのバグを利用して中央に配置 */
color:#003; /* 画面全体の文字色 */
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',Osaka,sans-serif; /* 画面全体のフォント指定 */
font-size:12px; /* 画面全体の文字サイズ */
以下略
}



メイリオはきれいですが、ゴシック系のフォントと比べると、幅が広く、太いので、AAを貼る人なんかは注意した方がいいかもです。
VISTAユーザーにもメイリオで見せたくない方は、メイリオ指定部分を取っちゃえば、VISTAであっても、MS Pゴシックが優先表示になります。

FC2の公式テンプレも作っていらっしゃるCFDNさんのブログに次のような記事があったので、
http://blog1.fc2.com/cfdn/blog-entry-46.html
これまで、よくわからないものの; 保険で、\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AFとか\30D2\30E9\30AE\30CE\20Pro\20W3と書いていたのですが、最近、こういう書き方、見かけないので(MACユーザーさんの作るテンプレでも)、おそらく今のSAFARIでは解決しているのだろう……という予測のもとに、ビクビクしながら取っ払うことにしました;

それと、以前、英数字をVerdanaにしたいという要望をいただいたことあるんですが、bodyのフォント指定の一番前にVerdanaを付け加えれば、英数字をVerdana表記に出来ますので、お好みでどうぞ。
font-family:Verdana,以下略
私のテンプレは、全体に欧文フォントを指定していない分(本文の英数字が変わるのあまり好きじゃないので;)、日付けやカレンダーや見出しやページ移動等、個別に欧文フォント指定をしていますので、そのあたりもご必要に応じて、お好みで変えてくださいませ。

ちなみに日本語のフォントは'なんとか'のように、引用符で囲む必要があります。
カスタマイズの際は、引用符を削除し忘れたり,を不要に削除してしまったりしないように気をつけてくださいねー。
スポンサーサイト





テンプレート部門に参加中。クリックしてくださると励みになります♪
23:56  |  カスタマイズ色々  |  TB(2)  |  CM(4)  |  EDIT  |  Top↑

Comment

●VISTA&IE7のコメント投稿欄について

初めまして、こんばんは。
テンプレをお借りしています。
可愛いくて、使いやすいのでとても気に入っています。
それにIE7で表示確認してくださっているので、私のPCでもきれいに表示されて安心して使わせていただいています。
ありがとうございます。

今回はVISTA&IE7のコメント投稿欄のフォントについて質問させてください。
私は今、do_ichigo3cをお借りしています。
私のPC環境は以下のとおりです。
OS:VISTA
ブラウザ:IE7

初めてIE7を見た時からメイリオが気に入っていました。
なので、できればコメント投稿欄もメイリオにしたいなと思ってカスタマイズさせていただくことにしました。
自分なりにCSSでフォントの指定をしたのですが、投稿欄が横に大きく伸びてしまいました。
次にそれを直す為にHTMLで投稿欄のサイズを小さくしました。
ここまでやったらIE7では、きれいに見えました。
でもXPのIE6で見たら投稿欄はかなり小さくなってしまって・・・
IE7ではメイリオでコメントの投稿ができて、尚且つIE6でもきれに見えるようにするカスタマイズ方法はありますでしょうか?

お忙しいと思いますが、お時間のある時でけっこうです。
お返事お待ちしています。
よろしくお願いします。
三田 |  2008.02.11(月) 21:28 | URL |  【編集】

●三田さんへ

テンプレ気に入ってくださって、嬉しいです(*´∇`*)

HTMLの方でフォームにsizeで指定しているのは文字数なので、メイリオみたいに幅広の文字と、メイリオがインストールされてないPCから見た時では(私のテンプレの場合は、XPではMS Pゴシック指定になります)、幅の差が出てしまうので、どのフォントが適用されても、同じ幅にしたいってことですよね?

do_ichigo3cをお使いのようですので、スタイルシートのフォームの設定部分の幅のすぐ後に
!important
と付け加えてください。
すると、HTMLでのsize指定より、CSSでのpx指定が優先されるようになりますので、フォントの種類に関係なく同幅になるんではないかと思います。

do_ichigo3cでの例↓
/* 名前・メール・URL・タイトル等記入欄 */
.form_text {
width:250px !important;
}
/* コメント記入欄 */
.form_textarea {
width:300px !important;
}
/* 送信・削除ボタン */
.form_button {
width:40px !important;
}

余談ですが、フォーム周りがCSSのテンプレもあるんですが、そっちは、HTMLでの指定しかありませんので、もしお使いになる機会があり、ご必要なら、付け加えて、同様に処理してくださいませ。
あと、CSSレイアウトなのに、フォーム欄がテーブルレイアウトでのCSS設定を、単に消し忘れていたものも発見しました; これは目障りなら消してもいいし、放置してもいいし、上記のような措置が必要なら、そのまま利用してください(HTMLの方に同名のクラス名を追加すればOKです) 。
どこ |  2008.02.12(火) 01:30 | URL |  【編集】

こんばんは。
すぐにお返事していただいてありがとうございます。
お忙しいのにすみませんでした。
さっそく試させていただきましたら、どちらのOSでもきれいに表示することができました。
本当にありがとうございました。

新作テンプレ楽しみにしています。
三田 |  2008.02.13(水) 00:00 | URL |  【編集】

●三田さんへ

解決したようで、よかったですe-68

手っ取り早くHTMLの方の指定を取っちゃえばいいんでしょうけど、CSSだけじゃなく、HTMLにも指定していた方がいいと言われているもので……もっとも、今時CSSをサポしてないブラウザもないですよねい……でもまあ気休めで!?

それではブログ運営、頑張ってくださいね(^0^)/
どこ |  2008.02.13(水) 22:45 | URL |  【編集】

コメントを投稿する

URL
COMMENT
PASS  編集・削除するのに必要
SECRET  管理者だけにコメントを表示
 (現在非公開コメント投稿不可)
 

▲PageTop

Trackback

この記事のトラックバックURL

→http://dokode.blog87.fc2.com/tb.php/148-b686967f
この記事にトラックバックする(FC2ブログユーザー)

この記事へのトラックバック

-

管理人の承認後に表示されます
2013/11/30(土) 03:36:15 | 

-

管理人の承認後に表示されます
2013/12/01(日) 00:34:30 | 

▲PageTop

 | HOME |