記事の文字をHTMLとCSSを使って太字にする方法

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

記事の文字をHTMLとCSSを使って太字にする方法

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

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

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

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

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

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

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

記事の文字をHTMLとCSSを使って<span class="futozi">太字にする方法</span>

貼り付けました。

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

「OK」を押します。

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

「太字にする方法」が太字で表示されていることを確認します。

HTMLとCSSの説明

.futozi{
  font-weight: bold;
}

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

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

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

.futoimozi{
  font-weight: bold;
}

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

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

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

font-weight説明

今回、太字にするために使ったfont-weightの説明をします。

文字を太字にするときに使うCSSコードです。

font-weightの記入方法は、５種類あります。

font-weight一覧表

.futozi1{
  font-weight: normal;
}

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

.futozi2{
  font-weight: bold;
}

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

.futozi3{
  font-weight: bolder;
}

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

.futozi4{
  font-weight: lighter;
}

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

.futozi5{
  font-weight: 900;
}

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