サイドエリアのメインカテゴリメニューに個別に画像を入れる [HTML5テンプレート用]

2014-12-09 14:23
サイドエリアのメインカテゴリメニューに個別の画像を挿入できます。
表示サンプル: https://cafe0101.ocnk.net/
STEP1 画像を作成する

画像編集ソフトにて画像を作成してください。
サンプルサイトの画像は、横幅45px、縦幅40pxで作成しています。
https://cafe0101.ocnk.net/data/cafe0101/pc/image/caicon01.png

※画像ファイルは、画像専用管理画面→コンテンツフォルダにアップロードしてください。

STEP2 スタイルシートを編集する
デザイン管理→スタイルシートの編集から指定を追加します。
.category_list li A.parentcategory_link {
background-repeat: no-repeat;
background-position: 5px 10px;
height: 55px;
padding-left: 55px;
line-height: 55px;
}

.category_list li A.categorylink1 {
background-image: url(image/caicon01.png);
background-size: 45px 40px;
}

/* 高解像度ディスプレイ対応 */
/*-----------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/*-----------------------------------------------------------*/
.category_list li A.categorylink1 {
background-image: url(image/caicon01_x2.png);
background-size: 45px 40px;
}
/*-----------------------------------------------------------*/
}

.category_list li A.categorylink2 {
background-image: url(image/caicon02.png);
background-size: 45px 40px;
}

/* 高解像度ディスプレイ対応 */
/*-----------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/*-----------------------------------------------------------*/
.category_list li A.categorylink2 {
background-image: url(image/caicon02_x2.png);
background-size: 45px 40px;
}
/*-----------------------------------------------------------*/
}

.category_list li A.categorylink3 {
background-image: url(image/caicon03.png);
background-size: 45px 40px;
}

/* 高解像度ディスプレイ対応 */
/*-----------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/*-----------------------------------------------------------*/
.category_list li A.categorylink3 {
background-image: url(image/caicon03_x2.png);
background-size: 45px 40px;
}
/*-----------------------------------------------------------*/
}
class名の指定方法について

各メインカテゴリのaタグには、共通のclass名と個別のclass名が指定されています。
・共通class名
.parentcategory_link
・個別class名
.categorylink1~.categorylink3が個別のclass名となります。
class名は、カテゴリIDと連動しているため管理画面でも確認可能ですが、表画面のURLで確認することもできます。
例えば、下記のメインカテゴリページの場合、メニューのclass名は、.categorylink1となります。
ページURLの数字を.categorylinkの後ろに付けてください。
https://cafe0101.ocnk.net/product-list/1

スタイルシート指定について
・共通指定
.category_list li A.parentcategory_link
共通で指定可能な指定は、ここに記載します。
.category_list li A.parentcategory_link {
background-repeat: no-repeat;
background-position: 5px 5px;
height: 45px;
padding-left: 55px;
line-height: 45px;
}
スタイルシート指定
background-repeat background-repeat: no-repeat;
背景画像の繰り返し指定は、no-repeatで繰り返ししないを指定。
background-position background-position: 5px 5px;
左の数値が左からの位置、右の数値が上からの位置
height height: 45px;
メニューの縦幅を指定。
画像の縦幅と同様の値を指定。
※表示状態によっては、数値を調整してください。
padding-left padding-left: 55px;
左からの余白を指定。
画像の横幅+5~10pxで指定。
※この余白部分に画像が表示されます。
line-height line-height: 45px;
heightで指定した縦幅と同様の値を指定。
※画像右に表示されるテキストをメニューの縦方向中央揃えにするための指定となります。


・個別指定
.category_list li A.categorylink1~.category_list li A.categorylink2
個別に背景画像を指定します。

.category_list li A.categorylink1 {
background-image: url(image/caicon01.png);
background-size: 45px 40px;
}

/* 高解像度ディスプレイ対応 */
/*-----------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/*-----------------------------------------------------------*/
.category_list li A.categorylink1 {
background-image: url(image/caicon01_x2.png);
background-size: 45px 40px;
}
/*-----------------------------------------------------------*/
}

.category_list li A.categorylink2 {
background-image: url(image/caicon02.png);
background-size: 45px 40px;
}

/* 高解像度ディスプレイ対応 */
/*-----------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/*-----------------------------------------------------------*/
.category_list li A.categorylink2 {
background-image: url(image/caicon02_x2.png);
background-size: 45px 40px;
}
/*-----------------------------------------------------------*/
}

.category_list li A.categorylink3 {
background-image: url(image/caicon03.png);
background-size: 45px 40px;
}

/* 高解像度ディスプレイ対応 */
/*-----------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/*-----------------------------------------------------------*/
.category_list li A.categorylink3 {
background-image: url(image/caicon03_x2.png);
background-size: 45px 40px;
}
/*-----------------------------------------------------------*/
}
スタイルシート指定
background-image background-image: url(image/caicon01.png);
画像専用管理画面にアップロードした画像を指定。
background-size background-size: 45px 40px;
画像の横幅、縦幅の順で指定してください。
/* 高解像度ディスプレイ対応 */ HTML5テンプレートでは、高解像度ディスプレイ用に通常の背景画像に加えて2倍サイズの画像が指定してあります。
※必要ない場合は、指定の必要はありません。

・高解像度ディスプレイ用の画像を指定する
通常サイズの画像の縦横とも2倍のサイズの画像を
高解像度ディスプレイ対応内のbackground-imageに指定し
background-sizeには、通常サイズの画像サイズを指定。

画像を利用する場合
画像専用管理画面→コンテンツフォルダに画像ファイルをアップロードしてください。
背景画像を利用する場合でも、背景色は、初期表示の際に画像を読み込むまでの間に表示されますので、指定してください。

画像URLを記載いただく際には、必ずimage/~の相対パスにて記載してください。
http://~の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。
記載例)
background-image: url(image/file.gif);