サイドエリアのグループ(特集)メニューに個別に画像を入れる [HTML5テンプレート用]
サイドエリアグループ(特集)メニューに個別の画像を挿入できます。
・個別class名
.pickupcategory1~.pickupcategory2が個別のclass名となります。
class名は、グループIDと連動しているため管理画面でも確認可能ですが、表画面のURLで確認することもできます。
例えば、下記のグループページの場合、メニューのclass名は、.pickupcategory1となります。
ページURLの数字を.pickupcategoryの後ろに付けてください。
https://cafe0101.ocnk.net/product-group/1
背景画像を利用する場合でも、背景色は、初期表示の際に画像を読み込むまでの間に表示されますので、指定してください。
画像URLを記載いただく際には、必ずimage/~の相対パスにて記載してください。
http://~の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。
記載例)
background-image: url(image/file.gif);
表示サンプル: 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;
}
/*-----------------------------------------------------------*/
}
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
・個別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
共通で指定可能な指定は、ここに記載します。
.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: 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: 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倍サイズの画像が指定してあります。 ※必要ない場合は、指定の必要はありません。 ・高解像度ディスプレイ用の画像を指定する |
画像を利用する場合
画像専用管理画面→コンテンツフォルダに画像ファイルをアップロードしてください。背景画像を利用する場合でも、背景色は、初期表示の際に画像を読み込むまでの間に表示されますので、指定してください。
画像URLを記載いただく際には、必ずimage/~の相対パスにて記載してください。
http://~の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。
記載例)
background-image: url(image/file.gif);