次は、画像の上にアイコンをかさねるHTMLとCSSを使ってする方法をします。
画像の上にアイコンをかさねるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像の上にアイコンをかさねるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="g-kasaneru-icon1"> ここに画像を入れる <div class="g-kasaneru-icon1a">画像の上にアイコンをかさねる（基本）</div> </div>
貼り付けました。
「ここに画像を入れる」の文字を消します。
文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像の上にアイコンをかさねるHTMLとCSSを使ってする方法」の
画像の上にアイコンがかさなっていることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*画像の上にアイコンをかさねる（基本）*/
.g-kasaneru-icon1 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon1a {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-size:1.2em; /*文字の大きさ*/
}
/*アイコン用*/
.g-kasaneru-icon1a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
padding-left: 5px; /*アイコンの左側の余白*/
color: yellow;/*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon1 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon1"> ここに画像を入れる <div class="g-kasaneru-icon1a">画像の上にアイコンをかさねる（基本）</div> </div>
「position: relative;」は、画像を親要素として設定するためのCSSコードです。
「width」の、「450px」の数字が大きくなるほど画像の横幅が大きくなります。
「height」の、「255px」の数字が大きくなるほど画像の高さが大きくなります。
「position: absolute;」は、アイコンを子要素として設定するためのCSSコードです。
「color: white;」は、文字の色を設定するためのCSSコードです。
「top: 0px;」は、画像の上側からどれくらいの距離にアイコンを設置するかを設定するためのCSSコードです。
「left: 0px;」は、画像の左側からどれくらいの距離にアイコンを設置するかを設定するためのCSSコードです。
「font-size」は、文字の大きさを指定するためのCSSコードです。
「font-family」は、アイコンのフォントの設定をするCSSコードです。
「content」の、「f013」は、アイコンの種類を設定するCSSコードです。
「f013」を変えると別のアイコンを表示させることができます。
「font-weght」の、「bold」は、太字にするためのCSSコードです。
「padding-right」は、アイコンの右側の余白を設定するCSSコードです。
「padding-left」は、アイコンの左側の余白を設定するCSSコードです。
「color」は、アイコンの色を設定するCSSコードです。
「ここに画像を入れる」の文字を消して、画像を入れてください。
アイコンの変更方法
アイコンの変更方法を教えます。
下記のサイトを開きます。
↓
https://fontawesome.com/v4.7.0/icons/
少し下へ移動します。
好きな「アイコン」を押します。
ここの４ケタの「f1b9」をコピーします。
ワードプレスの管理画面を開きます。
左側の「外観」を押します。
左側の「カスタムCSS」を押します。
これをCSSコードの「content」の中に貼り付けます。
一番下の「カスタムCSSの更新」を押します。
左上の「サイトを表示」を押します。
「アイコンの色を変えるHTMLとCSSを使ってする方法」の記事を押します。
アイコンが変更されていることを確認します。
画像の上にアイコンをかさねる記入例
画像の上にアイコンをかさねる（基本）
CSS
/*画像の上にアイコンをかさねる（基本）*/
.g-kasaneru-icon1 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon1a {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-size:1.2em; /*文字の大きさ*/
}
/*アイコン用*/
.g-kasaneru-icon1a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
padding-left: 5px; /*アイコンの左側の余白*/
color: yellow;/*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon1 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon1"> ここに画像を入れる <div class="g-kasaneru-icon1a">画像の上にアイコンをかさねる（基本）</div> </div>「画像の上にアイコンをかさねる（基本）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（アイコン後ろ）
CSS
/*画像の上にアイコンをかさねる（アイコン後ろ）*/
.g-kasaneru-icon2 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon2a {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-size:1.2em; /*文字の大きさ*/
}
/*アイコン用*/
.g-kasaneru-icon2a:after {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f15b"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: yellow; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon2 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon2"> ここに画像を入れる <div class="g-kasaneru-icon2a">画像の上にアイコンをかさねる（アイコン後ろ）</div> </div>「画像の上にアイコンをかさねる（アイコン後ろ）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（枠線付き）
CSS
/*画像の上にアイコンをかさねる（枠線付き）*/
.g-kasaneru-icon3 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon3a {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-size:1.2em; /*文字の大きさ*/
}
/*アイコン用*/
.g-kasaneru-icon3a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f00c"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: yellow; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon3 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
border: solid 5px black; /*枠線*/
}
HTML
<div class="g-kasaneru-icon3"> ここに画像を入れる <div class="g-kasaneru-icon3a">画像の上にアイコンをかさねる（枠線付き）</div> </div>「画像の上にアイコンをかさねる（枠線付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（枠線と色付き）
CSS
/*画像の上にアイコンをかさねる（枠線と色付き）*/
.g-kasaneru-icon4 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon4a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px black; /*枠線*/
background: yellow; /*背景色*/
}
/*アイコン用*/
.g-kasaneru-icon4a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f2b6"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon4 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon4"> ここに画像を入れる <div class="g-kasaneru-icon4a">画像の上にアイコンをかさねる<br>（枠線と色付き）</div> </div>「画像の上にアイコンをかさねる（枠線と色付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（グラデーション）
CSS
/*画像の上にアイコンをかさねる（グラデーション）*/
.g-kasaneru-icon5 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon5a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #b6ddff; /*枠線*/
background-image: linear-gradient(#fff 0%, #00cfff 100%); /*グラデーション*/
}
/*アイコン用*/
.g-kasaneru-icon5a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f0c9"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon5 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon5"> ここに画像を入れる <div class="g-kasaneru-icon5a">画像の上にアイコンをかさねる<br>（グラデーション）</div> </div>「画像の上にアイコンをかさねる（グラデーション）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（グラデーション影付き）
CSS
/*画像の上にアイコンをかさねる（グラデーション影付き）*/
.g-kasaneru-icon6 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon6a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
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); /*影*/
}
/*アイコン用*/
.g-kasaneru-icon6a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f02d"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon6 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon6"> ここに画像を入れる <div class="g-kasaneru-icon6a">画像の上にアイコンをかさねる<br>（グラデーション影付き）</div> </div>「画像の上にアイコンをかさねる（グラデーション影付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（アイコンだけリンク付き）
CSS
/*画像の上にアイコンをかさねる（アイコンだけリンク付き）*/
.g-kasaneru-icon7 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon7a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
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); /*影*/
}
/*アイコン用*/
.g-kasaneru-icon7a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f001"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon7 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon7"> ここに画像を入れる <a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank"> <div class="g-kasaneru-icon7a">画像の上にアイコンをかさねる<br>（アイコンだけリンク付き）</div> </a> </div>「画像の上にアイコンをかさねる（アイコンだけリンク付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（画像全体にリンク付き）
CSS
/*画像の上にアイコンをかさねる（画像全体にリンク付き）*/
.g-kasaneru-icon8 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon8a {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #0010ff; /*枠線*/
background-image: linear-gradient(#aef7ff 0%, #270da4 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
}
/*アイコン用*/
.g-kasaneru-icon8a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f023"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: yellow; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon8 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<a href="ここにリンクのURLを入れます" rel="noopener noreferrer" target="_blank"> <div class="g-kasaneru-icon8"> ここに画像を入れる <div class="g-kasaneru-icon8a">画像の上にアイコンをかさねる<br>（画像全体にリンク付き）</div> </div> </a>「画像の上にアイコンをかさねる（画像全体にリンク付き）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（右下に表示）
CSS
/*画像の上にアイコンをかさねる（右下に表示）*/
.g-kasaneru-icon9 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon9a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
bottom: 0px; /*下側の位置*/
right: 0px; /*右側の位置*/
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); /*影*/
text-align: center; /*文字中央ぞろえ*/
width: 80%; /*枠の横幅*/
}
/*アイコン用*/
.g-kasaneru-icon9a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f051"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon9 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon9"> ここに画像を入れる <div class="g-kasaneru-icon9a">画像の上にアイコンをかさねる<br>（右下に表示）</div> </div>「画像の上にアイコンをかさねる（右下に表示）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（真ん中に表示）
CSS
/*画像の上にアイコンをかさねる（真ん中に表示）*/
.g-kasaneru-icon10 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon10a {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
top: 50%; /*真ん中に表示*/
left: 50%; /*真ん中に表示*/
-ms-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
-webkit-transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
transform: translate(-50%,-50%); /*アイコンの基準位置調整*/
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); /*影*/
text-align: center; /*文字中央ぞろえ*/
width: 80%; /*枠の横幅*/
}
/*アイコン用*/
.g-kasaneru-icon10a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f091"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: yellow; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon10 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon10"> ここに画像を入れる <div class="g-kasaneru-icon10a">画像の上にアイコンをかさねる<br>（真ん中に表示）</div> </div>「画像の上にアイコンをかさねる（真ん中に表示）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（真ん中の上表示）
CSS
/*画像の上にアイコンをかさねる（真ん中の上表示）*/
.g-kasaneru-icon11 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon11a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
top: 0%; /*上側の位置*/
left: 50%; /*左側の位置*/
-ms-transform: translate(-50%,0%); /*アイコンの基準位置調整*/
-webkit-transform: translate(-50%,0%); /*アイコンの基準位置調整*/
transform: translate(-50%,0%); /*アイコンの基準位置調整*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #7b90ff; /*枠線*/
background-image: linear-gradient(#fff 0%, #00f3ff 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
text-align: center; /*文字中央ぞろえ*/
width: 80%; /*枠の横幅*/
}
/*アイコン用*/
.g-kasaneru-icon11a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f074"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon11 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon11"> ここに画像を入れる <div class="g-kasaneru-icon11a">画像の上にアイコンをかさねる<br>（真ん中の上表示）</div> </div>「画像の上にアイコンをかさねる（真ん中の上表示）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（右上の表示）
CSS
/*画像の上にアイコンをかさねる（右上の表示）*/
.g-kasaneru-icon12 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon12a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
top: 0px; /*上側の位置*/
right: 0px; /*右側の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #ff9f9f; /*枠線*/
background-image: linear-gradient(#ffef69 0%, #ff8227 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
text-align: center; /*文字中央ぞろえ*/
width: 80%; /*枠の横幅*/
}
/*アイコン用*/
.g-kasaneru-icon12a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f067"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon12 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon12"> ここに画像を入れる <div class="g-kasaneru-icon12a">画像の上にアイコンをかさねる<br>（右上の表示）</div> </div>「画像の上にアイコンをかさねる（右上の表示）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（左下の表示）
CSS
/*画像の上にアイコンをかさねる（左下の表示）*/
.g-kasaneru-icon13 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon13a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
left: 0px; /*左側の位置*/
bottom: 0px; /*下側の位置*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #7eff86; /*枠線*/
background-image: linear-gradient(#56ff79 0%, #ffef00 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
text-align: center; /*文字中央ぞろえ*/
width: 80%; /*枠の横幅*/
}
/*アイコン用*/
.g-kasaneru-icon13a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f058"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon13 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon13"> ここに画像を入れる <div class="g-kasaneru-icon13a">画像の上にアイコンをかさねる<br>（左下の表示）</div> </div>「画像の上にアイコンをかさねる（左下の表示）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（真ん中の下表示）
CSS
/*画像の上にアイコンをかさねる（真ん中の下表示）*/
.g-kasaneru-icon14 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon14a {
position: absolute; /*絶対配置*/
color: white; /*文字色*/
left: 50%; /*左側の位置*/
bottom: 0%; /*下側の位置*/
-ms-transform: translate(-50%,0%); /*アイコンの基準位置調整*/
-webkit-transform: translate(-50%,0%); /*アイコンの基準位置調整*/
transform: translate(-50%,0%); /*アイコンの基準位置調整*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #000; /*枠線*/
background-image: linear-gradient(#6c6c6c 0%, #000 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
text-align: center; /*文字中央ぞろえ*/
width: 80%; /*枠の横幅*/
}
/*アイコン用*/
.g-kasaneru-icon14a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f083"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: red; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon14 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon14"> ここに画像を入れる <div class="g-kasaneru-icon14a">画像の上にアイコンをかさねる<br>（真ん中の下表示）</div> </div>「画像の上にアイコンをかさねる（真ん中の下表示）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（左側の真ん中表示）
CSS
/*画像の上にアイコンをかさねる（左側の真ん中表示）*/
.g-kasaneru-icon15 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon15a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
top: 50%; /*上側の位置*/
left: 0%; /*左側の位置*/
-ms-transform: translate(0%,-50%); /*アイコンの基準位置調整*/
-webkit-transform: translate(0%,-50%); /*アイコンの基準位置調整*/
transform: translate(0%,-50%); /*アイコンの基準位置調整*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #000; /*枠線*/
background-image: linear-gradient(#fff 0%, #cfbeff 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
text-align: center; /*文字中央ぞろえ*/
width: 80%; /*枠の横幅*/
}
/*アイコン用*/
.g-kasaneru-icon15a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f071"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: red; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon15 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon15"> ここに画像を入れる <div class="g-kasaneru-icon15a">画像の上にアイコンをかさねる<br>（左側の真ん中表示）</div> </div>「画像の上にアイコンをかさねる（左側の真ん中表示）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
画像の上にアイコンをかさねる（右側の真ん中表示）
CSS
/*画像の上にアイコンをかさねる（右側の真ん中表示）*/
.g-kasaneru-icon16 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*文字の位置設定*/
.g-kasaneru-icon16a {
position: absolute; /*絶対配置*/
color: blue; /*文字色*/
top: 50%; /*上側の位置*/
right: 0%; /*左側の位置*/
-ms-transform: translate(0%,-50%); /*アイコンの基準位置調整*/
-webkit-transform: translate(0%,-50%); /*アイコンの基準位置調整*/
transform: translate(0%,-50%); /*アイコンの基準位置調整*/
font-size:1.2em; /*文字の大きさ*/
border: solid 2px #fffb00; /*枠線*/
background-image: linear-gradient(#fff 0%, #fcffae 100%); /*グラデーション*/
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
text-align: center; /*文字中央ぞろえ*/
width: 80%; /*枠の横幅*/
}
/*アイコン用*/
.g-kasaneru-icon16a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f043"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue; /*アイコンの色*/
}
/*画像の大きさ設定*/
.g-kasaneru-icon16 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-icon16"> ここに画像を入れる <div class="g-kasaneru-icon16a">画像の上にアイコンをかさねる<br>（右側の真ん中表示）</div> </div>「画像の上にアイコンをかさねる（右側の真ん中表示）」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき