次は、アイコンを光らせるHTMLとCSSを使ってする方法をします。
アイコンを光らせるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「アイコンを光らせるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="hikaru-icon1">光るアイコン（基本）</div>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「アイコンを光らせるHTMLとCSSを使ってする方法」の
アイコンが光ることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*光るアイコン（基本）*/
.hikaru-icon1 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 8px; /*文字の位置高さ調整*/
}
.hikaru-icon1:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
.hikaru-icon1::after {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon1a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon1a {
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-icon1">光るアイコン（基本）</div>
「display」は、アイコンの位置を指定するためのCSSコードです。
「position」は、文字の位置を指定するためのCSSコードです。
「font-size」は、文字の大きさを指定するためのCSSコードです。
「color」は、文字の色を指定するためのCSSコードです。
「overflow: hidden」は、アイコン以外のところの光を非表示にするためのCSSコードです。
「top」は、文字の高さの位置を調整するためのCSSコードです。
「font-family」は、アイコンのフォントの設定をするCSSコードです。
「content」の、「f013」は、アイコンの種類を設定するCSSコードです。
「f013」を変えると別のアイコンを表示させることができます。
「font-weght」の、「bold」は、太字にするためのCSSコードです。
「padding-right」は、アイコンの右側の余白を設定するCSSコードです。
「color」は、アイコンの色を設定する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コードです。
アイコンの変更方法
アイコンの変更方法を教えます。
下記のサイトを開きます。
↓
https://fontawesome.com/v4.7.0/icons/
少し下へ移動します。
好きな「アイコン」を押します。
ここの４ケタの「f1b9」をコピーします。
ワードプレスの管理画面を開きます。
左側の「外観」を押します。
左側の「カスタムCSS」を押します。
これをCSSコードの「content」の中に貼り付けます。
一番下の「カスタムCSSの更新」を押します。
左上の「サイトを表示」を押します。
「アイコンの色を変えるHTMLとCSSを使ってする方法」の記事を押します。
アイコンが変更されていることを確認します。
アイコンが光る記入例
光るアイコン（基本）
CSS
/*光るアイコン（基本）*/
.hikaru-icon1 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 8px; /*文字の位置高さ調整*/
}
.hikaru-icon1:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
.hikaru-icon1::after {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon1a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon1a {
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-icon1">光るアイコン（基本）</div>「光るアイコン（基本）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
光るアイコン（アイコン後ろ）
CSS
/*光るアイコン（アイコン後ろ）*/
.hikaru-icon2 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 8px; /*文字の位置高さ調整*/
}
.hikaru-icon2:after {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f15b"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
.hikaru-icon2::before {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon2a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon2a {
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-icon2">光るアイコン（アイコン後ろ）</div>「光るアイコン（アイコン後ろ）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
光るアイコン（枠線付き）
CSS
/*光るアイコン（枠線付き）*/
.hikaru-icon3 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
overflow: hidden; /*光のはみ出し非表示*/
border: solid 2px black; /*枠線*/
top: 8px; /*文字の位置高さ調整*/
}
.hikaru-icon3:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f00c"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue;/*アイコンの色*/
}
.hikaru-icon3::after {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon3a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon3a {
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-icon3">光るアイコン（枠線付き）</div>「光るアイコン（枠線付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
光るアイコン（枠線と色付き）
CSS
/*光るアイコン（枠線と色付き）*/
.hikaru-icon4 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 8px; /*文字の位置高さ調整*/
border: solid 2px black; /*枠線*/
background: yellow; /*背景色*/
}
.hikaru-icon4:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f2b6"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
.hikaru-icon4::after {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon4a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon4a {
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-icon4">光るアイコン（枠線と色付き）</div>「光るアイコン（枠線と色付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
光るアイコン（グラデーション）
CSS
/*光るアイコン（グラデーション）*/
.hikaru-icon5 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 8px; /*文字の位置高さ調整*/
border: solid 2px #b6ddff; /*枠線*/
background-image: linear-gradient(#fff 0%, #00cfff 100%); /*グラデーション*/
}
.hikaru-icon5:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f0c9"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
.hikaru-icon5::after {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon5a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon5a {
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-icon5">光るアイコン（グラデーション）</div>「光るアイコン（グラデーション）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
光るアイコン（グラデーション影付き）
CSS
/*光るアイコン（グラデーション影付き）*/
.hikaru-icon6 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 8px; /*文字の位置高さ調整*/
border: solid 2px #797979; /*枠線*/
background-image: linear-gradient(#fff 0%, #bbb 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
}
.hikaru-icon6:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f02d"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
.hikaru-icon6::after {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon6a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon6a {
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-icon6">光るアイコン（グラデーション影付き）</div>「光るアイコン（グラデーション影付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
光るアイコン（リンク付き）
CSS
/*光るアイコン（リンク付き）*/
.hikaru-icon7 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 8px; /*文字の位置高さ調整*/
border: solid 2px #ff9f9f; /*枠線*/
background-image: linear-gradient(#fff 0%, #ffa3a3 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
}
.hikaru-icon7::before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f001"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
.hikaru-icon7::after {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon7a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon7a {
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
<a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"><div class="hikaru-icon7">光るアイコン（リンク付き）</div></a>「光るアイコン（リンク付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
光るアイコン（ゆっくり消える）
CSS
/*光るアイコン（ゆっくり消える）*/
.hikaru-icon8 {
display: inline-block; /*文字位置*/
position: relative; /*文字位置*/
font-size: 1.2em; /*文字の大きさ*/
color: #000; /*文字色*/
overflow: hidden; /*光のはみ出し非表示*/
top: 8px; /*文字の位置高さ調整*/
background-image: linear-gradient(#b7ffb1 0%, #39ff74 100%); /*グラデーション*/
}
.hikaru-icon8::before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f084"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
.hikaru-icon8::after {
position: absolute; /*光の位置*/
content: ''; /*光の表示設定*/
display: inline-block; /*文字の位置*/
top: -180px; /*光の始まり位置上側*/
left: 0; /*光の始まり位置左側*/
width: 30px; /*光の幅*/
height: 100%; /*光の範囲*/
background-color: #fff; /*光の色*/
animation: hikaru-icon8a 2s ease-in-out infinite; /*光の時間調整*/
}
@-webkit-keyframes hikaru-icon8a {
0% { -webkit-transform: scale(50) rotate(45deg); opacity: 0.1; } /*光の角度調整*/
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 1; } /*光の角度調整*/
}
HTML
<a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"><div class="hikaru-icon8">光るアイコン（ゆっくり消える）</div></a>「光るアイコン（ゆっくり消える）」の文字を消して、好きな文字を入れてください。