このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、ご利用案内とお問い合わせのアイコンを変更する方法をご紹介します。
デフォルトでは、各テンプレート用の画像が表示されますが、オリジナルの画像に変更することができます。
画像サイズは下記のように作成して下さい。
横幅 |
最大15ピクセル
※画像サンプル：15ピクセル |
縦幅 |
最大15ピクセル
※画像サンプル：15ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
スタイルシートを編集します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の箇所を編集して下さい。
※アイコン画像を横幅：15×縦幅：15ピクセルで作成いただいている場合、background-image部分以外は基本的には、変更いただく必要はありません。
.subicon01 {
height: ****;
background-image: url(image/icon_help.gif);
background-repeat: ****;
background-position: ****;
padding-left: ****;
}
.subicon02 {
height: ***;
background-image: url(image/icon_inquiry.gif);
background-repeat: ****;
background-position: ****;
padding-left: ****;
padding-right: ****;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
background-image
について |
background-image: url(image/icon_help.gif);
background-image: url(image/icon_inquiry.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/icon_help.gif);
|
他の指定
について |
基本的には、画像サイズを縦幅：15×横幅：15ピクセルで作成いただいた場合、他の箇所は変更いただく必要はありません。
背景画像の指定background-imageの箇所のみを変更下さい。
|
|
大部分のテンプレートでは、矢印のアイコンとなっていますので、簡単なマーク等に変更いただいても面白いかと思います。
|
前号へ
