上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 一部特殊なテンプレートを除いて、当サイトテンプレートはカスタマイズされることを前提でデザインしているものが相当数あります。
 結構入り口で躓いている方もおられそうなので、今回はそのフォントサイズのカスタマイズについてのチュートリアルです。結構簡単なので、挑戦してみてください。


テンプレートを触るコツ

 いきなりHTML画面を開いて見ても、何が何だか分からないと思います。でも、知っている「命令文」はいくつかある場合。
 非常に重宝するテクニックがあります。「画面内検索機能」です。

 キーボードの「Ctrl」+「F」キーを押してみてください。コントロールキーを押したままFキーを押します。

 画面下部に、小さな検索ボックスが出てきましたか?
 出てこなかった方は、こちらのブラウザでカスタマイズすることをお勧めします。(密かに○○撲滅派です☆)

Firefox ブラウザ無料ダウンロード

 この検索ボックスに言葉を入れると、ページ内で検索語がヒットした場合、その言葉をハイライト表示してくれます。
 知っているCSSがあれば、これで即座にテンプレートスタイルシート内を捜索することが出来ます。


フォントサイズを変えてみる

 フォントサイズを変えるスタイルシートの命令文・或いは定型文(プロパティとよく呼ばれます)は

font-size

 です。
 当サイトでも、この命令文は多用していますので、検索ボックスを用いないと探すのは大変です。

 テンプレート編集画面を開いたら、
 検索ボックスに「font-size」と入力して検索してみてください。

 フォントサイズの指定方法は、
font-size : 16px ;
font-size : 90% ;

 等が一般的です。
「px」で指定すれば、ブラウザ規定のサイズで表示されます。
「%」は、前の要素、或いは親要素の「○○%」のサイズという意味です。

 ちなみにフォントサイズの目安は
12px:サ確
14px:サ確
16px:サ確(デフォルトサイズです)
18px:サ確

 この辺り。アルファベットは小さい方が読みやすかったりしますが、日本語に関しては微妙です。訪問者が、あなたと同じパソコン環境で見れない場合の方が多いことに留意しましょう。


変える場所の推定

 プレビューして確認できるとはいえ、ある程度の目星を付けて、なるべく素早くフォントサイズを変えたいと思います。
 そのときに確認するのが、直前にある「コメント文」

/* ヘッダー
--------------------*/

/*--ヘッダー--*/

/*-------------------
------------
ヘッダー
------------
----------------------*/

 テンプレート作者によって、様々な書き方があると思いますが、だいたい「ヘッダー」などと日本語で書かれている場合が多いと思います。
 それを目安にして、フォントサイズをカスタマイズして、プレビューして良いようだったら、「保存」で確定できます。

 プレビューを見ても何も変わっていないようであれば、どこか予期せぬ場所のフォントサイズを触っている可能性があるので注意。
 どこを変えたか分からなくなっても大丈夫。「保存」を押さずに改めて編集画面に入り直せば、HTMLは元に戻ります。

 プレビューではキチンとなっていたのに、改めてブログを見ると、何も変わっていない!

 そういう場合は、ブラウザの上部のアイコン「再読込」、或いは「編集→更新」としてみてください。




当サイトの捜索の目安


基本的のどのテンプレートでも変わらないのが

#header・或いは#banner:ヘッダー・バナー部分
#main:本文・コメントエリア部分
#side:サイドバー
#footer:フッター部分

 となっています。
 ちなみに、当サイトでは、メインカラム記事部分に関しては閲覧者のパソコン設定を重視するという目的でフォントサイズを指定していません。
 本文サイズを変えたい場合がほとんどだと思いますが、その場合は

#main{
width:○○px;
margin:○○○○;
font-size : 14px ;
}


 このように付け足してください。
 なお、メインカラムのフォントサイズを下げると、コメント部のフォントが非常に小さくなる場合があるので、

/* コメント・トラックバックエリア
------------------------------------------------------------ */

 以下のフォントサイズを調節しないと非常に読み辛くなる場合があるので注意してください。


■スタイルシートに関してのチュートリアルは、こちらからもご覧頂けます。
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Wed.09.01.2010
Comment
63
おお!こんな簡単に変更できるとは、、、、、

sakilabo様、感謝感謝です^^


Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。