サイドエリアのメインカテゴリメニューに個別に画像を入れる [HTML5テンプレート用]
サイドエリアのメインカテゴリメニューに個別の画像を挿入できます。
背景画像を利用する場合でも、背景色は、初期表示の際に画像を読み込むまでの間に表示されますので、指定してください。
画像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/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;
}
/*-----------------------------------------------------------*/
}
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
共通で指定可能な指定は、ここに記載します。
.category_list li A.parentcategory_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で指定した縦幅と同様の値を指定。 ※画像右に表示されるテキストをメニューの縦方向中央揃えにするための指定となります。 |
・個別指定
.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: 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倍サイズの画像が指定してあります。 ※必要ない場合は、指定の必要はありません。 ・高解像度ディスプレイ用の画像を指定する |
画像を利用する場合
画像専用管理画面→コンテンツフォルダに画像ファイルをアップロードしてください。背景画像を利用する場合でも、背景色は、初期表示の際に画像を読み込むまでの間に表示されますので、指定してください。
画像URLを記載いただく際には、必ずimage/~の相対パスにて記載してください。
http://~の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。
記載例)
background-image: url(image/file.gif);