おちゃのこ通信 Vol.205 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。
今回は、サイドエリアの各タイトル部分背景の変更方法をご紹介します。

※前回のメインエリアの各タイトル画像の背景を変更するで、一部誤りがございました。
テンプレート名：誤）ベーシック→正）スタンダード

申し訳ございませんでした。

	http://cafe0101.ocnk.net/

スタイルシートを編集する

スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。

※貼り付け位置は、最下部にお願い致します。

/* まとめて指定する場合に利用 */
.side_box h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* カテゴリ一覧 */
.category .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* 特集 */
.pickupcategory .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* いらっしゃいませ */
.welcome .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* 店長日記 */
.diary .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* 新商品 */
.newitem .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* おすすめ商品 */
.recommend .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* 人気ランキング商品 */
.ranking .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* カテゴリ商品 */
.item_category .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* グループ商品 */
.item_group .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* 私が店長です */
.staff .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* ログイン */
.side_signin .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

/* ショッピングカート */
.shoppingcart .section_title h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
color: #FFFFFF;
}

.side_box h2	初期では、これで指定してあります。サイドエリアの全てのタイトルを同様に指定する場合は、この指定をご利用ください。 ※ただし、背景画像や背景色を各箇所で個別にしている場合は、この指定では変更できません。その場合は、下記の個別のclass名指定をご利用ください。
.category .section_title h2　～ .shoppingcart .section_title h2 {	各タイトル個別に指定する場合は、カテゴリ一覧からショッピングカートのそれぞれの指定をご利用ください。
background-image: url(image/xxx.jpg); background-color: #000000; border: 1px solid #000000; color: #FFFFFF;	・background-image 背景画像を指定できます。リピート表示(background-repeat: repeat-y;等) 表示位置(background-position: left bottom;等) については、ご自身で必要であれば追加してください。・background-color 背景色を指定できます。背景画像ではなく背景色で指定する場合は、background-colorを利用してください。・border 罫線を指定できます。・color 文字色を指定できます。背景画像や背景色にあわせて変更してください。 font-sizeにて文字サイズを指定することも可能です。例）font-size: 116%;

元画像について
例えば、下記の画像を確認したい場合
background-image: url(img/navi_line_bg.gif);

元画像のURLは下記のURLルールで確認できますので、
http://共用ドメイン(独自ドメイン)URL/data/アカウント名/pc/img/ファイル名

URLは、下記となります。
http://cafe0101.ocnk.net/data/cafe0101/pc/img/navi_line_bg.gif

高解像度画像について
HTML5テンプレートでは、「/* 高解像度ディスプレイ対応 */」このコメントが入ってる箇所では、高解像度ディスプレイ用に通常の背景画像に加えて2倍サイズの画像が指定してあります。

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

/* 高解像度ディスプレイ対応 */
/*-----------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/*-----------------------------------------------------------*/
.welcome .section_title h2 {
background-image: url(image/xxx_x2.gif);
background-size: 790px 50px;
}
/*-----------------------------------------------------------*/
}

・高解像度ディスプレイ用の画像を指定しない
指定しない場合は、高解像度ディスプレイで閲覧した場合、画像がぼやけて表示される可能性があります。
また、初期状態で背景画像が指定してあり、その背景画像を削除し背景色に変更した場合、高解像度指定があるかご確認ください。
指定がある場合は、必ず高解像度ディスプレイ対応用の指定を全て削除してください。

画像表示にされたい方
上記では、タイトル部分の背景画像や背景色を変更する方法をご紹介しましたが、タイトルのテキストは非表示に画像のみで表示されたい方用にHTML5テンプレートでは、テキストの非表示機能がございます。

設定は、デザイン管理→タイトル周り設定の「表示設定」をクリックしてください。
タイトル欄が表示されますので、非表示にされる場合は、「非表示」を選択してください。
※初期では閉じてあります。

非表示に設定すると、タイトル部分が非表示となります。
表示上は、非表示ですが、htmlタグでは、新たに<div class="image_title"></div>が挿入されます。
スタイルシートの編集からこの.image_titleに対して下記のように背景画像を指定してください。

※例）ランキングの場合
上記でご紹介している背景画像や背景色のルールで、h2の部分を.image_titleに変更してご利用ください。

heightは必ず必要ですので、指定された画像の縦幅を記載してください。例）40px等

高解像度用の画像を指定される場合は、同様に2倍の画像を指定してください。
※必要ない場合は、/* 高解像度ディスプレイ対応 */から下は削除ください。

/* 人気ランキング商品 */
.ranking .section_title .image_title {
height: ●●px;
background-image: url(image/xxx.gif);
}

/* 高解像度ディスプレイ対応 */
/*-----------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/*-----------------------------------------------------------*/
.ranking .section_title .image_title {
height: ●●px;
background-image: url(image/xxx.gif);
background-size: ●●px ●●px;
}
/*-----------------------------------------------------------*/
}

なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php