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

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

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

今号のデザイン道場は、スタイルシートで斜線背景を作成する方法をご紹介します。

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

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

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

●HTML

<div class="dotbg dottxt">DOT BACKGROUND</div>

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

●色
・#CCCCCCと#999999が背景とドットの色となります。

●スタイルシート

.dotbg {
background-color: #CCCCCC;
background-image:
radial-gradient(#999999 1px, transparent 1px);
background-size: 20px 20px;
}

.dottxt {
padding: 20px;
color: #000;
text-align: center;
font-weight: bold;
}

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