次は、光る文字をHTMLとCSSを使ってする方法をします。
文字を光らせるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「文字を光らせるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<span class="hikaru-mozi1">光る文字（基本）</span>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「文字を光らせるHTMLとCSSを使ってする方法」の文字が光ることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*光る文字（基本）*/
.hikaru-mozi1 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
}
.hikaru-mozi1::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru1 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru1 {
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
<span class="hikaru-mozi1">光る文字（基本）</span>
「display」は、文字の位置を指定するためのCSSコードです。
「position」は、文字の位置を指定するためのCSSコードです。
「font-size」は、文字の大きさを指定するためのCSSコードです。
「color」は、文字の色を指定するためのCSSコードです。
「overflow: hidden」は、文字以外のところの光を非表示にするための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-mozi1 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
}
.hikaru-mozi1::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru1 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru1 {
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
<span class="hikaru-mozi1">光る文字（基本）</span>
記事をプレビュー表示したとき
光る文字（基本）
光る文字（太字）
CSS
/*光る文字（太字）*/
.hikaru-mozi2 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
font-weight: bold; /*太字*/
}
.hikaru-mozi2::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru2 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru2 {
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
<span class="hikaru-mozi2">光る文字（太字）</span>
記事をプレビュー表示したとき
光る文字（太字）
光る文字（色付き）
CSS
/*光る文字（色付き）*/
.hikaru-mozi3 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
color: red; /*文字の色*/
}
.hikaru-mozi3::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru3 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru3 {
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
<span class="hikaru-mozi3">光る文字（色付き）</span>
記事をプレビュー表示したとき
光る文字（色付き）
光る文字（リンク付き）
CSS
/*光る文字（リンク付き）*/
.hikaru-mozi4 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
}
.hikaru-mozi4::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru4 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru4 {
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
<span class="hikaru-mozi4"><a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">光る文字（リンク付き）</a></span>
記事をプレビュー表示したとき
光る文字（大きい文字）
CSS
/*光る文字（大きい文字）*/
.hikaru-mozi5 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.5em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
}
.hikaru-mozi5::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru5 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru5 {
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
<span class="hikaru-mozi5">光る文字（大きい文字）</span>
記事をプレビュー表示したとき
光る文字（大きい文字）
光る文字（下線付き）
CSS
/*光る文字（下線付き）*/
.hikaru-mozi6 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
text-decoration: underline; /*下線*/
}
.hikaru-mozi6::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru6 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru6 {
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
<span class="hikaru-mozi6">光る文字（下線付き）</span>
記事をプレビュー表示したとき
光る文字（下線付き）
光る文字（マーカー付き）
CSS
/*光る文字（マーカー付き）*/
.hikaru-mozi7 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー色*/
}
.hikaru-mozi7::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru7 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru7 {
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
<span class="hikaru-mozi7">光る文字（マーカー付き）</span>
記事をプレビュー表示したとき
光る文字（マーカー付き）
光る文字（ゆっくり消える）
CSS
/*光る文字（ゆっくり消える）*/
.hikaru-mozi8 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 17px; /*文字の位置高さ調整*/
font-weight: bold; /*太字*/
}
.hikaru-mozi8::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru8 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru8 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.1; } /*光の角度調整*/
30% { -webkit-transform: scale(10) rotate(45deg); opacity: 0.2; } /*光の角度調整*/
80% { -webkit-transform: scale(20) rotate(45deg); opacity: 0.9; } /*光の角度調整*/
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 1; } /*光の角度調整*/
}
HTML
<span class="hikaru-mozi8">光る文字（ゆっくり消える）</span>
記事をプレビュー表示したとき
光る文字（ゆっくり消える）