記事の文字の色をHTMLとCSSを使って変える方法

次は、記事の文字の色をHTMLとCSSを使って変える方法をします。

記事の文字の色をHTMLとCSSを使って変える方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「記事の文字の色をHTMLとCSSを使って変える方法」と入力します。

右側の「テキスト」を押します。

ここにコードを貼り付けます。

テキストのところに、下記コードをコピーして貼り付けます。

<span class="black">黒文字</span>
<span class="red">赤文字</span>
<span class="green">緑文字</span>
<span class="blue">青文字</span>
<span class="white">白文字</span>
<span class="yellow">黄文字</span>
<span class="magenta">マゼンタ文字</span>
<span class="gray">グレー文字</span>
<span class="orange">オレンジ文字</span>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

文字の色が変わっていることを確認します。

HTMLとCSSの説明

/*文字色*/
.black {
  color: black;
}
.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}
.white {
  color: white;
}
.yellow {
  color: yellow;
}
.magenta {
  color: magenta;
}
.gray {
  color: gray;
}
.orange {
  color: orange;
}

<span class="black">黒文字</span>
<span class="red">赤文字</span>
<span class="green">緑文字</span>
<span class="blue">青文字</span>
<span class="white">白文字</span>
<span class="yellow">黄文字</span>
<span class="magenta">マゼンタ文字</span>
<span class="gray">グレー文字</span>
<span class="orange">オレンジ文字</span>

CSSコードの１行目の「/*文字色*/」は、「注釈（ちゅうしゃく）」といいます。

注釈とは？

注釈は、CSSコードを書くときに、ここのCSSコードは何のために書いたのか、あとから見てわかるようにするために記入します。

メモみたいなものです。

絶対に注釈を入れないといけないものでは、ありません。

でも、あとからCSSコードを確認するときには、便利なので、注釈は、入れたほうがいいです。

.red {
  color: red;
}

CSSは、「ドット（点）」のあとの「red」という文字の部分は好きな文字を入れても大丈夫です。

例えば、下記のように「akamozi」と入れても問題ありません。

.akamozi{
  color: red;
}

<span class="akamozi">サンプル表示</span>

CSSを「akamozi」にしたら、HTMLのほうの「red」も上記のように「akamozi」にしないといけません。

{}←このカッコの中の記入の仕方は、決まっているので「color: red;」と必ず記入してください。

color説明

今回、文字の色を変えるために使ったcolorの説明をします。

文字の色を変えるときに使うCSSコードです。

colorの記入方法は、色コードで記入する方法と、色名で記入する方法の２種類があります。

color色コード、色名一覧表

下記サイトに他の色コードも載っています。
↓
https://www.colordic.org/

.akairo1{
  color: #ff0000;
}

<span class="akairo1">赤色文字 色コード</span>

.akairo2{
  color: red;
}

<span class="akairo2">赤色文字 色名</span>

上記２つのやり方は、記入の仕方は違いますが、結果は同じになります。