おちゃのこ通信 Vol.342 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。

今号のデザイン道場は、写真の上に薄い黒背景を入れ文字を見やすくする方法をご紹介します。

	https://cafe-responsive.ocnk.net/

スタイルシートを編集する

HTMLはご自身で変更してください。
サンプル用にclass名を付けたdivタグを記載しています。
このclass名については、ご自身で変更いただいて結構です。

●HTML

<div class="overlay_box">
<div class="overlay"><img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/20170601_a38d57.jpg" width="400" height="400" alt="写真"></div>
<div class="overlaytxt">OVERLAY</div>
</div>

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

画像の横幅(例では400px)に合わせてoverlay_boxの横幅を指定ください。
background-color: rgba(0, 0, 0, 0.3);が薄背景となります。
rgbaで色指定を行う必要があります。0.3が透明度です。
例）rgba(255, 255, 255, 0.3);の場合、白背景で薄くできます。

●スタイルシート

.overlay_box {
width: 400px;
position: relative;
}

.overlay::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
}

.overlaytxt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
font-size: 50px;
font-weight: bold;
}

なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php