klee

Free Website Templates

カスタマイズに役立つかもしれないメモ

テンプレートのデザインを変更したい場合は、CSSファイルを編集します。
「背景 CSS」などと検索すれば大抵のことは解決するので気楽にやりましょう。

CSSはサイトの見た目に関する指示を「どこの」「なにを」「どうする」の順で書いたものです。
例えばh1{color:red;}なら、「H1(見出し要素)の文字色を赤色にする」ということです。

以下のリストは、「変えたい箇所 → CSSでいじる箇所」の順で書いてあります。半角コロン(:)に続いて書いてある数字や英字(値といいます)を変えてみましょう。

  • 文字サイズ → font-size
  • 文字色 → color
  • 行間 → line-height
  • フォントの種類 → font-family
  • 位置指定 → text-align(左右)、vertical-align(上下)
  • 背景 → background、background-color等
  • 角丸 → border-radius
  • 横幅 → width
  • 高さ → height
  • 外側の余白 → margin
  • 要素の境界線 → border
  • 内側の余白 → padding

おまけ

最初のうちはmarginとpaddingがごっちゃになりがちなので、Chromeのデベロッパーツールを使うといいかもしれません。気になる箇所を右クリック → 検証で下記のように色分けされるので一目瞭然です。
デベロッパーツールでの余白の表示 その1 デベロッパーツールでの余白の表示 その2
デベロッパーツールは他にも、ある要素に「どのcss」で「どんな記述」がされているのか等詳しく見ていくことができ便利です。F12キーでも起動できますよ。

≪ 戻る