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

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

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、先日アップした拡大画像表示枠の色を変更する方法をご紹介します。

	http://cafe0808.ocnk.net/

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

管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。

スタイルシートの編集画面に下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

#fancybox-outer,
.fancybox-title-inside {
background-color : #000000;
}

#fancybox-content {
border-color : #000000;
}

#fancybox-left-ico {
background-image: url(img/all/fancy_nav_leftw.png);
}

#fancybox-right-ico {
background-image: url(img/all/fancy_nav_rightw.png);
}

#fancybox-close {
background-image: url(img/all/fancy_closew.png);
}

#fancybox-wrap A {
color: #FFFFFF;
}

#fancybox-wrap A:hover {
color: #CCCCCC;
}

#fancybox-outer, .fancybox-title-inside	background-color: #000000; 背景色の指定となります。ここでは黒色ですので、#000000を指定しています。別の色を指定する場合は、カラーコードを変更してください。
#fancybox-content	border-color: #000000; 枠線の指定となります。ここでは黒色ですので、#000000を指定しています。 ※枠線ですが、この部分がメインの背景色となりますので、必ず指定を行ってください。別の色を指定する場合は、カラーコードを変更してください。
アイコン左矢印 #fancybox-left-ico	background-image: url(img/all/fancy_nav_leftw.png); 複数画像がある場合の左矢印の指定となります。 img/all/fancy_nav_leftw.png を指定いただくことで、白の矢印に変更することが可能です。 ※別途ご自身で作成された画像を画像専用管理画面にアップロードしていただき、通常の背景画像指定のようにimage/file.gifのようにimage/～のURLで指定することも可能です。
アイコン右矢印 #fancybox-right-ico	background-image: url(img/all/fancy_nav_rightw.png); 複数画像がある場合の右矢印の指定となります。 img/all/fancy_nav_rightw.png を指定いただくことで、白の矢印に変更することが可能です。 ※別途ご自身で作成された画像を画像専用管理画面にアップロードしていただき、通常の背景画像指定のようにimage/file.gifのようにimage/～のURLで指定することも可能です。
アイコン閉じる #fancybox-close	background-image: url(img/all/fancy_closew.png); 右上の閉じるボタンの指定となります。 img/all/fancy_closew.png を指定いただくことで、白の×ボタンに変更することが可能です。 ※黒色の背景にしても黒のボタンをご利用の場合は、この指定は削除してください。 ※別途ご自身で作成された画像を画像専用管理画面にアップロードしていただき、通常の背景画像指定のようにimage/file.gifのようにimage/～のURLで指定することも可能です。
#fancybox-wrap A	color: #FFFFFF; 下部の閉じるボタンの文字色の指定となります。ここでは、背景色を黒色にしていますので、文字色は#FFFFFF;で白色を指定しています。別の色を指定する場合は、カラーコードを変更してください。
#fancybox-wrap A:hover	color: #CCCCCC; 下部の閉じるボタンのマウスオーバー時の文字色の指定となります。ここでは、通常の文字色よりも少し色の暗い#CCCCCC;を指定しています。別の色を指定する場合は、カラーコードを変更してください。

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

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