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

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

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、ログインのメールアドレス、パスワードを非表示にし、ログインページを利用した場合の左エリアメニューのアイコンを変更する方法です。

画像を作成する

アイコンに使用する画像を作成します。
画像サイズは下記のように作成して下さい。

横幅	15ピクセル(※サンプル15ピクセル)
縦幅	15ピクセル(※サンプル15ピクセル)

画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。

サンプル画像

画像ファイルをアップロードする

作成した画像をアップロードします。

管理画面→デザイン管理→画像専用管理画面をクリックして下さい。

コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。

赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。

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

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

下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。

#mlogin {
background-image: url(image/login_icon.gif);
}

編集後、「登録処理を完了する」ボタンをクリックして下さい。

background-image
について

background-image: url(image/login_icon.gif);
背景画像を変更します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。

画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。

記載例）
background-image: url(image/login_icon.gif);

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