次は、アイコンをポヨンポヨンさせるHTMLとCSSを使ってする方法をします。
アイコンをポヨンポヨンさせるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「アイコンをポヨンポヨンさせるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="poyon-icon1">ポヨンポヨンのアイコン（基本）</div>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「アイコンをポヨンポヨンさせるHTMLとCSSを使ってする方法」の
アイコンがポヨンポヨンすることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*ポヨンポヨンのアイコン（基本）*/
.poyon-icon1 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
animation: poyon-icon1a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon1:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
@keyframes poyon-icon1a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<div class="poyon-icon1">ポヨンポヨンのアイコン（基本）</div>
「display」は、アイコンの位置を指定するためのCSSコードです。
「font-size」は、文字の大きさを指定するためのCSSコードです。
「animation」のところは文字のポヨンポヨン時間を設定するCSSコードです。
「font-family」は、アイコンのフォントの設定をするCSSコードです。
「content」の、「f013」は、アイコンの種類を設定するCSSコードです。
「f013」を変えると別のアイコンを表示させることができます。
「font-weght」の、「bold」は、太字にするためのCSSコードです。
「padding-right」は、アイコンの右側の余白を設定するCSSコードです。
「color」は、アイコンの色を設定するCSSコードです。
「scale」は、文字のポヨンポヨンの大きさを設定するCSSコードです。
「translate」は、文字のポヨンポヨン動きの位置を設定するCSSコードです。
アイコンの変更方法
アイコンの変更方法を教えます。
下記のサイトを開きます。
↓
https://fontawesome.com/v4.7.0/icons/
少し下へ移動します。
好きな「アイコン」を押します。
ここの４ケタの「f1b9」をコピーします。
ワードプレスの管理画面を開きます。
左側の「外観」を押します。
左側の「カスタムCSS」を押します。
これをCSSコードの「content」の中に貼り付けます。
一番下の「カスタムCSSの更新」を押します。
左上の「サイトを表示」を押します。
「アイコンの色を変えるHTMLとCSSを使ってする方法」の記事を押します。
アイコンが変更されていることを確認します。
アイコンがポヨンポヨン記入例
ポヨンポヨンのアイコン（基本）
CSS
/*ポヨンポヨンのアイコン（基本）*/
.poyon-icon1 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
animation: poyon-icon1a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon1:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
@keyframes poyon-icon1a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<div class="poyon-icon1">ポヨンポヨンのアイコン（基本）</div>「ポヨンポヨンのアイコン（基本）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
ポヨンポヨンのアイコン（アイコン後ろ）
CSS
/*ポヨンポヨンのアイコン（アイコン後ろ）*/
.poyon-icon2 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
animation: poyon-icon2a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon2:after {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f15b"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
@keyframes poyon-icon2a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<div class="poyon-icon2">ポヨンポヨンのアイコン（アイコン後ろ）</div>「ポヨンポヨンのアイコン（アイコン後ろ）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
ポヨンポヨンのアイコン（枠線付き）
CSS
/*ポヨンポヨンのアイコン（枠線付き）*/
.poyon-icon3 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px black; /*枠線*/
animation: poyon-icon3a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon3:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f00c"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue;/*アイコンの色*/
}
@keyframes poyon-icon3a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<div class="poyon-icon3">ポヨンポヨンのアイコン（枠線付き）</div>「ポヨンポヨンのアイコン（枠線付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
ポヨンポヨンのアイコン（枠線と色付き）
CSS
/*ポヨンポヨンのアイコン（枠線と色付き）*/
.poyon-icon4 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px black; /*枠線*/
background: yellow; /*背景色*/
animation: poyon-icon4a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon4:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f2b6"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
@keyframes poyon-icon4a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<div class="poyon-icon4">ポヨンポヨンのアイコン（枠線と色付き）</div>「ポヨンポヨンのアイコン（枠線と色付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
ポヨンポヨンのアイコン（グラデーション）
CSS
/*ポヨンポヨンのアイコン（グラデーション）*/
.poyon-icon5 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #b6ddff; /*枠線*/
background-image: linear-gradient(#fff 0%, #00cfff 100%); /*グラデーション*/
animation: poyon-icon5a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon5:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f0c9"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
@keyframes poyon-icon5a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<div class="poyon-icon5">ポヨンポヨンのアイコン（グラデーション）</div>「ポヨンポヨンのアイコン（グラデーション）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
ポヨンポヨンのアイコン（グラデーション影付き）
CSS
/*ポヨンポヨンのアイコン（グラデーション影付き）*/
.poyon-icon6 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #797979; /*枠線*/
background-image: linear-gradient(#fff 0%, #bbb 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
animation: poyon-icon6a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon6:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f02d"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
@keyframes poyon-icon6a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<div class="poyon-icon6">ポヨンポヨンのアイコン（グラデーション影付き）</div>「ポヨンポヨンのアイコン（グラデーション影付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
ポヨンポヨンのアイコン（リンク付き）
CSS
/*ポヨンポヨンのアイコン（リンク付き）*/
.poyon-icon7 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #ff9f9f; /*枠線*/
background-image: linear-gradient(#fff 0%, #ffa3a3 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
animation: poyon-icon7a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon7:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f001"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
@keyframes poyon-icon7a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"><div class="poyon-icon7">ポヨンポヨンのアイコン（リンク付き）</div></a>「ポヨンポヨンのアイコン（リンク付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
ポヨンポヨンのアイコン（速いポヨンポヨン）
CSS
/*ポヨンポヨンのアイコン（速いポヨンポヨン）*/
.poyon-icon8 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #24ff46; /*枠線*/
background-image: linear-gradient(#6aff4b 0%, #00d99c 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
animation: poyon-icon8a 0.5s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon8:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f051"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
@keyframes poyon-icon8a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"><div class="poyon-icon8">ポヨンポヨンのアイコン（速いポヨンポヨン）</div></a>「ポヨンポヨンのアイコン（速いポヨンポヨン）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
ポヨンポヨンのアイコン（マウスの矢印をのせるとポヨンポヨン止まる）
CSS
/*ポヨンポヨンのアイコン（マウスの矢印をのせるとポヨンポヨン止まる）*/
.poyon-icon9 {
display: inline-block; /*文字の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #ffa0a0; /*枠線*/
background-image: linear-gradient(#ff7a86 0%, #e894ff 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
color: white; /*文字色*/
animation: poyon-icon9a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-icon9:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f091"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: yellow; /*アイコンの色*/
}
.poyon-icon9:hover {
animation: poyon-icon9a 0s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-icon9a {
0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
15% { transform: scale(0.9, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
30% { transform: scale(1.3, 0.8) translate(0%, 10%); } /*ポヨンポヨン動き調整*/
50% { transform: scale(0.8, 1.3) translate(0%, -10%); } /*ポヨンポヨン動き調整*/
70% { transform: scale(1.1, 0.9) translate(0%, 5%); } /*ポヨンポヨン動き調整*/
100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /*ポヨンポヨン動き調整*/
}
HTML
<a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"><div class="poyon-icon9">ポヨンポヨンのアイコン（止まる）</div></a>「ポヨンポヨンのアイコン（止まる）」の文字を消して、好きな文字を入れてください。