スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

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

テンプレート講座第六回 
2005 11 27
Sun 20:09:03

テンプレート講座  Comment 0  Trackback 0  edit.

今回はちょっと趣を変えてカスタマイズに頻繁に出てくるスタイルシートを取り上げてみようと思います。(質問も多いですしw)
「初心者に優しい講座」と言う事で行きましょう。

カスタマイズと言えば・・・・

1,文字色を変えたい。
2,文字サイズを変えたい。
3,文字の種類を変えたい。
4,行間の幅を変えたい。

など文字に対するものが多いですね。
まずはこれらは全てスタイルシートの変更で出来ると言う事です。

1, color: #FF0000;(文字色はredなどの英語でも構いません)
2, font-size: 10pt;(100%とか10pxとか書かれてます)
3, font-family: "Comic Sans MS","MS Pゴシック", "Osaka";
4, line-height: 120%;

上の設定が上の表に対応する属性の書き方です。
英語を習って居る方なら分かると思いますが、スタイルシートやHTML文と言うのは作った人が英語圏の人なので英語表記です。
英語を全く出来ない私でも今ではどのような意味か分かる程度の簡単な単語ですので誰にでもわかりやすいと思います。
後は、これが 「どこに使われているのか分からない」と、言う事でカスタマイズを諦めている方もいます。
独学で学んできた私も始めは分かりませんでした。
そう言った時に検索を使う事を知り、まず試しに「色やサイズ」を変更してみる事にしました。

color: #FFFFFF;

これは文字の色を設定している訳ですが、テンプレートなどを見ると色々な所に使われている事が分かります。

優しい方が作ったテンプレートなら注釈が付いている場合が有りますのでそれを読む事でどこの設定なのか分かるでしょう。
(注釈が付いているのに分からないと言う方は日本語を勉強してください。w)
カラーサンプルをアップしましたのでそれを参考に変更したい所の(#FFFFFFなど)色を変えてみて下さい。
勿論、このに使われている英語名でも大丈夫です。

次にフォントサイズの変更ですが、これはfont-sizeとそのまま英語で書かれているので分かりますね。
その後に続く: 10pt などと書かれている部分の数値を変更するとサイズを変えられます。
この数値も基本と言われるものは、12pt 100% 1em 16px などが標準とされていますが、小さなモニターやブラウザの設定で「大」とかにしている方は「大きすぎる」と感じるでしょう。
これらもまずは色々な数値に変更してどのようになるかテストしてみて下さい。
ちなみにpt(ポイント)を使う人が多いと思いますが、これはブラウザでの変更が可能な単位なので使われてます。
emを使う人も居ますが、文字サイズによってはデザインの崩れなどを起こすので嫌う方も居ますが、本来は見る人が自由に変えられる為、推奨されています。

pxに関しては、モニターのドットに(解像度を表す単位で一つの点が1pxです)対応するため見る人の環境では変える事が出来ないためあまりお勧めしません。
(自分だけ見るなら構いませんけどw)


次に、font-family ですがこれは「文字種」の設定で使われます。
丸文字」や「ゴシック」などフォントの種類を変えるために設定しますがこれまた見る人のパソコンにインストールされていないと標準に置き換えられて、本来の意味を持たない設定になります。
その為、一種類だけではなく複数 ,(カンマ)で区切り設定しています。
「CSS2 リファレンス - CSS Dencitie」さんの所に詳しい説明が有りますので文字種のサンプルを見ながら設定してみて下さい。

最後に行の間隔(一行と一行の行間の設定)line-height
これに関しても設定は「数値」で書き込まれます。
100%と言えば文字のサイズと同じサイズなので行間は空きません。
通常見やすい行間と言えば140%辺りでしょう。
何も設定しないと100%なので詰まって見え、一部の文字を大きくしたり「太文字」にすると文字が重なってしまう事が有ります。
なんか詰まっていて見にくい」と、思う方はこれを設定してやると読みやすくなります。
(単位は1emなども使えます。わかりやすいので私は%を使っていますが。)

以上ですが、ちょっと「太字」が忘れてましたね。
これはタグを知って居る方なら<b>?</b>で囲むと太文字になりますがスタイルシートでは、「font-weight」を使います。
英語で「フォントウエイト」ですから「フォントの重量感」みたいな感じでしょうか。
太字にしたい時は、「font-weight: bold;」と言う一行を加えてみて下さい。
それに対応した部分が太字になります。
まぁ?太字は「強調」に使われますのでブログ名やメニューなどのタイトル部分に多く使われます。(本文を太字にすると見にくいw)

取りあえず、今回は文字に関する設定ですが、それ以前にスタイルシートのIDクラス#menu とか .menuとか書かれてます。)がどこの部分に対応した設定なのかを見極める事が最初です。
スタイルシートに、#menu と書かれていた場合は、HTML本文のタグに ID="menu" と書かれている部分が有りますのでそこの設定になっています。
.menu と書かれていたらHTML文のタグに class="menu" と書かれた部分がありますのでその設定だという事です。
以上が基本の基本ですが、これだけででもかなりのカスタマイズが可能でしょう。
まずは頑張って試してみる事です。

ジャンル [ ブログ テーマ [ カスタマイズ ]

Re comments.

Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

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