次は、文字の上にマウスの矢印をのせると色が変わる文字をHTMLとCSSを使ってする方法をします。
文字の色を変えるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「文字の色を変えるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<span class="irokawaru-mozi1">色が変わる文字（基本）</span>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「文字の色を変えるHTMLとCSSを使ってする方法」の
文字の上にマウスの矢印をのせると文字の色が変わることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*色が変わる文字（基本）*/
.irokawaru-mozi1 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
}
.irokawaru-mozi1:hover {
color: red; /*文字色*/
}
HTML
<span class="irokawaru-mozi1">色が変わる文字（基本）</span>
「display」は、文字の位置を指定するためのCSSコードです。
「text-decoration」のところは文字の装飾するためのCSSコードです。
「irokawaru-mozi1:hover」のところは文字の上にマウスの矢印をのせたときの設定するためのCSSコードです。
「color」のところは文字の上にマウスの矢印をのせたときの色を設定するためのCSSコードです。
文字の色が変わる記入例
色が変わる文字（基本）
CSS
/*色が変わる文字（基本）*/
.irokawaru-mozi1 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
}
.irokawaru-mozi1:hover {
color: red; /*文字色*/
}
HTML
<span class="irokawaru-mozi1">色が変わる文字（基本）</span>
記事をプレビュー表示したとき
色が変わる文字（基本）
色が変わる文字（太字）
CSS
/*色が変わる文字（太字）*/
.irokawaru-mozi2 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
font-weight: bold; /*太字*/
}
.irokawaru-mozi2:hover {
color: red; /*文字色*/
}
HTML
<span class="irokawaru-mozi2">色が変わる文字（太字）</span>
記事をプレビュー表示したとき
色が変わる文字（太字）
色が変わる文字（色付き）
CSS
/*色が変わる文字（色付き）*/
.irokawaru-mozi3 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: green; /*文字色*/
font-weight: bold; /*太字*/
}
.irokawaru-mozi3:hover {
color: blue; /*文字色*/
}
HTML
<span class="irokawaru-mozi3">色が変わる文字（色付き）</span>
記事をプレビュー表示したとき
色が変わる文字（色付き）
色が変わる文字（リンク付き）
CSS
/*色が変わる文字（リンク付き）*/
.irokawaru-mozi4 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字色*/
}
.irokawaru-mozi4 a:hover {
color: red !important; /*文字色*/
}
HTML
<span class="irokawaru-mozi4"><a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">色が変わる文字（リンク付き）</a></span>
記事をプレビュー表示したとき
色が変わる文字（大きい文字）
CSS
/*色が変わる文字（大きい文字）*/
.irokawaru-mozi5 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字色*/
font-size: 1.5em; /*文字の大きさ*/
}
.irokawaru-mozi5:hover {
color: red !important; /*文字色*/
}
HTML
<span class="irokawaru-mozi5">色が変わる文字（大きい文字）</span>
記事をプレビュー表示したとき
色が変わる文字（大きい文字）
色が変わる文字（下線付き）
CSS
/*色が変わる文字（下線付き）*/
.irokawaru-mozi6 {
display: inline-block; /*位置*/
text-decoration: underline; /*下線*/
color: black; /*文字色*/
}
.irokawaru-mozi6:hover {
color: red !important; /*文字色*/
}
HTML
<span class="irokawaru-mozi6">色が変わる文字（下線付き）</span>
記事をプレビュー表示したとき
色が変わる文字（下線付き）
色が変わる文字（マーカー付き）
CSS
/*色が変わる文字（マーカー付き）*/
.irokawaru-mozi7 {
display: inline-block; /*位置*/
text-decoration: underline; /*下線*/
color: black; /*文字色*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー色*/
padding-left: 5px; /*左の余白*/
padding-right: 5px; /*右の余白*/
}
.irokawaru-mozi7:hover {
color: white !important; /*文字色*/
background: linear-gradient(transparent 0%, blue 100%); /*マーカー色*/
padding-left: 5px; /*左の余白*/
padding-right: 5px; /*右の余白*/
}
HTML
<span class="irokawaru-mozi7">色が変わる文字（マーカー付き）</span>
記事をプレビュー表示したとき
色が変わる文字（マーカー付き）
色が変わる文字（ゆっくり色が変わる）
CSS
/*色が変わる文字（ゆっくり色が変わる）*/
.irokawaru-mozi8 {
display: inline-block; /*位置*/
text-decoration: underline; /*下線*/
color: black; /*文字色*/
transition: all 2s ease 0s; /*変化時間*/
}
.irokawaru-mozi8:hover {
color: red !important; /*文字色*/
}
HTML
<span class="irokawaru-mozi8">色が変わる文字（ゆっくり色が変わる）</span>
記事をプレビュー表示したとき
色が変わる文字（ゆっくり色が変わる）
