次は、画像を震えさせるHTMLとCSSを使ってする方法をします。
画像を震えさせるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像を震えさせるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="furueru-gazou1"> ここに画像を入れる </div>
貼り付けました。
「ここに画像を入れる」の文字を消します。
文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像を震えさせるHTMLとCSSを使ってする方法」の
画像が震えることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*震える画像（基本）*/
.furueru-gazou1 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
animation: furueru-gazou1a .1s infinite; /*震える時間*/
}
@keyframes furueru-gazou1a {
0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}
HTML
<div class="furueru-gazou1"> ここに画像を入れる </div>
「width」の、「350px」の数字が大きくなるほど画像の横幅が大きくなります。
「height」の、「190px」の数字が大きくなるほど画像の高さが大きくなります。
「animation」のところは画像の震える時間を設定するCSSコードです。
「translate」は、画像の震える動きの位置を設定するCSSコードです。
「rotateZ」は、画像の回転の位置を設定するCSSコードです。
「ここに画像を入れる」の文字を消して、画像を入れてください。画像が震える記入例
震える画像（基本）
CSS
/*震える画像（基本）*/
.furueru-gazou1 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
animation: furueru-gazou1a .1s infinite; /*震える時間*/
}
@keyframes furueru-gazou1a {
0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}
HTML
<div class="furueru-gazou1"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
震える画像（枠線付き）
CSS
/*震える画像（枠線付き）*/
.furueru-gazou2 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
border: solid 2px black; /*枠線*/
animation: furueru-gazou2a .1s infinite; /*震える時間*/
}
@keyframes furueru-gazou2a {
0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}
HTML
<div class="furueru-gazou2"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
震える画像（枠付き）
CSS
/*震える画像（枠付き）*/
.furueru-gazou3-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding-top: 25px; /* 枠の余白*/
width: 400px; /*枠の横幅*/
height: 300px; /*枠の高さ*/
}
.furueru-gazou3 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
margin: auto; /*枠の中央にする設定*/
animation: furueru-gazou3a .1s infinite; /*震える時間*/
}
@keyframes furueru-gazou3a {
0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}
HTML
<div class="furueru-gazou3-waku"> <div class="furueru-gazou3"> ここに画像を入れる </div> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
震える画像（文字と枠付き）
CSS
/*震える画像（文字と枠付き）*/
.furueru-gazou4-mozi {
font-size: 1.5em; /* 文字の大きさ*/
text-align: center; /*文字の位置*/
font-weight: bold; /*太さ*/
}
.furueru-gazou4-bunsho {
font-size: 1.2em; /* 文字の大きさ*/
text-align: left; /*文字の位置*/
padding-top: 20px; /*文字の上側の余白*/
}
.furueru-gazou4-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding: 20px; /*枠内の上側の余白*/
width: 400px; /*枠の横幅*/
height: auto; /*枠の高さ*/
}
.furueru-gazou4 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
margin: auto; /*枠の中央にする設定*/
animation: furueru-gazou4a .1s infinite; /*震える時間*/
}
@keyframes furueru-gazou4a {
0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}
HTML
<div class="furueru-gazou4-waku"> <div class="furueru-gazou4-mozi">ここに文字を入れる</div> <div class="furueru-gazou4"> ここに画像を入れる </div> <div class="furueru-gazou4-bunsho">ここに文章を入れる</div> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
ここに文字を入れる
ここに文章を入れる
震える画像（リンク付き）
CSS
/*震える画像（リンク付き）*/
.furueru-gazou5 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
animation: furueru-gazou5a .1s infinite; /*震える時間*/
}
@keyframes furueru-gazou5a {
0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
25% {transform: translate(2px, 2px) rotateZ(1deg)} /*震える動き調整*/
50% {transform: translate(0px, 2px) rotateZ(0deg)} /*震える動き調整*/
75% {transform: translate(2px, 0px) rotateZ(-1deg)} /*震える動き調整*/
100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}
HTML
<div class="furueru-gazou5"> <a href="ここにリンクのURLを入れます" rel="noopener" target="_blank">ここに画像を入れる</a> </div>
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
震える画像（もっと震える）
CSS
/*震える画像（もっと震える）*/
.furueru-gazou6 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
animation: furueru-gazou6a .2s infinite; /*震える時間*/
}
@keyframes furueru-gazou6a {
0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
25% {transform: translate(10px, 10px) rotateZ(1deg)} /*震える動き調整*/
50% {transform: translate(0px, 10px) rotateZ(0deg)} /*震える動き調整*/
75% {transform: translate(10px, 0px) rotateZ(-1deg)} /*震える動き調整*/
100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}
HTML
<div class="furueru-gazou6"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
震える画像（ゆっくり震える）
CSS
/*震える画像（ゆっくり震える）*/
.furueru-gazou7 {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
animation: furueru-gazou7a .5s infinite; /*震える時間*/
}
@keyframes furueru-gazou7a {
0% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
25% {transform: translate(10px, 10px) rotateZ(1deg)} /*震える動き調整*/
50% {transform: translate(0px, 10px) rotateZ(0deg)} /*震える動き調整*/
75% {transform: translate(10px, 0px) rotateZ(-1deg)} /*震える動き調整*/
100% {transform: translate(0px, 0px) rotateZ(0deg)} /*震える動き調整*/
}
HTML
<div class="furueru-gazou7"> ここに画像を入れる </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき