このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
今回は、第二階層以降のページで表示されるパンくずリストの「ホーム」左横にアイコン画像を表示させる方法をご紹介します。細かい箇所ですが、サイトの印象は良くなりますよ。
アイコンに使用する画像を作成します。
基本的にはサイズは自由ですが、アイコンですのであまり大きくならないようにご注意下さい。
画像サイズは下記のように作成して下さい。
横幅 |
25ピクセル (※推奨)
※サンプル：25ピクセル |
縦幅 |
20ピクセル (※推奨)
※サンプル：20ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
作成した画像をアップロードします。
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
|
商品画像と区別するためにも、コンテンツフォルダにアップロードして下さい。整理にも役立ちます！
|
スタイルシートの編集を利用して、タイトルを変更します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
※既存のスタイルシート内にも既に記載がありますので、そちらを編集していただいても結構です。
/* 第二階層パンクズ */
#pan {
width: auto;
padding: 5px 10px 10px 25px;
margin-left: 10px;
background-image: url(image/home_icon.gif);
background-repeat: no-repeat;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
width
について |
width: auto;
パンくずリストの横幅となります。基本的に編集いただく必要はありません。
|
padding
について |
padding: 5px 10px 10px 25px;
パンくずリスト内の上下左右の余白となります。25px部分が左から「ホーム」までの位置となりますので、アイコン画像の横幅＋5pxくらいで指定下さい。※値は左から、上 右 下 左
|
margin-left
について |
margin-left: 10px;
パンくずリスト外の左の余白となります。基本的に編集いただく必要はありません。
|
background-image
について |
background-image: url(image/home_icon.gif);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/home_icon.gif);
|
background-repeat
について |
background-repeat: no-repeat;
背景画像の繰り返し指定となります。基本的に、編集いただく必要はありません。
|
|
パンくずリストは、サイトのホームや他のページに遷移する際に非常に便利です。#pan内をカスタマイズすることで背景色や文字の色も変更することができますので、是非お試し下さい。
|
前号へ
