 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今号のデザイン道場は、テキストをライン表示にしてロゴ風にする方法をご紹介します。
 |
|
 |
 |
スタイルシートを編集する
HTMLはご自身で変更してください。
サンプル用にclass名を付けたdivタグを記載しています。
このclass名については、ご自身で変更いただいて結構です。
●HTML
<div class="txtlogo">
CAFE <span class="stroke">RESPONSIVE</span>
</div>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
文字サイズはfont-sizeで、文字色は、colorとtext-strokeで変更してください。
<span class="stroke">～</span>で囲んだ部分も文字がラインとなります。
●スタイルシート
.txtlogo {
font-size: 40px;
font-weight: 700;
color: #000;
}
.txtlogo .stroke {
color: transparent;
-webkit-text-stroke: 1px #000;
text-stroke: 1px #000;
display: inline-block;
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.