 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、トップ画像のコメント欄の文字をデザインする方法をご紹介します。
 |
|
 |
 |
デザイン管理→画像とコメントの設定のトップ画像欄に下記のHTMLを貼り付けてください。
位置については、左上、左下、右上、右下より選択ください。
<div class="topimage_copy">2021 Spring&Summer
<span class="topimage_subcopy">Tops/Pants & leggings/Dresses/Shoes/Others</span></div>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は最下部にお願いします。
.topimage_copyにfont-familyでフォントを設定することで、よりデザインされた文字で表示できます。
font-familyについては、ご自身で設定してください。
color: #FFFFFF;
が文字色となります。背景色が薄い色の写真に重ねる時は、黒などに変更してください。
.topimage_copy {
font-size: 16px;
color: #FFFFFF;
text-shadow: rgba(0,0,0,.2) 1px 1px 10px, rgba(0,0,0,.2) -1px 1px 10px;
}
.topimage_subcopy {
display: block;
font-size: 10px;
}
.annotation_left_bottom,
.annotation_right_bottom {
bottom: 80px;
}
.annotation_left_top,
.annotation_right_top {
top: 80px;
}
@media only screen and (min-width: 840px) {
.topimage_copy {
font-size: 25px;
}
.topimage_subcopy {
font-size: 12px;
}
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.