• 2014年8月12日

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

hpb18 徹底解説 !

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設定 関数」でまとめてある。

特集記事
フィルター
Post Page
徹底解説 ホームページビルダー ホームページビルダー18 WordPress SEO対策 こんぴゅーた テクニック・トラブル レビュー(評価) パソコン Jimdo / Goope アプリケーション webビルダー ホームページ グーペ Strikingly
ソート
hpb18 徹底解説 !

hpb18 徹底解説 ! HPをちょっとリッチにする方法【スクロールバナー】

今回はスクロールバナーを作成してみました。スクロールバナーとはマウスのホイールに追随して移動する広告のことです。こうすることで、常に広告がユーザーの目にとまるようになり、クリック率の増加が期待できます。 また、作成方法も「css」と「jQuery」をほんの少し追加してあげるだけです。 スポンサードリンク
2014-09-05

18

hpb18 徹底解説 !

hpb18 徹底解説 ! HPをちょっとリッチにする方法【リッチメニュー】

前回はホームページビルダー18のサイトの画像を「LightBox風」にアレンジしました。今回は、グローバルメニューをちょっとリッチにカスタマイズしたいと思います。 ※カスタマイズする前に必ず既存のファイルをバックアップしてください!
2014-07-05

18

WordPress テンプレート の効果を高める5つの方法+30テーマ

WordPress テンプレート の効果を高める5つの方法+30テーマ

デザインに特化したテンプレートから、ユニークな演出のテンプレートまで、世の中にはじつに色々なWordPress テンプレートが豊富にあります。迷いますよね。WordPressをこれから始める人も、どのテンプレ
2017-08-08

8

ホームページを作りたいけど、どんな方法があるの? お試し7選

ホームページ作成ソフトを試してみよう!楽々作成+お試し7選

会社からホームページを作れ!」と上司から言われて、困っている人もいるでしょう。「店舗サイト
2017-07-27

8

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.3

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.3

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.3~アッという間のチュートリアル記事です。Strikingly を利用して、フラワーショップのホームページを構築したいと思います。ウェブビルダーであるStrikinglyを使えば、お手軽に高品質なサイトを作成することができます。 こ
2017-07-26

8

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.2

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.2

Strikinglyで作るホームページ! 店舗サイト【フラワーショップ】Part.2~アッという間のチュートリアル記事です。Strikingly を利用して、フラワーショップのホームページを構築したいと思います。ウェブビルダーであるStrikinglyを使えば、お手軽に高品質なサイトを作成することができます。
2017-07-26

8

4 コメント

返信を残す