次は、画像の上に画像をかさねるHTMLとCSSを使ってする方法をします。
画像の上に画像をかさねるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像の上に画像をかさねるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="g-kasaneru-gazou1"> <img class="g-kasaneru-gazou1a" src="ここに画像1のURLを入れる"/> <img class="g-kasaneru-gazou1b" src="ここに画像2のURLを入れる"/> </div>
貼り付けました。
「ここに画像1のURLを入れる」の文字を消します。
文字を消したところに「画像のURL」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
少し下へ移動します。
右側の「URLをクリップボードにコピー」を押します。
右上の「×」を押します。
先ほど、コピーしたURLを貼り付けます。
「ここに画像2のURLを入れる」の文字を消します。
文字を消したところに「画像のURL」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
「HTML」を選択します。
画像は、他の画像でも大丈夫です。
少し下へ移動します。
右側の「URLをクリップボードにコピー」を押します。
右上の「×」を押します。
先ほど、コピーしたURLを貼り付けます。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像の上に画像をかさねるHTMLとCSSを使ってする方法」の
画像が上に画像がかさなっていることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*画像の上に画像をかさねる（基本）*/
.g-kasaneru-gazou1 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou1a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*かさねる画像の位置設定*/
.g-kasaneru-gazou1b {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou1"> <img class="g-kasaneru-gazou1a" src="ここに画像1のURLを入れる"/> <img class="g-kasaneru-gazou1b" src="ここに画像2のURLを入れる"/> </div>
「position: relative;」は、画像を親要素として設定するためのCSSコードです。
「width」の、「300px」の数字が大きくなるほど画像の横幅が大きくなります。
「height」の、「170px」の数字が大きくなるほど画像の高さが大きくなります。
「position: absolute;」は、文字を子要素として設定するためのCSSコードです。
「color: white;」は、文字の色を設定するためのCSSコードです。
「top: 0px;」は、画像の上側からどれくらいの距離に文字を設置するかを設定するためのCSSコードです。
「left: 0px;」は、画像の左側からどれくらいの距離に文字を設置するかを設定するためのCSSコードです。
「height: 80px !important;」の、「!important」は、他のCSSコードを無視して、この「!important」がついているコードを優先させるためのコードです。
HTMLは、「img」の中に「class="g-kasaneru-gazou1a"」と、「class="g-kasaneru-gazou1b"」を入れて、
CSSを適用させます。
「ここに画像1のURLを入れる」の文字を消して、画像のURLを入れてください。
「ここに画像2のURLを入れる」の文字を消して、画像のURLを入れてください。
画像の上に画像をかさねる記入例
画像の上に画像をかさねる（基本）
CSS
/*画像の上に画像をかさねる（基本）*/
.g-kasaneru-gazou1 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou1a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*かさねる画像の位置設定*/
.g-kasaneru-gazou1b {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou1"> <img class="g-kasaneru-gazou1a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou1b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（枠線付き）
CSS
/*画像の上に画像をかさねる（枠線付き）*/
.g-kasaneru-gazou2 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou2a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
border: solid 5px black; /*枠線*/
}
/*かさねる画像の位置設定*/
.g-kasaneru-gazou2b {
position: absolute; /*絶対配置*/
top: 5px; /*上側の位置*/
left: 5px; /*左側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou2"> <img class="g-kasaneru-gazou2a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou2b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（枠付き）
CSS
/*画像の上に画像をかさねる（枠付き）*/
.g-kasaneru-gazou3-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding-top: 25px; /* 枠の余白*/
width: 400px; /*枠の横幅*/
height: 300px; /*枠の高さ*/
}
.g-kasaneru-gazou3 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou3a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*かさねる画像の位置設定*/
.g-kasaneru-gazou3b {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou3-waku"> <div class="g-kasaneru-gazou3"> <img class="g-kasaneru-gazou3a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou3b" src="ここに画像のURLを入れる"/> </div> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（文字と枠付き）
CSS
/*画像の上に画像をかさねる（文字と枠付き）*/
.g-kasaneru-gazou4-mozi {
font-size: 1.5em; /* 文字の大きさ*/
text-align: center; /*文字の位置*/
font-weight: bold; /*太さ*/
}
/*文章*/
.g-kasaneru-gazou4-bunsho {
font-size: 1.2em; /* 文字の大きさ*/
text-align: left; /*文字の位置*/
padding-top: 20px; /*文字の上側の余白*/
}
/*枠*/
.g-kasaneru-gazou4-waku {
background-color: #e9e9e9; /* 枠の背景色指定*/
border: solid 1px gray; /*枠線*/
padding: 20px; /*枠内の上側の余白*/
width: 400px; /*枠の横幅*/
height: auto; /*枠の高さ*/
}
/*画像の大きさ設定*/
.g-kasaneru-gazou4 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou4a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*かさねる画像の位置設定*/
.g-kasaneru-gazou4b {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou4-waku"> <div class="g-kasaneru-gazou4-mozi">ここに文字を入れる</div> <div class="g-kasaneru-gazou4"> <img class="g-kasaneru-gazou4a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou4b" src="ここに画像のURLを入れる"/> </div> <div class="g-kasaneru-gazou4-bunsho">ここに文章を入れる</div> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
ここに文字を入れる
ここに文章を入れる
画像の上に画像をかさねる（かさねる画像だけリンク付き）
CSS
/*画像の上に画像をかさねる（かさねる画像だけリンク付き）*/
.g-kasaneru-gazou5 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou5a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*かさねる画像の位置設定*/
.g-kasaneru-gazou5b {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou5"> <img class="g-kasaneru-gazou5a" src="ここに画像のURLを入れる"/> <a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"> <img class="g-kasaneru-gazou5b" src="ここに画像のURLを入れる"/> </a> </div>
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（画像全体にリンク付き）
CSS
/*画像の上に画像をかさねる（画像全体にリンク付き）*/
.g-kasaneru-gazou6 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou6a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*かさねる画像の位置設定*/
.g-kasaneru-gazou6b {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou6"> <a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"><img class="g-kasaneru-gazou6a" src="ここに画像のURLを入れる"/><img class="g-kasaneru-gazou6b" src="ここに画像のURLを入れる"/></a> </div>
「ここにリンクのURLを入れます」の文字を消して、リンクのURLを入れてください。
「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（右下に表示）
CSS
/*画像の上に文字をかさねる（右下に表示）*/
.g-kasaneru-gazou7 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou7a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-gazou7b {
position: absolute; /*絶対配置*/
bottom: 0px; /*下側の位置*/
right: 0px; /*右側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou7"> <img class="g-kasaneru-gazou7a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou7b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（真ん中に表示）
CSS
/*画像の上に文字をかさねる（真ん中に表示）*/
.g-kasaneru-gazou8 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou8a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-gazou8b {
position: absolute; /*絶対配置*/
top: 50%; /*真ん中に表示*/
left: 50%; /*真ん中に表示*/
-ms-transform: translate(-50%,-50%); /*画像の基準位置調整*/
-webkit-transform: translate(-50%,-50%); /*画像の基準位置調整*/
transform: translate(-50%,-50%); /*画像の基準位置調整*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou8"> <img class="g-kasaneru-gazou8a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou8b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（真ん中の上表示）
CSS
/*画像の上に文字をかさねる（真ん中の上表示）*/
.g-kasaneru-gazou9 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou9a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-gazou9b {
position: absolute; /*絶対配置*/
top: 0%; /*上側の位置*/
left: 50%; /*左側の位置*/
-ms-transform: translate(-50%,0%); /*画像の基準位置調整*/
-webkit-transform: translate(-50%,0%); /*画像の基準位置調整*/
transform: translate(-50%,0%); /*画像の基準位置調整*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou9"> <img class="g-kasaneru-gazou9a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou9b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（右上の表示）
CSS
/*画像の上に文字をかさねる（右上の表示）*/
.g-kasaneru-gazou10 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou10a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-gazou10b {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
right: 0px; /*右側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou10"> <img class="g-kasaneru-gazou10a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou10b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（左下の表示）
CSS
/*画像の上に文字をかさねる（左下の表示）*/
.g-kasaneru-gazou11 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou11a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-gazou11b {
position: absolute; /*絶対配置*/
left: 0px; /*左側の位置*/
bottom: 0px; /*下側の位置*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou11"> <img class="g-kasaneru-gazou11a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou11b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（真ん中の下表示）
CSS
/*画像の上に文字をかさねる（真ん中の下表示）*/
.g-kasaneru-gazou12 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou12a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-gazou12b {
position: absolute; /*絶対配置*/
left: 50%; /*左側の位置*/
bottom: 0%; /*下側の位置*/
-ms-transform: translate(-50%,0%); /*画像の基準位置調整*/
-webkit-transform: translate(-50%,0%); /*画像の基準位置調整*/
transform: translate(-50%,0%); /*画像の基準位置調整*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou12"> <img class="g-kasaneru-gazou12a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou12b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に画像をかさねる（左の真ん中表示）
CSS
/*画像の上に文字をかさねる（左の真ん中表示）*/
.g-kasaneru-gazou13 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou13a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-gazou13b {
position: absolute; /*絶対配置*/
top: 50%; /*上側の位置*/
left: 0%; /*左側の位置*/
-ms-transform: translate(0%,-50%); /*画像の基準位置調整*/
-webkit-transform: translate(0%,-50%); /*画像の基準位置調整*/
transform: translate(0%,-50%); /*画像の基準位置調整*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou13"> <img class="g-kasaneru-gazou13a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou13b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる（右側の真ん中表示）
CSS
/*画像の上に文字をかさねる（右側の真ん中表示）*/
.g-kasaneru-gazou14 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*親の画像の設定*/
.g-kasaneru-gazou14a {
width: 300px; /*画像の横幅*/
height: 170px !important; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-gazou14b {
position: absolute; /*絶対配置*/
top: 50%; /*上側の位置*/
right: 0%; /*左側の位置*/
-ms-transform: translate(0%,-50%); /*画像の基準位置調整*/
-webkit-transform: translate(0%,-50%); /*画像の基準位置調整*/
transform: translate(0%,-50%); /*画像の基準位置調整*/
width: 100px; /*画像の横幅*/
height: 80px !important; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-gazou14"> <img class="g-kasaneru-gazou14a" src="ここに画像のURLを入れる"/> <img class="g-kasaneru-gazou14b" src="ここに画像のURLを入れる"/> </div>「ここに画像のURLを入れる」の文字を消して、画像のURLを入れてください。
記事をプレビュー表示したとき