次は、記事の文字をHTMLとCSSを使って太字にする方法をします。
記事の文字をHTMLとCSSを使って太字にする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「記事の文字をHTMLとCSSを使って太字にする方法」と入力します。
右側の「テキスト」を押します。
ここにコードを貼り付けます。
テキストのところに、下記コードをコピーして貼り付けます。
記事の文字をHTMLとCSSを使って<span class="futozi">太字にする方法</span>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「太字にする方法」が太字で表示されていることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
.futozi{
font-weight: bold;
}
HTML
<span class="futozi">サンプル表示</span>
CSSは、「ドット（点）」のあとの「futozi」という文字の部分は好きな文字を入れても大丈夫です。
例えば、下記のように「futoimozi」と入れても問題ありません。
CSS
.futoimozi{
font-weight: bold;
}
HTML
<span class="futoimozi">サンプル表示</span>
CSSを「futoimozi」にしたら、HTMLのほうの「futozi」も上記のように「futoimozi」にしないといけません。
{}←このカッコの中の記入の仕方は、決まっているので「font-weight: bold;」と必ず記入してください。
font-weight説明
今回、太字にするために使ったfont-weightの説明をします。
文字を太字にするときに使うCSSコードです。
font-weightの記入方法は、５種類あります。
font-weight一覧表
| normal | 太字で表示しません。通常表示。 |
| bold | 普通の太字。 |
| bolder | 現在の太さより１段階太く表示。 |
| lighter | 現在の太さより1段階細く表示。 |
| 100～900 | 100～900の数値で指定します。 数値が大きくなると、太く表示。 |
normal記入例
CSS
.futozi1{
font-weight: normal;
}
HTML
<span class="futozi1">サンプル表示</span>
記事をプレビュー表示したとき
サンプル表示
bold記入例
CSS
.futozi2{
font-weight: bold;
}
HTML
<span class="futozi2">サンプル表示</span>
記事をプレビュー表示したとき
サンプル表示
bolder記入例
CSS
.futozi3{
font-weight: bolder;
}
HTML
<span class="futozi3">サンプル表示</span>
記事をプレビュー表示したとき
サンプル表示
lighter記入例
CSS
.futozi4{
font-weight: lighter;
}
HTML
<span class="futozi4">サンプル表示</span>
記事をプレビュー表示したとき
サンプル表示
100～900数字での記入例
CSS
.futozi5{
font-weight: 900;
}
HTML
<span class="futozi5">サンプル表示</span>
記事をプレビュー表示したとき
サンプル表示
