サイドエリアのグループ(特集)メニューに個別に画像を入れる [HTML5テンプレート用]

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

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

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

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

.pickupcategory_list li.pickupcategory1 A {
background-image: url(image/caicon04.png);
background-size: 45px 40px;
}

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

.pickupcategory_list li.pickupcategory2 A {
background-image: url(image/caicon05.png);
background-size: 45px 40px;
}

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

グループ特集メニューの各aタグには、共通のclass名が指定されています。
・共通class名
.item_list_link

グループ特集メニューの各liタグには、個別のclass名が指定されています。
・個別class名
.pickupcategory1~.pickupcategory2が個別のclass名となります。
class名は、グループIDと連動しているため管理画面でも確認可能ですが、表画面のURLで確認することもできます。
例えば、下記のグループページの場合、メニューのclass名は、.pickupcategory1となります。
ページURLの数字を.pickupcategoryの後ろに付けてください。
https://cafe0101.ocnk.net/product-group/1
スタイルシート指定について
・共通指定
.pickupcategory_list li A.item_list_link
共通で指定可能な指定は、ここに記載します。
.pickupcategory_list li A.item_list_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で指定した縦幅と同様の値を指定。
※画像右に表示されるテキストをメニューの縦方向中央揃えにするための指定となります。


・個別指定
.pickupcategory_list li.pickupcategory1 A~.pickupcategory_list li.pickupcategory2 A
個別に背景画像を指定します。

.pickupcategory_list li.pickupcategory1 A {
background-image: url(image/caicon04.png);
background-size: 45px 40px;
}

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

.pickupcategory_list li.pickupcategory2 A {
background-image: url(image/caicon05.png);
background-size: 45px 40px;
}

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

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

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

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