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

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

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

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

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

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

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

●HTML

<div class="ribbon">スタイルシートで作るリボン</div>

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

●背景色
・#FF0000

●文字色
・#FFFFFF

●リボン用背景色
・#FFFFFF

●スタイルシート

.ribbon {
display: inline-block;
position: relative;
height: 50px;
line-height: 50px;
text-align: center;
padding: 0px 30px;
font-size: 18px;
background-color: #FF0000;
color: #FFFFFF;
box-sizing: border-box;
}

.ribbon:before, .ribbon:after {
position: absolute;
content: '';
width: 0px;
height: 0px;
z-index: 1;
top: 0;
border-style: solid;
}

.ribbon:before {
left: 0;
border-width: 25px 0px 25px 15px;
border-color: transparent transparent transparent #FFFFFF;
}

.ribbon:after {
right: 0;
border-width: 25px 15px 25px 0px;
border-color: transparent #FFFFFF transparent transparent;
}

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

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