次は、文字をポヨンポヨンさせるHTMLとCSSを使ってする方法をします。
文字をポヨンポヨンさせるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「文字をポヨンポヨンさせるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<span class="poyon-mozi1">ポヨンポヨン文字（基本）</span>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「文字をポヨンポヨンさせるHTMLとCSSを使ってする方法」の
文字がポヨンポヨンすることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*ポヨンポヨン文字（基本）*/
.poyon-mozi1 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
animation: poyon-mozi1a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi1a {
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
<span class="poyon-mozi1">ポヨンポヨン文字（基本）</span>
「display」は、文字の位置を指定するためのCSSコードです。
「text-decoration」のところは文字の装飾するためのCSSコードです。
「animation」のところは文字のポヨンポヨン時間を設定するCSSコードです。
「scale」は、文字のポヨンポヨンの大きさを設定するCSSコードです。
「translate」は、文字のポヨンポヨン動きの位置を設定するCSSコードです。
文字がポヨンポヨン記入例
ポヨンポヨン文字（基本）
CSS
/*ポヨンポヨン文字（基本）*/
.poyon-mozi1 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
animation: poyon-mozi1a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi1a {
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
<span class="poyon-mozi1">ポヨンポヨン文字（基本）</span>
記事をプレビュー表示したとき
ポヨンポヨン文字（基本）
ポヨンポヨン文字（太字）
CSS
/*ポヨンポヨン文字（太字）*/
.poyon-mozi2 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
font-weight: bold; /*太字*/
animation: poyon-mozi2a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi2a {
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
<span class="poyon-mozi2">ポヨンポヨン文字（太字）</span>
記事をプレビュー表示したとき
ポヨンポヨン文字（太字）
ポヨンポヨン文字（色付き）
CSS
/*ポヨンポヨン文字（色付き）*/
.poyon-mozi3 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: red; /*文字の色*/
animation: poyon-mozi3a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi3a {
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
<span class="poyon-mozi3">ポヨンポヨン文字（色付き）</span>
記事をプレビュー表示したとき
ポヨンポヨン文字（色付き）
ポヨンポヨン文字（リンク付き）
CSS
/*ポヨンポヨン文字（リンク付き）*/
.poyon-mozi4 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
animation: poyon-mozi4a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi4a {
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
<span class="poyon-mozi4"><a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">ポヨンポヨン文字（リンク付き）</a></span>
記事をプレビュー表示したとき
ポヨンポヨン文字（大きい文字）
CSS
/*ポヨンポヨン文字（大きい文字）*/
.poyon-mozi5 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
font-size: 1.5em; /*文字の大きさ*/
animation: poyon-mozi5a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi5a {
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
<span class="poyon-mozi5">ポヨンポヨン文字（大きい文字）</span>
記事をプレビュー表示したとき
ポヨンポヨン文字（大きい文字）
ポヨンポヨン文字（下線付き）
CSS
/*ポヨンポヨン文字（下線付き）*/
.poyon-mozi6 {
display: inline-block; /*位置*/
text-decoration: underline; /*下線*/
color: black; /*文字の色*/
animation: poyon-mozi6a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi6a {
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
<span class="poyon-mozi6">ポヨンポヨン文字（下線付き）</span>
記事をプレビュー表示したとき
ポヨンポヨン文字（下線付き）
ポヨンポヨン文字（マーカー付き）
CSS
/*ポヨンポヨン文字（マーカー付き）*/
.poyon-mozi7 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー色*/
animation: poyon-mozi7a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi7a {
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
<span class="poyon-mozi7">ポヨンポヨン文字（マーカー付き）</span>
記事をプレビュー表示したとき
ポヨンポヨン文字（マーカー付き）
ポヨンポヨン文字（速いポヨンポヨン）
CSS
/*ポヨンポヨン文字（速いポヨンポヨン）*/
.poyon-mozi8 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
animation: poyon-mozi8a 0.5s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi8a {
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
<span class="poyon-mozi8">ポヨンポヨン文字（速いポヨンポヨン）</span>
記事をプレビュー表示したとき
ポヨンポヨン文字（速いポヨンポヨン）
ポヨンポヨン文字（マウスの矢印をのせるとポヨンポヨン止まる）
CSS
/*ポヨンポヨン文字（マウスの矢印をのせるとポヨンポヨン止まる）*/
.poyon-mozi9 {
display: inline-block; /*位置*/
text-decoration: none; /*文字の装飾なし*/
color: black; /*文字の色*/
animation: poyon-mozi9a 2s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
.poyon-mozi9:hover {
animation: poyon-mozi9a 0s ease-in-out infinite; /*ポヨンポヨンする時間*/
}
@keyframes poyon-mozi9a {
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
<span class="poyon-mozi9">ポヨンポヨン文字（マウスの矢印をのせるとポヨンポヨン止まる）</span>
記事をプレビュー表示したとき
ポヨンポヨン文字（マウスの矢印をのせるとポヨンポヨン止まる）