 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今号のデザイン道場は、タイトルの左上にボーダーを入れる方法をご紹介します。
このボーダーがあるだけで、タイトルに目がとまりやすくなります。
 |
|
 |
 |
スタイルシートを編集する
HTMLはご自身で変更してください。
サンプル用にclass名を付けたdivタグを記載しています。
このclass名については、ご自身で変更いただいて結構です。
●HTML
<h2 class="border_title">BORDER付タイトル</h2>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
border: none;
color: #000000;
の指定については、既存のCSSをリセットするための指定ですので、テンプレートによりことなります。
●スタイルシート
h2.border_title {
border: none;
color: #000000;
}
h2.border_title::before {
content: "";
display: block;
width: 20px;
height: 3px;
background-color: #000000;
margin-bottom: 10px;
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.