このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、自由記入欄に挿入した画像に半透明のレイヤーを重ねてテキストを表示する方法をご紹介致します。
画像サイズは下記のように作成して下さい。
横幅 |
基本的には、作成サイズは自由です。
※画像サンプル：500ピクセル |
縦幅 |
基本的には、作成サイズは自由です。
※画像サンプル：300ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
自由記入欄を利用してhtmlタグを記載します。
管理画面→デザイン管理→画像とコメントの設定をクリックして下さい。
自由記入欄に下記の指定をコピーして貼り付けて下さい。
※表示位置は、表示とレイアウトの設定から中央エリアに設定して下さい。
<div class="center_box">
<div class="bg_area">
<div class="alpha_area">
<div class="contents_area">
<a href="http://cafe0808.ocnk.net/product/1">Cafe Chair</a><br />
35,000円<br />
レトロな木製のダイニングチェアです。アームの微妙な曲線がとても美しいデザインです。
</div>
</div>
</div>
</div>
bg_areaについて |
背景画像を指定する部分となります。 |
alpha_areaについて |
背景画像に重ねる半透明レイヤー部分となります。 |
contents_areaについて |
コンテンツ部分となります。
|
スタイルシートを編集します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーしてスタイルシート内に貼り付けて下さい。※貼り付け位置は、最下部にお願い致します。
.bg_area {
width: 500px;
height: 300px;
background-image: url(image/bg_photo.jpg);
}
.alpha_area {
width: 250px;
height: 300px;
background-color: #000000;
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
.contents_area {
padding: 100px 20px 0px;
margin: 0px;
color: #FFFFFF;
}
.contents_area A {
color: #FFFFFF;
font-size: 19px;
font-weight: bold;
text-decoration: none;
}
編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。
.bg_area
について |
width: 500px;
height: 300px;
background-image: url(image/bg_photo.jpg);
背景画像を指定します。
widthは横幅、heightは画像の縦幅を記載して下さい。
background-imageには、利用する背景画像を指定して下さい。
|
.alpha_area
について |
width: 250px;
height: 300px;
この例では、背景画像の半分のサイズのレイヤーを利用しているため、横幅は250pxとしています。
背景画像全面に重ねる場合は、横幅500px、縦幅300pxを指定して下さい。
background-color: #000000;
半透明にする背景色となります。ご希望のカラーコードを指定して下さい。
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
この指定が半透明用指定となります。
値を小さくすると透明度が高くなります。
例）
filter: alpha(opacity=10);
-moz-opacity:0.1;
opacity:0.1;
|
.contents_area
について |
この部分は、ご自由に作成して下さい。
※ただし、この部分の文字についても半透明となります。
|
前号へ
