 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今号のデザイン道場は、スタイルシートで吹き出しを作る方法をご紹介します。
 |
|
 |
 |
HTMLはご自身で変更してください。
サンプル用にclass名を付けたdivタグを記載しています。
このclass名については、ご自身で変更いただいて結構です。
●HTML
<div class="balloontxt">スタイルシートで作る吹き出し</div>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
●色
・吹き出し
.balloontxtのbackground-color: #000000;
.balloontxt::beforeのborder-top: 8px solid #000000;
のそれぞれの色を変更してください。
borderが吹き出し▼の部分となります。
・テキスト
.balloontxtのcolor: #FFFFFF;で変更できます。
その他、文字サイズや吹き出しサイズなども自由に変更できますので、色々お試しください。
●スタイルシート
.balloontxt {
position: relative;
padding: 7px 10px;
margin: 15px 0px;
min-width: 300px;
max-width: 100%;
border-radius: 10px;
color: #FFFFFF;
font-size: 16px;
text-align: center;
background-color: #000000;
}
.balloontxt::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 8px solid transparent;
border-top: 8px solid #000000;
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.