次は、画像の上にマウスの矢印をのせると色が変わる画像をHTMLとCSSを使ってする方法をします。
画像の色を変えるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像の色を変えるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="irokawaru-gazou1"> ここに画像を入れる </div>
貼り付けました。
「ここに画像を入れる」の文字を消します。
文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像の色を変えるHTMLとCSSを使ってする方法」の
画像の上にマウスの矢印をのせると画像の色が変わることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*色が変わる画像（基本）*/
.irokawaru-gazou1 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou1 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou1 img:hover {
filter: invert(100%); /*色を反転*/
}
HTML
<div class="irokawaru-gazou1"> <img src="https://kouza8.wp-sensei.net/wp-content/uploads/2019/08/WordPress.png" alt="" width="1920" height="1080" class="alignnone size-full wp-image-4009" /> </div>
「display」は、画像の位置を指定するためのCSSコードです。
「width」の、「350px」の数字が大きくなるほど画像の横幅が大きくなります。
「height」の、「190px」の数字が大きくなるほど画像の高さが大きくなります。
「transition」の、「0.5s」の数字が大きくなるほど、画像の色が変わるのに時間がかかります。
「irokawaru-gazou1:hover」のところは画像の上にマウスの矢印をのせたときの設定をするためのCSSコードです。
「filter」のところは画像の上にマウスの矢印をのせたときの色を設定するためのCSSコードです。
「invert(100%)」のところは画像の上にマウスの矢印をのせると色を反転させるためのCSSコードです。
filterの説明
filterは、画像の色を変えるためのCSSコードです。
filterは、全部で10種類あります。
| 画像 | コード | 説明 |
 | filter: invert(100%); | 色を反転 |
| filter: blur(5px); | 色をぼかす |
| filter: brightness(200%); | 色を明るくする |
| filter: saturate(200%); | 色を鮮やかにする |
| filter: grayscale(100%); | 色をモノクロにする |
| filter: sepia(100%); | 色をセピアにする |
| filter: hue-rotate(180deg); | 色の色相を変える |
| filter: contrast(200%); | 色のコントラスを変える |
| filter: opacity(0.5); | 色の透明度を変える |
| filter: drop-shadow(0 0 10px yellow); | 影を入れる |
色が変わる画像記入例
色が変わる画像（基本）
CSS
/*色が変わる画像（基本）*/
.irokawaru-gazou1 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou1 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou1 img:hover {
filter: invert(100%); /*色を反転*/
}
HTML
<div class="irokawaru-gazou1"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（枠線付き）
CSS
/*色が変わる画像（枠線付き）*/
.irokawaru-gazou2 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
border: solid 2px black; /*枠線*/
}
.irokawaru-gazou2 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou2 img:hover {
filter: invert(100%); /*色を反転*/
}
HTML
<div class="irokawaru-gazou2"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（枠付き）
CSS
/*色が変わる画像（枠付き）*/
.irokawaru-gazou3-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding-top: 25px; /* 枠の余白*/
width: 400px; /*枠の横幅*/
height: 300px; /*枠の高さ*/
}
.irokawaru-gazou3 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
margin: auto; /*枠の中央にする設定*/
}
.irokawaru-gazou3 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou3 img:hover {
filter: invert(100%); /*色を反転*/
}
HTML
<div class="irokawaru-gazou3-waku"> <div class="irokawaru-gazou3"> ここに画像を入れる </div> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（文字と枠付き）
CSS
/*色が変わる画像（文字と枠付き）*/
.irokawaru-gazou4-mozi {
font-size: 1.5em; /* 文字の大きさ*/
text-align: center; /*文字の位置*/
font-weight: bold; /*太さ*/
}
.irokawaru-gazou4-bunsho {
font-size: 1.2em; /* 文字の大きさ*/
text-align: left; /*文字の位置*/
padding-top: 20px; /*文字の上側の余白*/
}
.irokawaru-gazou4-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding: 20px; /*枠内の上側の余白*/
width: 400px; /*枠の横幅*/
height: auto; /*枠の高さ*/
}
.irokawaru-gazou4 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
margin: auto; /*枠の中央にする設定*/
}
.irokawaru-gazou4 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou4 img:hover {
filter: invert(100%); /*色を反転*/
}
HTML
<div class="irokawaru-gazou4-waku"> <div class="irokawaru-gazou4-mozi">ここに文字を入れる</div> <div class="irokawaru-gazou4"> ここに画像を入れる </div> <div class="irokawaru-gazou4-bunsho">ここに文章を入れる</div> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
ここに文字を入れる
ここに文章を入れる
色が変わる画像（リンク付き）
CSS
/*色が変わる画像（リンク付き）*/
.irokawaru-gazou5 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou5 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou5 img:hover {
filter: invert(100%); /*色を反転*/
}
HTML
<div class="irokawaru-gazou5"> <a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">ここに画像を入れる</a> </div>
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（ぼかし）
CSS
/*色が変わる画像（ぼかし）*/
.irokawaru-gazou6 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou6 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou6 img:hover {
filter: blur(5px); /*色をぼかし*/
}
HTML
<div class="irokawaru-gazou6"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（明るくする）
CSS
/*色が変わる画像（明るくする）*/
.irokawaru-gazou7 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou7 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou7 img:hover {
filter: brightness(200%); /*色の明るさ*/
}
HTML
<div class="irokawaru-gazou7"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（彩度）
CSS
/*色が変わる画像（彩度）*/
.irokawaru-gazou8 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou8 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou8 img:hover {
filter: saturate(200%); /*色の彩度*/
}
HTML
<div class="irokawaru-gazou8"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（モノクロ）
CSS
/*色が変わる画像（モノクロ）*/
.irokawaru-gazou9 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou9 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou9 img:hover {
filter: grayscale(100%); /*モノクロ*/
}
HTML
<div class="irokawaru-gazou9"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（セピア）
CSS
/*色が変わる画像（セピア）*/
.irokawaru-gazou10 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou10 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou10 img:hover {
filter: sepia(100%); /*セピア*/
}
HTML
<div class="irokawaru-gazou10"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（色相）
CSS
/*色が変わる画像（色相）*/
.irokawaru-gazou11 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou11 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou11 img:hover {
filter: hue-rotate(180deg); /*色相*/
}
HTML
<div class="irokawaru-gazou11"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（コントラスト）
CSS
/*色が変わる画像（コントラスト）*/
.irokawaru-gazou12 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou12 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou12 img:hover {
filter: contrast(200%); /*コントラスト*/
}
HTML
<div class="irokawaru-gazou12"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（透明度）
CSS
/*色が変わる画像（透明度）*/
.irokawaru-gazou13 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou13 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou13 img:hover {
filter: opacity(0.5); /*透明度*/
}
HTML
<div class="irokawaru-gazou13"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
色が変わる画像（影）
CSS
/*色が変わる画像（影）*/
.irokawaru-gazou14 {
display: inline-block; /*位置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
.irokawaru-gazou14 img {
transition: 0.5s; /*変化時間*/
}
.irokawaru-gazou14 img:hover {
filter: drop-shadow(0 0 10px yellow); /*影*/
}
HTML
<div class="irokawaru-gazou14"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき