このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回は、自由記入欄で中央エリアに挿入したバナー画像にマウスオーバーで吹き出しを表示する方法をご紹介します。以前にもマウスオーバーで画像を切り替える方法等もご紹介しておりますが、基本的には同様の方法となります。
画像サイズは下記のように作成して下さい。
横幅 |
基本的には、作成サイズは自由です。
※バナー画像サンプル：500ピクセル
※吹き出し画像サンプル：180ピクセル |
縦幅 |
基本的には、作成サイズは自由です。
※バナー画像サンプル：50ピクセル
※吹き出し画像サンプル：80ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
※メルマガ掲載のため縮小表示
・バナー画像
・吹き出し画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
自由記入欄を利用してhtmlタグを記載します。
管理画面→デザイン管理→画像とコメントの設定をクリックして下さい。
自由記入欄に下記の指定をコピーして貼り付けて下さい。
※表示位置は、表示とレイアウトの設定から中央エリアに設定して下さい。
バナー部分のhtmlタグを記載される際、バナー画像部分とコンテンツ部分の間に余白が入る場合があります。その際は、htmlタグ間の改行を削除してお試し下さい。
<div class="center_box">
<!-- バナー挿入部分 -->
<div class="recommend_banner" onmouseover="this.style.overflow='visible';" onmouseout="this.style.overflow='hidden';">
<div id="popup_box">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/banner_popup.gif"
width="180" height="80" />
</div>
<div class="banner_box">
<a href="リンク先URL">
<img src="http://cafe0808.ocnk.net/data/cafe0808/
image/banner_recommend.jpg" width="500" height="50" border="0" /></a>
</div>
</div>
</div>
編集後、「登録処理を完了する」ボタンをクリックして下さい。
<div>タグ
recommend_banner
について |
この部分がコンテンツの表示/非表示を切り替える箇所となります。
class="recommend_banner"
必ず上記のようにclass名を付けて下さい。(※名称は自由)
onmouseover="this.style.overflow='visible';"
onmouseout="this.style.overflow='hidden';"
バナー画像へマウスオーバーした際とマウスアウトした際のコンテンツ表示用の記載です。変更の必要はありません。
|
<div>タグ
popup_box
について |
吹き出し用画像の挿入箇所となります。
id="popup_box"
必ず上記のようにid名を付けて下さい。(※名称は自由)
<img>タグにて画像を挿入して下さい。
|
<div>タグ
banner_box
について |
バナー用画像の挿入箇所となります。
class="banner_box"
必ず上記のようにclass名を付けて下さい。(※名称は自由)
<a>タグにリンク先URLを挿入して下さい。
<img>タグで画像を挿入して下さい。
|
スタイルシートを編集します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
.recommend_banner {
width: 500px;
height: 50px;
position: relative;
overflow: hidden;
}
#popup_box {
position: absolute;
top: -80px;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
.recommend_banner
について |
width: 500px;とheight: 50px;
使用したバナー画像の横幅と縦幅と同様の値を指定して下さい。
position: relative;とoverflow: hidden;
変更いただく必要はありません。
|
#popup_box
について |
position: absolute;
変更いただく必要はありません。
top: -80px;
吹き出し画像の表示位置となります。
吹き出し画像の縦幅をマイナス値で指定下さい。
例）縦幅が50pxの場合、-50px
|
|
このようにバナー画像に少しアクセントを付けるとおもしろい表示を行うことができます。
|
前号へ
