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

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、自由記入欄にバナーを入れる際に、左右に並べる方法をご紹介します。

http://cafe0101.ocnk.net/




htmlタグを挿入する

デザイン管理→配置/画像/コメント設定の自由記入欄に下記のHTMLタグを挿入してください。
※htmlタグを挿入される際は、入力欄下部の「 」のチェックを外してください。

<a>タグのリンク先と、<img>タグの画像は、ご自身で変更してください。
<!-- 左画像 --><!-- 右画像 -->をさらに追加すると、2行2列で配置できます。


<div class="free_banner_box clearfix">

<!-- 左画像 -->
<div class="free_banner_left">
<div class="free_banner_inner">
<a href="http://cafe0101.ocnk.net/product-list/1"><img src="http://www.ocnk.net/ocnk_ma/img/no221/banner001.jpg" art="代替テキスト" /></a>
</div>
</div>
<!-- 左画像 -->

<!-- 右画像 -->
<div class="free_banner_right">
<div class="free_banner_inner">
<a href="http://cafe0101.ocnk.net/product-list/2"><img src="http://www.ocnk.net/ocnk_ma/img/no221/banner002.jpg" art="代替テキスト" /></a>
</div>
</div>
<!-- 右画像 -->

</div>

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

デザイン管理→スタイルシートの編集から指定を追加してください。
横幅は、50%で指定しています。


.free_banner_left,
.free_banner_right {
float: left;
width: 50%;
}

.free_banner_inner {
margin: 5px;
}

.free_banner_inner img {
border-radius: 10px;
}

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

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

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