文字サイズの変更 / カスタマイズ

ブログが作りたい!FC2ブログのカスタマイズ > 文字サイズの変更 / カスタマイズ

文字サイズの変更 / カスタマイズ

文字サイズの変更 / カスタマイズ

カスタマイズ(5)

今回は、文字サイズを変更してみようと思います。

もちろん、既存のテンプレートを使えば、バランス良く文字のサイズは調整されているので、たいていは変更の必要がありません。

ただ例えば、「年配の人たち向けのブログ」などの場合は、文字サイズを、少し大き目にしておく方が親切かもしれません。

お話は、次の順番で進みます。

▲ページの先頭に戻る

文字サイズを変更してみる

1:テンプレート「alice」

(01)

今回も、テンプレート「alice」を使ってみます。お持ちでない人は、「共有テンプレート追加」からダウンロードして、適用してください。

テンプレート「alice」

▲ページの先頭に戻る

2:今回行うこと

(02)

今回は、記事内の文章の文字サイズを、もう少し大きくしてみます。

記事内の文章の文字サイズ

さて、どうすれば良いか、分かるでしょうか?

文字サイズの変更については、記事「文字サイズの変更【font-size】(1):CSS入門」と「文字サイズの変更【font-size】(2):CSS入門」で説明しました。

また、記事内という特定の箇所での指定は、前回の記事「画像を罫線で飾る / カスタマイズ」で説明しています。

応用力がうまくかみあえば、もう出来てしまうわけです。経験を増やして、応用力を高めましょう。

▲ページの先頭に戻る

3:HTMLコードの特定

(03)

まず、HTMLコードの中の変更箇所がどこなのか?探します。

探す方法は、記事「カスタマイズの基礎テクニック」でお話した通りです。ブラウザでソースを表示して、探してみてください。

私の場合は、「テスト01です。」をキーワードにして探します。どうやら、次のコードのあたりが「記事」を表示しているようです。

記事内だけに適用したいわけですから、クラス名「entry-body」、あるいは「aabody」を使って指定してあげれば良さそうです。

▲ページの先頭に戻る

4:現状のfont-sizeの確認

(04)

現状、font-sizeがどのように設定されているのか? CSSコードを確認します。

CSSコードを、テキストエディタなどに貼り付けて、「font-size」をキーワードにして検索してみましょう。

まず、次の箇所に。font-sizeが記述されていることが分かります。

適用先を「*(アスタリスク)」にしている指定方法は覚えていらっしゃるかしら?

そうです。「すべて」を意味します。

「すべて」だと、font-sizeに関係がないタグにも処理を行う分、無駄があるような気もしますが、何か意味があるのか?どうなのか?分かりかねます。

(05)

[f3]キーを打鍵して、次の候補なども見ていくと、見出しタグやコメント・トラックバックのヘッダーに指定していることが分かります。

適用先

font-size

*

12px

h1

24px

h2

16px

#blog h3

13px

#blog h3 a

13px

.comment-header

13px

.trackback-header

13px

つまり、全体に「font-size:12px;」を指定して、あとは「12px」以外にしたい箇所に上書き指定しているわけです。

ちょっと、この辺の感覚を理解するには、慣れるまで時間が必要かもしれません。

「このおっさん、何を言っているんだ?」と考え込むより、「よく分からないけど、サイズ変えたろ」くらいのノリで進めてみてください。

▲ページの先頭に戻る

5:CSSの指定

(06)

次は、「entry-body」、あるいは「aabody」をキーワードにして、CSSコードを眺めてみましょう。(検索する)

次のようなコードが見付かりました。前述の「font-size」による検索で引っ掛からなかったわけですから、当然、「font-size」の指定もありません。

また、「.entry-body p」や「.aabody p」も見当たりません。

もし、SEO対策の観点も含め、記事を<p>タグで書こうと思っているのであれば、追加書きする必要があります。

(07)

直近の「aabody」を使って、記事内だけに適用する指定を記述してみます。現状の「font-size:12px;」より少し大きく指定してみましょう。

次のような指定で、いかがでしょうか。

追加書きしてみましょう。

(08)

ブラウザで表示してみてください。記事内の文字が大きく表示されているはずです。めでたし、めでたし。

記事内の文字が大きく表示された

▲ページの先頭に戻る

カスタマイズする範囲

1:悩みどころ

いかがでしたか?文字サイズの変更は、出来たかしら?

おそらく、CSS入門からお付き合いくださっている人は、「え?これでいいの?」と物足りなさを感じている人もいらっしゃるのではないでしょうか。

「px(ピクセル)指定でいいの?IEでは固定表示されるじゃないですか!ぷーすか、ぷーすか」と納得できない人もいらっしゃるはずです。

しかし、どこまでカスタマイズする範囲と決めるのかは、ちょっと悩みどころです。

▲ページの先頭に戻る

2:状況にあわせて決める

自分の好きなように変更していくのか、あるいは、テンプレート制作者の意向に沿って変更していくのか、考えてみる必要があります。

一般的に、時間が無限にあるわけではないし、他の人のCSSコードを上から下まですべて把握するのは大変です。

現実的には、テンプレート制作者の意向に合わせて記述を加える場合が多いのではないかと思います。

「px(ピクセル)くらい、ちゃちゃっと変えればいいじゃん」と思う人もいらっしゃるかもしれませんが、全体的なバランス、レイアウトが崩れてくる可能性もあります。

また、font-sizeは特に、IEや、旧いOperaでバグが出やすいので、各ブラウザでのチェックも大変な作業となります。

自分のスキルと、カスタマイズにかけられる時間を鑑(かんが)みて検討する必要があります。

▲ページの先頭に戻る

3:「%」指定したい

それでも、例えば「%」で指定したいような場合は、「*(アスタリスク)」ではなく、「body」に 75%を指定して、あとはブラウザで表示を確認しながら、ひとつずつ変更していけば宜しいかと思います。

各ブラウザでのチェックもお忘れなく。

▲ページの先頭に戻る

次回予告

カスタマイズの記事を通してご覧になっている人は、「同じような話を何回も聞いているような気がする・・・デジャブ?」などと思い始めていることかと思います。

そうなのです。結局、カスタマイズと言っても記事「カスタマイズの基礎テクニック」でご紹介した手順の繰返しです。

おそらく、そろそろ飽きてきたと思うので、次回は、変数タグの話をしようかと思います。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/05/27 更新日:2008/05/27

« 「画像を罫線で飾る / カスタマイズ」|「FC2変数タグとは? / カスタマイズ」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

笑った

こんにちは!
今日のイラスト、大笑いしてしまいました。
おもしろいよう


パソコン飛んでるww
キーボード押さえてる後ろ頭がなんかめちゃくちゃツボったです。
だめだおかしい。笑いが止まらない!


フォントサイズは以前、kumaさんといろいろお話をさせて頂いたので
とても興味深いところです。
今のところ自分は13~14pxが多いけど、やっぱり%で指定した方がいいのかなあ。
emだと、もっとこまかーく指定できるって話もあるけど、ずっとpx指定だったから
なんかそこから抜け出せない・・・。いいのかなこれで。

「*」は、kumaさんのブログで知って使い始めました。
marginとpaddingを0にしています。
フォントサイズもそこで出来るのか・・・。
全体のフォントサイズはbodyでやってたけども、どっちでもいいのかな。


次は変数かあ!
たのしみだあ!
ここまったく初心者なので、テカテカしてまってます!

浪漫飛行

ひろこさん、こんにちは。
コメントありがとうございます!(・∀・)/

(01)空中戦
やっぱ、これからの時代、
パソコンも空くらい飛べるようにならないとあかんよね。

どげんかせんといかんよね。(`・ω・´)

(02)font-sizeの単位
自分で最初から作っていないCSSの文字指定って、
けっこう難しいッス。

ターゲットユーザに、年配の人も含まれるのであれば、
相対的に変動する単位指定の方がいいとは思います。

IEブラウザを使っている確率も高いだろうし。

あとは、時間との相談でしょうか。

(03)「*」
「*」で「font-size」は・・・どうなんでしょうね。
「font-size」が関係しないタグにかけるのは無駄だと思うのだけど。

でも、バグとかの理由でわざとやっている可能性もありますよね。
やっかいやわー、分からんわー、汗ばむわー。

「*」にmarginとpaddingの初期化以外のものを入れるのは、
私は聞いたことがないけどなー。

(04)変数
次は変数です。お楽しみに!(o゚ω゚o)ノ

読んできたんだぜ

こんばんは!
文字の大きさの単位の事がよくわかっとらんかったので、赤面しつつ、
kumaさんの記事の
http://kumacrow.blog111.fc2.com/blog-entry-280.html
を読んできました。

emもpxも微妙ですねー
これから%を基本にして作っていく事にしようかな!

KumaCrowさんのブログはかゆいところに手が届いていいなあ!


そうそう、「*」でmarginとpaddingを0にする様にしてから、
何となくハックの数が減った気がします。
気のせい?違うかなあ。絶対関係あるとおもう!
「*」は何かすごいやつだけど、フォントの大きさ指定するのはちょっとわかんない・・・。


あと、最近kumaさんのブログ、もう一つの方をチラチラみてます。
あっちもこっちも読みやすいよう

font-size

ひろこさん、こんばんは。
コメントありがとうございます。

現状、font-sizeは、%がいいみたいですねぇ。
以前は、emをけっこう使っていたんですが、
バグ対応のために、おかしな記述をしていました。

とりあえず、ちょっと使い慣れて落ち着いてきました。
%で行けそうです。

この度のサイト制作でも、その辺どうするか、
ひろこさんの判断になりますね。責任重大!・・・なんつって、
プレッシャーかけてみたりして。

やっぱし、「*」にゼロあてると楽かしら。どっちがいいのかなぁ。
私は最近、必要なタグにだけゼロあてています。

あらやだ、もうひとつの方って、まだ作成中のところかしら。
はずかちー。(〃▽〃)いやーん

あらやだ!

こんばんは!
あらやだ奥さん!もう一つのほうは制作中だったのね!?
覗いちゃった・・・ごめんちゃい・・・
完成するまでもう覗かない事にする!


次のつくる例のサイトは、%でやってみようと思います。
次のサイトを見に来る人達は、年齢幅が広いので・・・。
固定はうまくないかもしれない。
ただ、ボックスの幅とかも今までずっとpxで固定してたから、
ちょっとそこらへんはてこずりそう。
kumaさんはボックスも%ですよね。
ボックス幅も%、難しそうorz


奥さん

ひろこさん、おはようございます!
コメントありがとうございます。

そうざーますのよ、奥さん!
制作さんとムチューってしているざます。

でも、公開しているのだから、
ご覧いただいてもいっこうに構わないざますけど、
なかなか更新できないでいるので、
恥ずかしいざますのよーん。(´Д`;)

ガンガンご覧いただいて、
ダメだししてくれると嬉しいざます。


そう。%にするとなると、最初ちょっと不安でした。
レイアウトがめっためたになりそうで怖いの。

でも、やってみたらそうでもなかったよ。

バグとか出なければ、pxで指定するのと、
そんなに何か違いがあるというわけでもない感じでした。

それに多少崩れたからといって、気にしなくなっちゃいました。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/309-eceadf6a
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて