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

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

前号のデザイン道場について
前号で、文字サイズについての記載をさせていただきましたが、bodyタグには100%ではなく13pxが適用されております。
サイト全体の文字サイズを大きくされたい場合は、bodyに15px等を指定してください。
申し訳ございませんでした。
http://www.ocnk.net/ocnk_ma/ocnkmagazine_asm202.html#de

皆さん、こんにちは。おちゃのこネットの刑部です。
前号でもお知らせさせていただきましたが、今号よりHTML5テンプレートのカスタマイズ方法をご紹介していきたいと思います。

XHTMLテンプレートのカスタマイズについては、これまで140以上のカスタマイズ方法をご紹介してきましたので、今後はHTML5テンプレートを中心にご紹介していきます。
XHTMLテンプレートのまとめページについては、下記をご覧ください。
http://www.ocnk.net/ocnk_ma/design01-50.html

HTML5テンプレートの最初のカスタマイズは、HTML5テンプレートから新たに追加されたヘッダーメニューの背景を変更する方法をご紹介します。
これまでは、cafe0808.ocnk.netをデモ用サイトとして利用しておりましたが、今後は、cafe0101.ocnk.netを利用していきます。
ベースのテンプレートは、ホワイトラインを利用します。

	http://cafe0101.ocnk.net/

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

ヘッダーメニューには、現在のテンプレートで基本的に2パターンのデザインがあります。
(1)背景色を利用し、マウスオーバー時に下部罫線に色を入れるパターン
(2)背景画像を利用し、マウスオーバー時に画像を切り替えるパターン

(1)パターンに該当するテンプレート
ホワイトライン、ブラックライン、アーバンホワイト、ワノココロ、アーバンブラック、フレッシュ
ブリリアント、アーキテクチャー、レトロフューチャー、オールドデイズ、フェミニン、アウトドア

(2)パターンに該当するテンプレート
スタンダード、クラフトペーパー、ポップ、ブレッド、フラワー、スカンジナビアン、ガーデニング
リラックス

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

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

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

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

#globalnavi {
background-color: #FFFFFFF;
}

#globalnavi li A {
background-image: url(img/navi_line_bg.gif);
background-repeat: no-repeat;
background-position: right center;
border-bottom: 3px solid #F5F5F5;
}

#globalnavi li A:hover,
#globalnavi li.hover > div > .nav_link,
#globalnavi li.toggle_drill_down.hover .toggle_link {
border-bottom: 3px solid #FF0000;
}

#globalnavi	メインメニュー全体の指定です。 background-colorが指定されていますので、そのカラーコード(上記の#FFFFFF部分)を変更してください。背景色だけでなく、背景画像を指定することも可能です。 background-imageにて指定可能です。
#globalnavi li A	各メニューの指定です。・background-image 背景画像は、区切り線に利用しています。 ※背景色を大幅に変更した場合(白→黒)は、区切り線画像の色も変更の必要があります。・border-bottom 上記#globalnaviで指定した背景色と同色を指定してください。 ※背景画像を指定した場合は、背景画像に近い色または、#F5F5F5のカラーコード部分にをtransparentを指定してください。例） border-bottom: 3px solid transparent;
#globalnavi li A:hover, #globalnavi li.hover > div > .nav_link, #globalnavi li.toggle_drill_down.hover .toggle_link	各メニューのマウスオーバー用指定です。・border-bottom マウスオーバー時に、メニュー下部に罫線を表示させる指定です。元の色は、#globalnavi li Aで指定した色となりますので、その色から色変更することで、罫線を表示させています。カラーコードを変更してください。

元画像について
例えば、1番のスタンダード利用時に下記の画像を確認したい場合
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)パターンの場合
必要な指定は、下記となります。基本的には、初期の指定を上書きする形となります。

#globalnavi {
width: 100%;
background-color: #FFFFFF;
background-image: url(img/navi_bg.gif);
background-repeat: repeat-x;
background-position: left bottom;
border-top: 1px solid #E0DFE3;
}

#globalnavi li:hover,
#globalnavi li.hover > div > .nav_link,
#globalnavi li.hover .toggle_link,
#globalnavi li.h_home:hover {
background-image: url(img/navi_bg_o.gif);
background-color: #FFFFFF;
background-repeat: repeat-x;
background-position: left top;
}

#globalnavi	メインメニュー全体の指定です。背景画像が指定されています。この背景画像を作成された画像に変更してください。
#globalnavi li:hover, #globalnavi li.hover > div > .nav_link, #globalnavi li.hover .toggle_link, #globalnavi li.h_home:hover	各メニューのマウスオーバー用指定です。・background-image 背景画像が指定されています。この背景画像を作成された画像に変更してください。
ポイント	・背景色についてグラデーション画像を指定した場合、メニューの縦幅が大きくなると、背景画像よりメニューの縦幅が大きくなる場合があります。その場合に、上部または下部の画像が表示されない箇所を背景色で表示します。グラデーションの方向によって、背景色を指定してください。また、グラデーションでない背景画像を利用する場合も、画像の表示までの間は背景色が表示されますので、必ず背景画像に近い色を指定してください。

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

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