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

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、HTML5テンプレートのトップ画像内に文言を入れる方法をご紹介します。
トップ画像には、管理画面内から、文言やリンクを設定することができます。
詳細は、下記をご覧ください。
http://www.ocnk.net/faq/index.php?action=artikel&cat=281565&id=976

入れた文言は、スタイルシートにて装飾することができます。





文言を挿入する

デザイン管理→配置/画像/コメント設定のトップ画像欄をクリックしてください。

設定画面が表示されますので、コメント欄に文言やhtmlタグを設定してください。
※この欄は、htmlタグを利用できますので、ご自身で独自のclass名やid名を付けることや画像を挿入することも可能です。

ここでは、メインコピー1行、サブコピー1行をそれぞれdivタグを利用して独自にclass名を付けて挿入しています。


<div class="top_image_copy">Spring&Summer Collection 2015</div>
<div class="top_image_subcopy">tops,bottoms,accessories</div>

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

デザイン管理→スタイルシートの編集から指定を追加してください。
ここでは、下記の点を編集しています。
画像にバランスよく文字を入れるだけでも、バナー画像のように表現することができます。

・既存の薄い白色の背景画像を削除
background-image: none;
で指定できます。

・位置をtopを利用し下部に移動
top: 180px;
topで上部からの位置、leftで左からの位置を調整できます。

・文字を装飾
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: capitalize;
font-style: italic;
font-weight: bold;
フォントを変更し、文字スタイルを適用しています。

・文字サイズを調整
font-size: 192%; font-size: 108%;
先ほど、コメント欄に挿入した、divタグのclass名を利用してメインコピーとサブコピーで別の文字サイズを適用しています。


.swipe_list .image_annotation {
background-image: none;
top: 180px;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: capitalize;
font-style: italic;
font-weight: bold;
line-height: 120%;
}

.swipe_list .image_annotation .top_image_copy {
font-size: 192%;
}

.swipe_list .image_annotation .top_image_subcopy {
font-size: 108%;
}

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

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

Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.