次は、画像を光らせるHTMLとCSSを使ってする方法をします。
画像を光らせるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像を光らせるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="hikaru-gazou1"> ここに画像を入れる </div>
貼り付けました。
「ここに画像を入れる」の文字を消します。
文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像を光らせるHTMLとCSSを使ってする方法」の
画像が光ることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*光る画像（基本）*/
.hikaru-gazou1 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
position: relative; /*画像の位置*/
overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-gazou1::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-gazou1a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-gazou1a {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}
HTML
<div class="hikaru-gazou1"> ここに画像を入れる </div>
「overflow」の、「hidden」は画像が大きくなったとき、はみ出た画像を非表示にするCSSコードです。
「width」の、「300px」の数字が大きくなるほど画像の横幅が大きくなります。
「height」の、「170px」の数字が大きくなるほど画像の高さが大きくなります。
「position」は、画像の位置を指定するためのCSSコードです。
「overflow: hidden」は、文字以外のところの光を非表示にするためのCSSコードです。
「display」は、画像の位置を指定するためのCSSコードです。
「top」は、文字の高さの位置を調整するためのCSSコードです。
「content」は、光を表示するためのCSSコードです。
「left」は、光の始まる左側の位置を指定するためのCSSコードです。
「width」は、光の幅を指定するためのCSSコードです。
「height」は、光の高さを指定するためのCSSコードです。
「background-color」は、光の色を指定するためのCSSコードです。
「text-decoration」のところは文字の装飾するためのCSSコードです。
「animation」のところは光の時間を設定するCSSコードです。
「webkit-transform」は、光の動きを調整するCSSコードです。
「scale」は、光の大きさを調整するCSSコードです。
「rotate」は、光の角度を調整するCSSコードです。
「opacity」は、光の半透明を調整するCSSコードです。
「ここに画像を入れる」の文字を消して、画像を入れてください。画像が光る記入例
光る画像（基本）
CSS
/*光る画像（基本）*/
.hikaru-gazou1 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
position: relative; /*画像の位置*/
overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-gazou1::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-gazou1a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-gazou1a {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}
HTML
<div class="hikaru-gazou1"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
光る画像（枠線付き）
CSS
/*光る画像（枠線付き）*/
.hikaru-gazou2 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
position: relative; /*画像の位置*/
overflow: hidden; /*光のはみ出し非表示*/
border: solid 2px black; /*枠線*/
}
.hikaru-gazou2::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-gazou2a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-gazou2a {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}
HTML
<div class="hikaru-gazou2"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
光る画像（枠付き）
CSS
/*光る画像（枠付き）*/
.hikaru-gazou3-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding-top: 25px; /* 枠の余白*/
width: 400px; /*枠の横幅*/
height: 300px; /*枠の高さ*/
}
.hikaru-gazou3 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
position: relative; /*画像の位置*/
overflow: hidden; /*光のはみ出し非表示*/
margin: auto; /*枠の中央にする設定*/
}
.hikaru-gazou3::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-gazou3a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-gazou3a {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}
HTML
<div class="hikaru-gazou3-waku"> <div class="hikaru-gazou3"> ここに画像を入れる </div> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
光る画像（文字と枠付き）
CSS
/*光る画像（文字と枠付き）*/
.hikaru-gazou4-mozi {
font-size: 1.5em; /* 文字の大きさ*/
text-align: center; /*文字の位置*/
font-weight: bold; /*太さ*/
}
.hikaru-gazou4-bunsho {
font-size: 1.2em; /* 文字の大きさ*/
text-align: left; /*文字の位置*/
padding-top: 20px; /*文字の上側の余白*/
}
.hikaru-gazou4-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding: 20px; /*枠内の上側の余白*/
width: 400px; /*枠の横幅*/
height: auto; /*枠の高さ*/
}
.hikaru-gazou4 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
position: relative; /*画像の位置*/
overflow: hidden; /*光のはみ出し非表示*/
margin: auto; /*枠の中央にする設定*/
}
.hikaru-gazou4::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-gazou4a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-gazou4a {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}
HTML
<div class="hikaru-gazou4-waku"> <div class="hikaru-gazou4-mozi">ここに文字を入れる</div> <div class="hikaru-gazou4"> ここに画像を入れる </div> <div class="hikaru-gazou4-bunsho">ここに文章を入れる</div> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
ここに文字を入れる
ここに文章を入れる
光る画像（リンク付き）
CSS
/*光る画像（リンク付き）*/
.hikaru-gazou5 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
position: relative; /*画像の位置*/
overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-gazou5::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-gazou5a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-gazou5a {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } /*光の角度調整*/
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } /*光の角度調整*/
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } /*光の角度調整*/
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } /*光の角度調整*/
}
HTML
<div class="hikaru-gazou5"> <a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">ここに画像を入れる</a> </div>
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
光る画像（ゆっくり消える）
CSS
/*光る画像（ゆっくり消える）*/
.hikaru-gazou6 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
position: relative; /*画像の位置*/
overflow: hidden; /*光のはみ出し非表示*/
}
.hikaru-gazou6::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-gazou6a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-gazou6a {
0% { -webkit-transform: scale(100) rotate(45deg); opacity: 0; } /*光の角度調整*/
100% { -webkit-transform: scale(100) rotate(45deg); opacity: 1; } /*光の角度調整*/
}
HTML
<div class="hikaru-gazou6"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき