• 2014年8月12日

hpb18 徹底解説 ! HPをちょっとリッチにする方法 【サイドバナー編】

hpb18 徹底解説 ! HPをちょっとリッチにする方法 【サイドバナー編】

640 430 パソコン生活サポート Pasonal

さて、前回までは「リッチメニュー」「リッチフッター」「LightBox風イメージ」等でホームページビルダー18(略hpb18)をカスタマイズしてきました。今回は、ホームページのサイドにバナー広告を表示していきたいと思います。

なるべく初心者の方にも分かりやすいように書いていますが、最低限のHTML、CSSの基礎知識はやはり必須となります。

【スポンサードリンク】

注意 / Attension

  • ※カスタマイズする前に必ず既存のファイルをバックアップしてください!
  • ※hpb18の作業データの格納場所は「スタートメニュー > ドキュメント > mysite○○」です。(○○は番号)

 

画面サイズによって変わる格納式サイドバナー

今までのhpb18で作成したサイトにサイドバナー広告を表示したいと思います。

まずはサンプルをご覧ください。

 

作成するにあたり、サイドバナーのカスタマイズは以下のような感じになっています。

  1. 画面サイズの横幅が1280px以上になるとサイドバナーを表示
  2. 画面サイズの横幅が1280px以下になるとサイドバナーを非表示
  3. サイドバナーには広告を1~4つほど表示させる
  4. サイドバナーは左右両方に表示
  5. 今のところはTOPページのみカスタマイズ
  • ※動作確認は「Google Chrome最新版」「IE最新版」「Opera最新版」のみです。
  • ※その他ブラウザやバージョンではレイアウトが崩れる恐れがあります。
  • ※hpb18の別のテーマによっては正常に表示されない or 動かない場合があるかもしれません。

 

今回カスタマイズした3つのファイル

index.html

<head>~</head>内に下記を記述する。

 

<!–inner end–>の後、<!–footer–>の前に下記コードを記述。

<!–inner end–>とはホームページのコンテンツ部分が終了する箇所のこと。

広告のサイズは「横300px × 縦250px」です。

※下記の広告をそのまま使用しないでください

 

css/jqbanner.css

cssではサイドバナーを表示するBOXを記述。

 

 

s/jquerybanner.js

jqueryには「ウインドウサイズの横幅を検知する命令」と「スクロール値を取得する命令」「バナーのアニメーションの命令」で制御している。

バナーの表示・非表示は「CSS設定 関数」でまとめてある。

ぱそなる の最新の更新を
プッシュ通知で購読しよう

よかったらシェアしてください
4 コメント

返信を残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)