次は、画像の上にボタンをかさねるHTMLとCSSを使ってする方法をします。
画像の上にボタンをかさねるHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「画像の上にボタンをかさねるHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="g-kasaneru-btn1"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn1a">クラウドワークス公式</a> </div>
貼り付けました。
「ここに画像を入れる」の文字を消します。
文字を消したところに「画像」を入れます。
左上の「メディアを追加」を押します。
左上の「メディアライブラリ」を押します。
①「WordPress」を選択します。
画像は、他の画像でも大丈夫です。
②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。
③右下の「投稿に挿入」を押します。
画像が挿入されました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「画像の上にボタンをかさねるHTMLとCSSを使ってする方法」の
画像の上にボタンがかさなっていることを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*画像の上にボタンをかさねる（基本）*/
.g-kasaneru-btn1 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn1a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
background: #66d88d;/*背景色*/
color: #FFF !important; /*文字色*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn1 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn1"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn1a">クラウドワークス公式</a> </div>
「position: relative;」は、画像を親要素として設定するためのCSSコードです。
「width」の、「450px」の数字が大きくなるほど画像の横幅が大きくなります。
「height」の、「255px」の数字が大きくなるほど画像の高さが大きくなります。
「position: absolute;」は、文字を子要素として設定するためのCSSコードです。
「top: 0px;」は、画像の上側からどれくらいの距離にボタンを設置するかを設定するためのCSSコードです。
「left: 0px;」は、画像の左側からどれくらいの距離にボタンを設置するかを設定するためのCSSコードです。
「display」は、ボタンの位置を指定するためのCSSコードです。
「padding」は、ボタンの余白を設定するためのCSSコードです。
「text-decoration」のところは文字の装飾するためのCSSコードです。
「background」は、ボタンの背景色を設定するためのCSSコードです。
「color」は、文字の色を設定するためのCSSコードです。
「ここに画像を入れる」の文字を消して、画像を入れます。
「https://crowdworks.jp」を、他のURLリンクに変えると、リンク先を変えることができます。
画像の上にボタンをかさねる記入例
画像の上にボタンをかさねる（基本）
CSS
/*画像の上にボタンをかさねる（基本）*/
.g-kasaneru-btn1 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn1a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
background: #66d88d;/*背景色*/
color: #FFF !important; /*文字色*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn1 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn1"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn1a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（上から見た）
CSS
/*画像の上にボタンをかさねる（上から見た）*/
.g-kasaneru-btn2 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn2a {
position: absolute; /*絶対配置*/
top: 10px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
padding: 0.35em 1em; /*余白*/
background: red;/*背景色*/
color: #FFF !important; /*文字色*/
text-decoration: none !important; /*装飾なし*/
}
/*ボタンの上側台形部分*/
.g-kasaneru-btn2a:before {
content: ""; /**/
position: absolute; /*親要素の左上基準*/
top: -16px; /*上側位置*/
left: 0; /*左側位置*/
width: -webkit-calc(100% - 0px); /*横幅*/
width: calc(100% - 0px); /*横幅*/
height: 0; /*高さ*/
border: solid 8px transparent; /*ボタン上側 太さ*/
border-bottom-color: #ff6b85; /*ボタン上側 色*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn2 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn2"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn2a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（丸み）
CSS
/*画像の上にボタンをかさねる（丸み）*/
.g-kasaneru-btn3 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn3a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
padding: 0.25em 0.5em; /*余白*/
text-decoration: none !important; /*装飾なし*/
color: #FFF !important; /*文字色*/
background: #fd9535;/*背景色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05) !important; /*影*/
font-weight: bold; /*文字太さ*/
border: solid 2px #d27d00;/*線色*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn3 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn3"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn3a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（ふせん）
CSS
/*画像の上にボタンをかさねる（ふせん）*/
.g-kasaneru-btn4 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn4a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
background: #f7f7f7; /*背景色*/
border-left: solid 6px #ff7c5c;/*左線*/
color: #ff7c5c !important;/*文字色*/
font-weight: bold; /*文字太さ*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn4 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn4"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn4a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（電源みたい）
CSS
/*画像の上にボタンをかさねる（電源みたい）*/
.g-kasaneru-btn5 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn5a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
text-decoration: none !important; /*装飾なし*/
color: blue !important; /*アイコン色*/
width: 80px; /*横幅*/
height: 80px; /*縦幅*/
line-height: 80px; /*行高さ*/
font-size: 40px; /*アイコンサイズ*/
border-radius: 50%; /*角丸み*/
text-align: center; /*中央位置*/
overflow: hidden; /*非表示*/
font-weight: bold !important; /*文字太さ*/
background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%); /*グラデーション*/
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); /*影*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19); /*影*/
border-bottom: solid 2px #b5b5b5; /*線色*/
}
/*アイコン用*/
.g-kasaneru-btn5a i {
line-height: 80px; /*行高さ*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn5 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn5"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn5a"><i class="fa fa-power-off"></i></a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（色変わる）
CSS
/*画像の上にボタンをかさねる（色変わる）*/
.g-kasaneru-btn6 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn6a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
padding: 0.3em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
color: #67c5ff !important; /*文字色*/
border: solid 2px #67c5ff; /*枠線*/
border-radius: 3px; /*角丸み*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn6a:hover {
background: #67c5ff; /*背景色*/
color: white !important; /*文字色*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn6 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn6"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn6a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（両端線）
CSS
/*画像の上にボタンをかさねる（両端線）*/
.g-kasaneru-btn7 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn7a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
font-weight: bold !important; /*文字太さ*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*余白*/
border-left: solid 4px #668ad8; /*左線*/
border-right: solid 4px #668ad8; /*右線*/
color: #668ad8 !important; /*文字色*/
background: #e1f3ff; /*背景色*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn7a:hover {
background: #668ad8 !important; /*背景色*/
color: #FFF !important; /*文字色*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn7 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn7"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn7a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（アイコン付き）
CSS
/*画像の上にボタンをかさねる（アイコン付き）*/
.g-kasaneru-btn8 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn8a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
font-weight: bold !important; /*文字太さ*/
padding: 0.25em 0.5em; /*余白*/
text-decoration: none !important; /*装飾なし*/
color: #FFF !important; /*文字色*/
background: #00bcd4; /*背景色*/
}
/*アイコン用*/
.g-kasaneru-btn8a:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: yellow;/*アイコンの色*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn8a:hover {
background: #1ec7bb; /*背景色*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn8 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn8"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn8a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（グラデーション）
CSS
/*画像の上にボタンをかさねる（グラデーション）*/
.g-kasaneru-btn9 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn9a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #ffffff !important; /*文字色*/
background-image: linear-gradient(#6795fd 0%, #67ceff 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #5e7fca; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn9a:hover {
background-image: linear-gradient(#6795fd 0%, #67ceff 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn9 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn9"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn9a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（画像全体にリンク付き）
CSS
/*画像の上にボタンをかさねる（画像全体にリンク付き）*/
.g-kasaneru-btn10 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn10a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
left: 0px; /*左側の位置*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #ffffff !important; /*文字色*/
background-image: linear-gradient(#67fd8d 0%, #67cdff 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #007b70; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn10a:hover {
background-image: linear-gradient(#67fd8d 0%, #67cdff 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn10 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank"> <div class="g-kasaneru-btn10"> ここに画像を入れる <div class="g-kasaneru-btn10a">クラウドワークス公式</div> </div> </a>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（右下に表示）
CSS
/*画像の上にボタンをかさねる（右下に表示）*/
.g-kasaneru-btn11 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn11a {
position: absolute; /*絶対配置*/
bottom: 0px; /*下側の位置*/
right: 0px; /*右側の位置*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #ffffff !important; /*文字色*/
background-image: linear-gradient(#fdfb67 0%, #ff8300 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #ff5a5a; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn11a:hover {
background-image: linear-gradient(#fdfb67 0%, #ff8300 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn11 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn11"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn11a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（真ん中に表示）
CSS
/*画像の上にボタンをかさねる（真ん中に表示）*/
.g-kasaneru-btn12 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn12a {
position: absolute; /*絶対配置*/
top: 50%; /*真ん中に表示*/
left: 50%; /*真ん中に表示*/
-ms-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
-webkit-transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
transform: translate(-50%,-50%); /*ボタンの基準位置調整*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #0034ff !important; /*文字色*/
background-image: linear-gradient(#fff 0%, #67ceff 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #5e7fca; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn12a:hover {
background-image: linear-gradient(#fff 0%, #67ceff 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn12 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn12"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn12a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（真ん中の上表示）
CSS
/*画像の上にボタンをかさねる（真ん中の上表示）*/
.g-kasaneru-btn13 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn13a {
position: absolute; /*絶対配置*/
top: 0%; /*上側の位置*/
left: 50%; /*左側の位置*/
-ms-transform: translate(-50%,0%); /*ボタンの基準位置調整*/
-webkit-transform: translate(-50%,0%); /*ボタンの基準位置調整*/
transform: translate(-50%,0%); /*ボタンの基準位置調整*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #3625ff !important; /*文字色*/
background-image: linear-gradient(#fffb04 0%, #fefff5 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #ffd802; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn13a:hover {
background-image: linear-gradient(#fffb04 0%, #fefff5 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn13 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn13"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn13a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（右上の表示）
CSS
/*画像の上にボタンをかさねる（右上の表示）*/
.g-kasaneru-btn14 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn14a {
position: absolute; /*絶対配置*/
top: 0px; /*上側の位置*/
right: 0px; /*右側の位置*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #ffffff !important; /*文字色*/
background-image: linear-gradient(#2b2b2b 0%, #61ccff 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #007c99; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn14a:hover {
background-image: linear-gradient(#2b2b2b 0%, #61ccff 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn14 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn14"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn14a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（左下の表示）
CSS
/*画像の上にボタンをかさねる（左下の表示）*/
.g-kasaneru-btn15 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn15a {
position: absolute; /*絶対配置*/
left: 0px; /*左側の位置*/
bottom: 0px; /*下側の位置*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #ffffff !important; /*文字色*/
background-image: linear-gradient(#131313 0%, #d00 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #8a0000; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn15a:hover {
background-image: linear-gradient(#131313 0%, #d00 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn15 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn15"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn15a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（真ん中の下表示）
CSS
/*画像の上にボタンをかさねる（真ん中の下表示）*/
.g-kasaneru-btn16 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn16a {
position: absolute; /*絶対配置*/
left: 50%; /*左側の位置*/
bottom: 0%; /*下側の位置*/
-ms-transform: translate(-50%,0%); /*ボタンの基準位置調整*/
-webkit-transform: translate(-50%,0%); /*ボタンの基準位置調整*/
transform: translate(-50%,0%); /*ボタンの基準位置調整*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #ffffff !important; /*文字色*/
background-image: linear-gradient(#00ff10 0%, #00220d 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #007322; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn16a:hover {
background-image: linear-gradient(#00ff10 0%, #00220d 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn16 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn16"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn16a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（左側の真ん中表示）
CSS
/*画像の上にボタンをかさねる（左側の真ん中表示）*/
.g-kasaneru-btn17 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn17a {
position: absolute; /*絶対配置*/
top: 50%; /*上側の位置*/
left: 0%; /*左側の位置*/
-ms-transform: translate(0%,-50%); /*ボタンの基準位置調整*/
-webkit-transform: translate(0%,-50%); /*ボタンの基準位置調整*/
transform: translate(0%,-50%); /*ボタンの基準位置調整*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #ffffff !important; /*文字色*/
background-image: linear-gradient(#df00ff 0%, #ffb3ef 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #ff0ec3; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn17a:hover {
background-image: linear-gradient(#df00ff 0%, #ffb3ef 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn17 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn17"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn17a">クラウドワークス公式</a> </div>
記事をプレビュー表示したとき
画像の上にボタンをかさねる（右側の真ん中表示）
CSS
/*画像の上にボタンをかさねる（右側の真ん中表示）*/
.g-kasaneru-btn18 {
position: relative; /*相対配置*/
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
/*ボタン用*/
.g-kasaneru-btn18a {
position: absolute; /*絶対配置*/
top: 50%; /*上側の位置*/
right: 0%; /*左側の位置*/
-ms-transform: translate(0%,-50%); /*ボタンの基準位置調整*/
-webkit-transform: translate(0%,-50%); /*ボタンの基準位置調整*/
transform: translate(0%,-50%); /*ボタンの基準位置調整*/
display: inline-block; /*横並び*/
padding: 0.5em 1em; /*余白*/
text-decoration: none !important; /*装飾なし*/
border-radius: 4px; /*角丸み*/
color: #ffffff !important; /*文字色*/
background-image: linear-gradient(#7b6200 0%, #ffef00 100%); /*グラデーション*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
border-bottom: solid 3px #809300; /*下線*/
}
/*ボタンの上にマウスをのせたとき*/
.g-kasaneru-btn18a:hover {
background-image: linear-gradient(#7b6200 0%, #ffef00 70%); /*グラデーション*/
}
/*画像の大きさ設定*/
.g-kasaneru-btn18 img {
width: 450px; /*画像の横幅*/
height: 255px; /*画像の高さ*/
}
HTML
<div class="g-kasaneru-btn18"> ここに画像を入れる <a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="g-kasaneru-btn18a">クラウドワークス公式</a> </div>