チュートリアル番外編 テンプレ文字大きさや色変更

ここでは、当サイトのテンプレートの文字大きさや色を変える方法について説明していきます。他サイトのテンプレートでも適応されますが、テンプレート製作者の書き方によっては、分かりにくいところがあるかもしれませんのでご了承ください。内容は前回の『テンプレカスタマイズの基礎』と繋がっています。


1) ここでは一歩飛び出して、CSSファイルを触っていきます。当サイトのテンプレートをご利用の方はcssというフォルダがあるので、その中のstyle.cssを開いてください。

2) このようなものが出てきました。ここに書いてあるメモはできるだけ、皆様に細かく伝わるように心がけています。最初のメモに記してあるとおり、初期設定部分は上級者以外、触らないように注意してください。

3) CSSの編集の仕方ですが、これは『テンプレカスタマイズの基礎』で覚えた、タグと照らし合わせながら編集していきます。例として画像を見てください。緑の箇所の『FIRST』という文字があります。この文字を大きくしたい場合、まずこの文字を囲んでいるタグを探します。この例ではタグh3です。


4) このタグh3をCSSの方で探します。探す際はキーボードのCTRLとFを同時に押して、h3と入力し、enterを押すと探しやすいです。cssでh3と書かれてある場所が今回編集するところです。

5) CSSの雛形は
タグ名{
デザイン指示
}
となります。では、今は文字の大きさを変えることに集中しましょう。文字の大きさを指定する箇所は『font-size:』です。英語でフォントサイズ=文字サイズとなります。これを1.1emから1.2emにすると文字が大きくなり。0.8emにすると、小さくなります。em単位は細かい数字も扱えるので、1.15emと設定することもできます。行の最後は必ず;で終わるので、大きくする際は『font-size:1.2em;』になります。※単位がpxでも同じように数字を変えるだけです。

6) 次は文字の色を変えてみます。 文字の色を指定する箇所は『color:』です。文字通り、カラー=色です。色は『#』から始まる色IDを入れます。色IDをすべて覚えている人はいないので、ネットの色辞典でIDを確認します。辞典は色々ありますがこちらのサイトが分かりやすいです。好きな色を見つけたら、そのIDを入れます。最後の;は忘れずに。『color:#9932cc;』

7) 終わったらcssを保存して、ブラウザで確認します。私の方ではこのように変わりました。なお、編集しても変化がない場合は、誤ってタブレットやスマートフォンの方を編集している可能性があるので、そちらはご注意ください。

8) なお、『div』『span』『ul』などタグで、中にidかclassが含まれているものは、cssで探すとき、id="○○"やclass="○○"の○○の部分で探してください。『id』はcssで『#』。『class』はcssで『.』です。例として
<div id="update">
を探す場合はCSSで
#update {
    height: 150px;
    width: 100%;
}
 
<div class="update">
を探す場合はcssで
.update {
    height: 150px;
    width: 100%;
}
2つは似て異なりますので、ご注意ください。


おまけ) 補足として『テンプレカスタマイズの基礎』でダメだったこれですが。『<div id="update"> → <div class="update">』にしてcssを『#update → .update』に変更すれば、オレンジの枠内のどこででも使えます。
※classを使うデメリットとして、サイトの表示が遅くなるなどの可能性があります。

PREV BACK
inserted by FC2 system