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

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

皆さん、こんにちは。おちゃのこネットの刑部です。
今回は、メインエリアの各タイトル部分背景の変更方法をご紹介します。
かなり内容が長くなりますが、最後までご覧ください。

	http://cafe0101.ocnk.net/

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

メインエリアの指定には、現在のテンプレートで基本的に2パターンのデザインがあります。
(1)カラム設定によって背景を変更していないパターン
(2)カラム設定によって背景を変更しているパターン

(1)パターンに該当するテンプレート
スタンダード、フラワー以外のテンプレート

(2)パターンに該当するテンプレート
スタンダード、フラワー

となります。
デモ用ショップに利用するのは、(1）パターンのホワイトラインとなります。

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

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

(1)パターンの場合
必要な指定は、下記となります。基本的には、初期の指定を上書きする形となります。

/* まとめて指定する場合に利用 */
.main_box 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;
}

.main_box h2

初期では、これで指定してあります。
メインエリアの全てのタイトルを同様に変更する場合は、この指定をご利用ください。

.welcome .section_title h2　～
.item_group .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%;

高解像度画像について
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;
}
/*-----------------------------------------------------------*/
}

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

元画像について
例えば、下記の画像を確認したい場合
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

(2)パターンの場合
必要な指定は、下記となります。基本的には、初期の指定を上書きする形となります。

指定について
全タイトルの指定を記載すると、長くなりすぎるため、他のタイトル指定については、.whatnewのclass名を上記パターン(1)のclass名に変更して他のタイトルは指定を行ってください。

例）店長日記の場合
.diary h2
#maincol1 .diary h2等

/* What's Newタイトル */
.whatnew h2 {
background-repeat: no-repeat;
background-position: left top;
color: #FFFFFF;
}

/* 1カラム　What's Newタイトル */
#maincol1 .whatnew h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
}

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

/* 2カラム　What's Newタイトル */
#maincol2 .whatnew h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
}

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

/* 3カラム　What's Newタイトル */
#maincol3 .whatnew h2 {
background-image: url(image/xxx.gif);
background-color: #000000;
border: 1px solid #000000;
}

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

.whatnew h2	.whatnew共通の指定となります。カラムに関係なく指定できる項目はこの部分に指定してください。背景画像のリピート、背景画像の位置、文字色等はここで指定してください。
#maincol1 .whatnew h2 #maincol2 .whatnew h2 #maincol3 .whatnew h2	各カラム用の指定となります。ご自身がどのカラム設定をご利用かで指定が異なります。 #maincol1・・・・1カラム #maincol2・・・・2カラム #maincol3・・・・3カラム
background-image: url(image/xxx.jpg); background-color: #000000; border: 1px solid #000000; color: #FFFFFF;	・background-image 背景画像を指定できます。については、ご自身で必要であれば追加してください。・background-color 背景色を指定できます。背景画像ではなく背景色で指定する場合は、background-colorを利用してください。・border 罫線を指定できます。
ポイント	・背景色についてグラデーション画像を指定した場合、メニューの縦幅が大きくなると、背景画像よりメニューの縦幅が大きくなる場合があります。その場合に、上部または下部の画像が表示されない箇所を背景色で表示します。グラデーションの方向によって、背景色を指定してください。また、グラデーションでない背景画像を利用する場合も、画像の表示までの間は背景色が表示されますので、必ず背景画像に近い色を指定してください。

画像表示にされたい方
上記では、タイトル部分の背景画像や背景色を変更する方法をご紹介しましたが、タイトルのテキストは非表示に画像のみで表示されたい方用に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