次は、画像の上に文字をかさねるHTMLとCSSを使ってする方法をします。
画像の上に文字をかさねるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像の上に文字をかさねるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="g-kasaneru-mozi1"> ここに画像を入れる <p>画像の上に文字をかさねる（基本）</p> </div>
貼り付けました。
「ここに画像を入れる」の文字を消します。
文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像の上に文字をかさねるHTMLとCSSを使ってする方法」の
画像の上に文字がでていることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*画像の上に文字をかさねる（基本）*/
.g-kasaneru-mozi1 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi1 p {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi1 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi1"> ここに画像を入れる <p>画像の上に文字をかさねる（基本）</p> </div>
「position: relative;」は、画像を親要素として設定するためのCSSコードです。
「width」の、「300px」の数字が大きくなるほど画像の横幅が大きくなります。
「height」の、「170px」の数字が大きくなるほど画像の高さが大きくなります。
「position: absolute;」は、文字を子要素として設定するためのCSSコードです。
「color: white;」は、文字の色を設定するためのCSSコードです。
「top: 0px;」は、画像の上側からどれくらいの距離に文字を設置するかを設定するためのCSSコードです。
「left: 0px;」は、画像の左側からどれくらいの距離に文字を設置するかを設定するためのCSSコードです。
画像の上に文字をかさねる記入例
画像の上に文字をかさねる（基本）
CSS
/*画像の上に文字をかさねる（基本）*/
.g-kasaneru-mozi1 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi1 p {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi1 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi1"> ここに画像を入れる <p>画像の上に文字をかさねる（基本）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる（基本）
画像の上に文字をかさねる（太字）
CSS
/*画像の上に文字をかさねる（太字）*/
.g-kasaneru-mozi2 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi2 p {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-weight: bold; /*太字*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi2 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi2"> ここに画像を入れる <p>画像の上に文字をかさねる（太字）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる（太字）
画像の上に文字をかさねる（色付き）
CSS
/*画像の上に文字をかさねる（色付き）*/
.g-kasaneru-mozi3 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi3 p {
position: absolute; /*絶対配置*/
color: yellow; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi3 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi3"> ここに画像を入れる <p>画像の上に文字をかさねる（色付き）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる（色付き）
画像の上に文字をかさねる（文字だけにリンク付き）
CSS
/*画像の上に文字をかさねる（文字だけにリンク付き）*/
.g-kasaneru-mozi4 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi4 p {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi4 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi4"> ここに画像を入れる <a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"><p>画像の上に文字をかさねる<br>（文字だけにリンク付き）</p></a> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる（画像全体にリンク付き）
CSS
/*画像の上に文字をかさねる（画像全体にリンク付き）*/
.g-kasaneru-mozi5 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi5 p {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi5 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<a href="ここにリンクのURLを入れます" rel="noopener" target="_blank"> <div class="g-kasaneru-mozi5"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（画像全体にリンク付き）</p> </div> </a>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる（大きい文字）
CSS
/*画像の上に文字をかさねる（大きい文字）*/
.g-kasaneru-mozi6 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi6 p {
position: absolute; /*絶対配置*/
color: white;/*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-size: 1.5em; /*文字の大きさ*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi6 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi6"> ここに画像を入れる <p>画像の上に文字をかさねる（大きい文字）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる（大きい文字）
画像の上に文字をかさねる（下線付き）
CSS
/*画像の上に文字をかさねる（下線付き）*/
.g-kasaneru-mozi7 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi7 p {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
text-decoration: underline; /*下線*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi7 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi7"> ここに画像を入れる <p>画像の上に文字をかさねる（下線付き）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる（下線付き）
画像の上に文字をかさねる（文字に背景付き）
CSS
/*画像の上に文字をかさねる（文字に背景付き）*/
.g-kasaneru-mozi8 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi8 p {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
text-decoration: none; /*文字の装飾なし*/
background: black; /*文字の背景色*/
padding-left: 10px !important; /*左側の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi8 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi8"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（文字に背景付き）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（文字に背景付き）
画像の上に文字をかさねる（右下に表示）
CSS
/*画像の上に文字をかさねる（右下に表示）*/
.g-kasaneru-mozi9 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi9 p {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
bottom: 0px; /*下側の位置*/
right: 0px; /*右側の位置*/
text-decoration: none; /*文字の装飾なし*/
background: red; /*文字の背景色*/
padding-left: 10px !important; /*左側の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi9 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi9"> ここに画像を入れる <p>画像の上に文字をかさねる（右下に表示）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（右下に表示）
画像の上に文字をかさねる（真ん中に表示）
CSS
/*画像の上に文字をかさねる<br>（真ん中に表示）*/
.g-kasaneru-mozi10 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi10 p {
position: absolute; /*絶対配置*/
top: 50%; /*真ん中に表示*/
left: 50%; /*真ん中に表示*/
-ms-transform: translate(-50%,-50%); /*文字の基準位置調整*/
-webkit-transform: translate(-50%,-50%); /*文字の基準位置調整*/
transform: translate(-50%,-50%); /*文字の基準位置調整*/
color: white;/*文字の色*/
background: green; /*文字の背景色*/
line-height: 1.5; /*行の高さ*/
text-align: center; /*文字中央ぞろえ*/
padding: 10px !important; /*文字の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi10 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi10"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（真ん中に表示）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（真ん中に表示）
画像の上に文字をかさねる（真ん中の上表示）
CSS
/*画像の上に文字をかさねる（真ん中の上表示）*/
.g-kasaneru-mozi11 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi11 p {
position: absolute; /*絶対配置*/
top: 0%; /*上側の位置*/
left: 50%; /*左側の位置*/
-ms-transform: translate(-50%,0%); /*文字の基準位置調整*/
-webkit-transform: translate(-50%,0%); /*文字の基準位置調整*/
transform: translate(-50%,0%); /*文字の基準位置調整*/
color: white;/*文字の色*/
background: orange; /*文字の背景色*/
line-height: 1.5; /*行の高さ*/
text-align: center; /*文字中央ぞろえ*/
padding: 10px !important; /*文字の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi11 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi11"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（真ん中上表示）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（真ん中上表示）
画像の上に文字をかさねる（右上の表示）
CSS
/*画像の上に文字をかさねる（右上の表示）*/
.g-kasaneru-mozi12 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi12 p {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
right: 0px; /*右側の位置*/
color: white;/*文字の色*/
background: pink; /*文字の背景色*/
line-height: 1.5; /*行の高さ*/
text-align: center; /*文字中央ぞろえ*/
padding: 10px !important; /*文字の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi12 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi12"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（右上の表示）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（右上の表示）
画像の上に文字をかさねる（左下の表示）
CSS
/*画像の上に文字をかさねる（左下の表示）*/
.g-kasaneru-mozi13 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi13 p {
position: absolute; /*絶対配置*/
left: 0px; /*左側の位置*/
bottom: 0px; /*下側の位置*/
color: black;/*文字の色*/
background: lime; /*文字の背景色*/
line-height: 1.5; /*行の高さ*/
text-align: center; /*文字中央ぞろえ*/
padding: 10px !important; /*文字の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi13 img {
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi13"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（左下の表示）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（左下の表示）
画像の上に文字をかさねる（真ん中の下表示）
CSS
/*画像の上に文字をかさねる（真ん中の下表示）*/
.g-kasaneru-mozi14 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height:170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi14 p {
position: absolute; /*絶対配置*/
left: 50%; /*左側の位置*/
bottom: 0%; /*下側の位置*/
-ms-transform: translate(-50%,0%); /*文字の基準位置調整*/
-webkit-transform: translate(-50%,0%); /*文字の基準位置調整*/
transform: translate(-50%,0%); /*文字の基準位置調整*/
color: black;/*文字の色*/
background: yellow; /*文字の背景色*/
line-height: 1.4; /*行の高さ*/
text-align: center; /*文字中央ぞろえ*/
padding: 10px !important; /*文字の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi14 img {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi14"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（真ん中下表示）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（真ん中下表示）
画像の上に文字をかさねる（左の真ん中表示）
CSS
/*画像の上に文字をかさねる（左の真ん中表示）*/
.g-kasaneru-mozi15 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi15 p {
position: absolute; /*絶対配置*/
top: 50%; /*上側の位置*/
left: 0%; /*左側の位置*/
-ms-transform: translate(0%,-50%); /*文字の基準位置調整*/
-webkit-transform: translate(0%,-50%); /*文字の基準位置調整*/
transform: translate(0%,-50%); /*文字の基準位置調整*/
color: white;/*文字の色*/ /*中央表示調整*/
background: yellowgreen; /*文字の背景色*/
line-height: 1.5; /*行の高さ*/
text-align: center; /*文字中央ぞろえ*/
padding: 10px !important; /*文字の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi15 img {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi15"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（左の真ん中表示）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（左の真ん中表示）
画像の上に文字をかさねる（右側の真ん中表示）
CSS
/*画像の上に文字をかさねる（右側の真ん中表示）*/
.g-kasaneru-mozi16 {
position: relative; /*相対配置*/
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-mozi16 p {
position: absolute; /*絶対配置*/
top: 50%; /*上側の位置*/
right: 0%; /*左側の位置*/
-ms-transform: translate(0%,-50%); /*文字の基準位置調整*/
-webkit-transform: translate(0%,-50%); /*文字の基準位置調整*/
transform: translate(0%,-50%); /*文字の基準位置調整*/
color: blue;/*文字の色*/ /*中央表示調整*/
background: aqua; /*文字の背景色*/
line-height: 1.5; /*行の高さ*/
text-align: center; /*文字中央ぞろえ*/
padding: 10px !important; /*文字の余白*/
}
/*画像の大きさ設定*/
.g-kasaneru-mozi16 img {
width: 300px; /*画像の横幅*/
height: 170px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-mozi16"> ここに画像を入れる <p>画像の上に文字をかさねる<br>（右側の真ん中表示）</p> </div>「ここに画像を入れる」の文字を消して、画像を入れてください。
記事をプレビュー表示したとき
画像の上に文字をかさねる
（右側の真ん中表示）