さて、前回までは「リッチメニュー」「リッチフッター」「LightBox風イメージ」等でホームページビルダー18（略hpb18）をカスタマイズしてきました。今回は、ホームページのサイドにバナー広告を表示していきたいと思います。
なるべく初心者の方にも分かりやすいように書いていますが、最低限のHTML、CSSの基礎知識はやはり必須となります。
注意 / Attension
- ※カスタマイズする前に必ず既存のファイルをバックアップしてください！
- ※hpb18の作業データの格納場所は「スタートメニュー > ドキュメント > mysite○○」です。（○○は番号）
画面サイズによって変わる格納式サイドバナー
今までのhpb18で作成したサイトにサイドバナー広告を表示したいと思います。
まずはサンプルをご覧ください。
作成するにあたり、サイドバナーのカスタマイズは以下のような感じになっています。
- 画面サイズの横幅が1280px以上になるとサイドバナーを表示
- 画面サイズの横幅が1280px以下になるとサイドバナーを非表示
- サイドバナーには広告を１～４つほど表示させる
- サイドバナーは左右両方に表示
- 今のところはTOPページのみカスタマイズ
- ※動作確認は「Google Chrome最新版」「IE最新版」「Opera最新版」のみです。
- ※その他ブラウザやバージョンではレイアウトが崩れる恐れがあります。
- ※hpb18の別のテーマによっては正常に表示されない or 動かない場合があるかもしれません。
今回カスタマイズした3つのファイル
index.html
<head>~</head>内に下記を記述する。
<!--jquery banner--> <link rel="stylesheet" href="css/jqbanner.css" type="text/css> <script type="text/javascript" src="js/jquerybanner.js>
<!–inner end–>の後、<!–footer–>の前に下記コードを記述。
<!–inner end–>とはホームページのコンテンツ部分が終了する箇所のこと。
広告のサイズは「横300px × 縦250px」です。
※下記の広告をそのまま使用しないでください
</div> <!-- inner end --> <!--スライドバナー--> <div id="jq-right-banner"> <p>広告１</p> <a href="http://directlink.jp/tracking/af/1237943/457PG6yn/" title="ボタンマルシェ - ButtonMarche" target="_blank"><img border="0" alt="ボタンマルシェ - ButtonMarche" src="http://logo-marche.net/wp-content/uploads/2014/05/buttonmarche300250.jpg" /></a> <p>広告２</p> <a href="http://directlink.jp/tracking/af/1237943/3Mt3jqSf/" title="ロゴマルシェ - LogoMarche" target="_blank"><img border="0" alt="ロゴマルシェ - LogoMarche" src="http://logo-marche.net/wp-content/uploads/2014/05/logomarche300250.jpg" /></a> <p>広告３</p> <a href="http://directlink.jp/tracking/af/1237943/457PG6yn/" title="ボタンマルシェ - ButtonMarche" target="_blank"><img border="0" alt="ボタンマルシェ - ButtonMarche" src="http://logo-marche.net/wp-content/uploads/2014/05/buttonmarche300250.jpg" /></a> <p>広告４</p> <a href="http://directlink.jp/tracking/af/1237943/3Mt3jqSf/" title="ロゴマルシェ - LogoMarche" target="_blank"><img border="0" alt="ロゴマルシェ - LogoMarche" src="http://logo-marche.net/wp-content/uploads/2014/05/logomarche300250.jpg" /></a> </div> <div id="jq-left-banner"> <p>広告１</p> <a href="http://xxxxx" title="ボタンマルシェ - ButtonMarche" target="_blank"><img border="0" alt="ボタンマルシェ - ButtonMarche" src="http://logo-marche.net/wp-content/uploads/2014/05/buttonmarche300250.jpg" /></a> <p>広告２</p> <a href="http://xxxxxx" title="ロゴマルシェ - LogoMarche" target="_blank"><img border="0" alt="ロゴマルシェ - LogoMarche" src="http://logo-marche.net/wp-content/uploads/2014/05/logomarche300250.jpg" /></a> <p>広告３</p> <a href="http://xxxxxx" title="ボタンマルシェ - ButtonMarche" target="_blank"><img border="0" alt="ボタンマルシェ - ButtonMarche" src="http://logo-marche.net/wp-content/uploads/2014/05/buttonmarche300250.jpg" /></a> <p>広告４</p> <a href="http://xxxxxx" title="ロゴマルシェ - LogoMarche" target="_blank"><img border="0" alt="ロゴマルシェ - LogoMarche" src="http://logo-marche.net/wp-content/uploads/2014/05/logomarche300250.jpg" /></a> </div> <!-- footer -->
css/jqbanner.css
cssではサイドバナーを表示するBOXを記述。
@charset "Shift_JIS";
/*CSS3 footer アニメーション */
/*画面右広告*/
#jq-right-banner{
background-color:#fff;
position:absolute;
top:250px;
left:0px;
width:300px;
height:1300px;
padding:20px 20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius: 5px;
box-shadow:3px 3px 3px rgba(0,0,0,0.4);
}
/*広告タイトル*/
#jq-right-banner p{
padding:30px 0 0 0;
font-size:16px;
}
/*画面左広告*/
#jq-left-banner{
background-color:#fff;
position:absolute;
top:250px;
right:0px;
width:300px;
height:1300px;
padding:20px 20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius: 5px;
box-shadow:3px 3px 3px rgba(0,0,0,0.4);
}
/*広告タイトル*/
#jq-left-banner p{
padding:30px 0 0 0;
font-size:16px;
}
s/jquerybanner.js
jqueryには「ウインドウサイズの横幅を検知する命令」と「スクロール値を取得する命令」「バナーのアニメーションの命令」で制御している。
バナーの表示・非表示は「CSS設定 関数」でまとめてある。
// JavaScript Document
$(function(){
var width_flg = false;
var win_w;
var scrollValue = 300;
window_size_set();
css_reset();
/*リサイズ検知 - 位置再セット*/
$(window).resize(function() {
window_size_set();
});
$(window).scroll(function() {
//スクロール値取得
scrollValue = $(this).scrollTop();
//スクロール値が300以下の場合は非表示
if(scrollValue < 100){
css_reset();
//スクロール値が300以上かつ画面サイズが1280以上の場合は広告表示
}else if(scrollValue > 100 && width_flg == true){
css_set();
}
});/*End scroll*/
/*****************************************
画面サイズ取得 関数
******************************************/
function window_size_set(){
win_w = $(window).width();
if(win_w > 1280){
css_set();
width_flg = true;
}else{
css_hidden();
width_flg = false;
}
}
/*****************************************
CSS設定 関数
******************************************/
//広告を表示
function css_set(){
$('#jq-right-banner').css({'visibility':'visible'});
$('#jq-right-banner').stop(true).animate({'left':'0px',opacity:1},500,'easeOutExpo');
$('#jq-left-banner').css({'visibility':'visible'});
$('#jq-left-banner').stop(true).animate({'right':'0px',opacity:1},500,'easeOutExpo');
}
//広告を（画面外に）格納
function css_reset(){
$('#jq-right-banner').stop(true).animate({'left':'-1500px',opacity:0},1500,'easeOutExpo');
$('#jq-left-banner').stop(true).animate({'right':'-1500px',opacity:0},1500,'easeOutExpo');
}
//広告非表示
function css_hidden(){
$('#jq-right-banner').css({'visibility':'hidden'});
$('#jq-left-banner').css({'visibility':'hidden'});
}
});/*End function*/
[/js]