おちゃのこ通信 Vol.234 - デザイン道場 - おちゃのこネットメールマガジン

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

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、HTML5テンプレートにタブメニューを追加する方法をご紹介します。
HTMLタグを貼り付けてテキストを変更するだけで、簡単に作成できます。

	http://cafe0101.ocnk.net/

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

デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けてください。
※貼り付け位置は、最下部にお願い致します。

●背景色の指定について
それぞれ下記の指定で背景色と文字色を指定できます。

・通常状態の背景色と文字色
.item_tabs li A
背景色： background-color: #E5E5E5;
文字色： color: #999999;

・マウスオーバー状態の背景色と文字色
.item_tabs li A:hover
背景色： background-color: #F5F5F5;
文字色： color: #000000;

・選択状態の背景色と文字色
.item_tabs li.tab_on A
背景色： background-color: #F5F5F5;
文字色： color: #000000;

・コンテンツ部分の背景色
.tab_content
背景色： background-color: #F5F5F5;

.item_tabs ul {
margin: 0px;
padding: 0px;
}

.item_tabs li {
float: left;
list-style-type: none;
}

.item_tabs li A {
display: block;
padding: 10px;
margin-right: 1px;
background-color: #E5E5E5;
color: #999999;
}

.item_tabs li A:hover {
background-color: #F5F5F5;
color: #000000;
}

.item_tabs li.tab_on A {
background-color: #F5F5F5;
color: #000000;
}

.tab_content {
padding: 10px;
background-color: #F5F5F5;
min-height: 100px;
}

自由記入欄にhtmlタグを記載する

デザイン管理→配置/画像/コメント設定のメインエリアから自由記入欄を追加してください。
表示は、メインエリアにしてください。

下記それぞれのhtmlタグをコピーして自由記入欄に貼り付けてください。
テキストは、自由に変更可能です。
HTMLタグの挿入も可能です。

タブ1からタブ4までがメニュー部分のタイトルとなります。
タブ1の内容からタブ4の内容が内容部分となります。
行を追加することで、メニューと内容は追加可能です。

※divタグのidについて
追加いただく際は、必ず id="tab_box_1"のようにdivタグにidを連番で追加してください。
下記に5つ目を追加する場合は、メニュー、内容部分はそれぞれ下記のようになります。
・メニュー
<li><a href="#tab_box_5">タブ5</a></li>

・内容
<div id="tab_box_5" class="tab_box">タブ5の内容</div>

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

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