次は、アイコンをポヨンポヨンさせる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/

 

少し下へ移動します。

好きな「アイコン」を押します。

ここの4ケタの「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>
「ポヨンポヨンのアイコン(止まる)」の文字を消して、好きな文字を入れてください。

記事をプレビュー表示したとき