このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
今回は、カテゴリ一覧を画像で作成するというカスタマイズのご紹介です。
※通常のカテゴリ一覧のようにクリックしてサブカテゴリが表示する機能は、ご利用いただけません。
カテゴリに使用する画像を作成します。
各テンプレート左エリアは、横幅160ピクセルです。画像サイズは下記のように作成して下さい。
※サンプルページのようにメインカテゴリをタイトル、サブカテゴリを各カテゴリ画像としてご利用になられる場合は、タイトル画像も作成下さい。
横幅 |
160ピクセル ※一部のテンプレートで、150～155ピクセル |
縦幅 |
基本的には、自由です。
※サンプルでは、タイトル：30ピクセル、カテゴリ画像：50ピクセルで作成 |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプルタイトル画像 (※メインカテゴリ用)
サンプル各カテゴリ画像 (※サブカテゴリ用)
|
カテゴリ画像を作成される際には、ボタンということが分かるように矢印を入れるのもポイントです。
|
作成した画像をアップロードします。
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
|
商品画像と区別するためにも、コンテンツフォルダにアップロードして下さい。整理にも役立ちます！
|
自由記入欄を利用してHTMLタグを記載します。
管理画面→デザイン管理→画像とコメントの設定をクリックして下さい。
最下部部分の自由記入欄に下記のようなHTMLタグを記載して下さい。
<!-- 画像カテゴリ -->
<div class="side_box">
<!-- タイトル ※メインカテゴリ、必要のない場合は削除 -->
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/mcategory_title.gif" border="0" width="160" height="30" alt="Interior
Category" style="margin-bottom: 5px;" /><br />
<!-- 各カテゴリ画像※サブカテゴリ -->
<a href="http://cafe0808.ocnk.net/product-list/6"><img src="https://cafe0808.ocnk.net/data/cafe0808/image/category_01.gif" border="0" width"160" height="50" alt="Chair" style="margin-bottom:
5px;" /></a><br />
<a href="http://cafe0808.ocnk.net/product-list/7"><img src="https://cafe0808.ocnk.net/data/cafe0808/image/category_02.gif" border="0" width="160" height="50" alt="Sofa" style="margin-bottom: 5px;" /></a><br />
<a href="http://cafe0808.ocnk.net/product-list/1"><img src="https://cafe0808.ocnk.net/data/cafe0808/image/category_03.gif" border="0" width="160" height="50" alt="Table" /></a>
</div>
<!-- 画像カテゴリ -->
リンク先URL |
<a href="http://cafe0808.ocnk.net/product-list/6">
各カテゴリページへのリンク先URLを記載して下さい。
※上記例では、cafe0808というテストアカウントIDとなっていますので、ご利用の際には、ご自身のアカウントIDに
変更して下さい。
|
画像URL |
<img src="https://cafe0808.ocnk.net/data/cafe0808/image/category_01.gif" border="0" width"160" height="50" alt="Chair" style="margin-bottom:
5px;" />
画像専用管理画面にアップロードした画像URLを記載して下さい。
※上記例では、cafe0808というテストアカウントIDとなっていますので、ご利用の際には、ご自身のアカウントIDに 変更して下さい。
画像ファイルの名称もご自身で設定いただいた名称に変更して下さい。
左エリアに画像設定される場合は、必ずhttpの後ろに「s」を付け共用ドメインのURLで記載して下さい。
「s」がない場合、SSL保護下(カート内、お問い合わせ、新規登録)のページでセキュリティ警告が表示されます。
記載例）
<img src="https://demo.ocnk.net/data/demo/image/demo.gif" border="0"
width="160" /> |
imgタグ内
属性 |
width：画像の横幅・・・例：160
height：画像の縦幅・・・例：50
alt：代替テキスト・・・例：chair
border：画像枠線・・・0に設定しない場合紫色の枠線が表示されます。 |
|
各画像間に空白を入れたい場合は、下記のようにimgタグ内にスタイルシートにて、margin-bottomを指定して下さい。
<img src="画像URL" border="0" width="160" height="50" alt="Chair" style="margin-bottom:
5px;" />
|
作成した自由記入欄の表示位置を設定します。
管理画面→デザイン管理→表示とレイアウトの設定をクリックして下さい。
表示位置で「左エリア」、並び順で「1」を選択して下さい。
「デザイン管理」→「表示とレイアウトの設定」ページからカテゴリ一覧を非表示に設定して下さい。
ページ最下部の
「設定処理を完了する」ボタンをクリックして下さい。
