--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2008/01/03

Template Grad_Flower for FC2 Blog

grad_flower_s.jpg
テンプレート grad_flowerです。
FC2共有テンプレートにて公開中。


*テンプレートの文字サイズの変更方法について追記致しました。
質問をいただきましたので、追記させていただきます。


<span style=font-size:x-small>小さい文字</span>が、適用されていないようだということでしたので、WindowsのIE6、7で確認したところ、確かに本文とx-small指定した文字が同じくらいに見えました。

変更例1:grad_flower_css1.html
(テンプレートの管理画面からgrad_flowerのスタイルシートにコピーしてください)

この例は、本文部分だけfont-familyを変えたものです。いろいろ指定を変えて試した結果、font-familyの指定によって表示される文字の大きさが若干違うようでした。そんなに差はないのですが、少し小さくなったでしょうか。

もともと指定してあるフォントのサイズが小さめなので、お好みでスタイルシートのfont-sizeで指定してあるpxを大きくすることも出来ます。


また、今のテンプレートでは、font-sizeをpx指定してありますので、WindowsのIEで、文字のサイズを変更することは出来ません。ブラウザで文字サイズを変更できるようにするためには、px指定ではなく%指定やem指定を使う必要があります。ですが、フォントの指定方法によっては、異なるブラウザ間で、見た目がだいぶ変わってきます。

以前、スタイルシートについて調べたときは、Macを使用していて、Windowsのテスト環境がなかったので、Windows(IE)に適した表示を確認することが出来ませんでした。
そこで、見る人のつかいやすさより、比較的簡単に見た目を統一できるpxでサイズを指定していたのですが、今テスト環境がありますので、いろいろ試してみることにしました。

%指定では、親要素に指定されたサイズを引き継いでいくんですね。なるほど~。
なので、まずbody要素に%で基準にしたいサイズを指定しました。が、Win IE(文字サイズ中)で見た場合と、Mac Safariで見た場合と、見た目の大きさが違います。そこで、html>bodyというIE以外が解釈出来るという指定方法で、同じくらいの大きさに見えるサイズをpx指定します。そしてそこから各要素を%でサイズ指定していきました。

変更例2:grad_flower_css2.html
(テンプレートの管理画面からgrad_flowerのスタイルシートにコピーしてください)

これで、Win IEでも文字サイズが調節出来るようになりました。
この方法なら、body要素のフォントサイズ指定(Win IE > %指定部分、それ以外のブラウザ > px指定部分)を変更するだけで、全体の文字の大きさの調節が簡単に出来ます。

いろいろ勉強になりました☆

スポンサーサイト

「Template Grad_Flower for FC2 Blog 」へのコメント

右側のプラグイン(カテゴリやリンク)が
一部、下ではなく上へずれて表示されてしまうの
ですが修正する方法を教えて頂けませんでしょうか。
宜しくお願い致します。

文字サイズについて質問した者です。
ありがとうございました~おかげさまでちゃんと表示されるようになりました!(*^▽^*)
迅速な対応、本当にありがとうございました。
それでは。

お、そうなのですね。
質問にお答えしてくださって有難うございます!

>るかさん

こんにちは。素材は自作です。参考にしているものはたくさんありますが、Illustratorというソフトを使って、一から、いろいろ試しながら作っています。

こんにちわ。
一つお伺いしてもよろしいですか?
とてもキレイなテンプレなので、いつか使いたいと思っておりますが(DL済み)、背景や画像は自作なのでしょうか?

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

>なおさん

使ってくださって、ありがとうございます。いいテンプレートが出来るよう頑張りますね。

再び、すみません!

旧管理画面にして適用すると、しっかり出来ました!
お借りしますね☆
お騒がせしましたm(_ _"m)ペコリ
キレイなテンプレート、また期待しております!

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントの投稿


管理者にだけ表示を許可する

「Template Grad_Flower for FC2 Blog 」へのトラックバック

http://kuriyukko.blog32.fc2.com/tb.php/8-80c5b439


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。