• 2014年7月10日

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

hpb18 徹底解説 !

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

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

さて、前回までは「リッチメニュー」「LightBox風イメージ」等でホームページビルダー18(略hpb18)をカスタマイズしてきました。今回は、フッターまわりをちょっとリッチにカスタマイズしていきたいと思います。

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

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

フッターは有益なスペースエリア!

画面のヘッダーは重要だけど、フッターって重要なの?って思ってませんか?数多くのデザイン的なサイトを見てみると、必ずフッター領域を大きくし、「メニュー」や「広告」等を付けることで、サイトの価値を高めています。

サイトのスペースは限られているわけですから、なるべく有効利用したいです。

下記のサイトは一例ですが、フッターを有効に活用し、うまく見せています。

BizVektorのフッター

BizVektorのフッター

 

ホームワーカーズコミュニティのフッター

ホームワーカーズコミュニティのフッター

 

フッターをカスタマイズ

今回はフッターをカスタマイズしていきます。カスタマイズの内容は以下の通りです。

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

  1. フッターのスペースを広げる
  2. フッターにメニュー一覧を付ける
  3. フッターに広告スペースを設置する

※フッターとは画面の一番下の領域のことです。テンプレートでは領域が狭く、何もない状態のままです。

 

フッターのID名 or Class名を調べる

まずは、フッターメニューや広告を確保するための領域を変更します。index.htmlを「HTMLソース」で開き、フッターの箇所のID名 or class(クラス)名を確認します。下記のコードのようにフッターの箇所には<!–footer–>~のコメントアウトがあるので、そこを参考にしましょう。

フッターを制御している領域のID名は「hpb-footerExtra1」という名称です。この名称を覚えておきます。

 

フッターの領域を確保する

index.htmlを「HTMLソース」のまま、hpb18にて画面一番右側の「スタイルエクスプレス」の表示にします。cssファイルを上から順番にクリックしていき、「#hpb-footerExtra1」というID名を探しましょう。

見つかったら、cssファイルを右クリックし、「編集」から展開します。

スタイルエクスプレスからCSSを編集する

スタイルエクスプレスからCSSを編集する

「#hpb-footerExtra1」の幅は「width:990px;」となっています。このままでは領域が分かりにくいので、色を付けて視覚化します。「#hpb-footerExtra1」に「background-color:#dcdcdc;」(灰色)を付けると、フッターの領域がどこからどこまでなのか簡単にわかります。

この状態で、「width:990px;」の値を変更してみましょう!各自で最適な幅を設定してください。

下記がサンプルコードになります。

 

index.htmlにコードを追加

フッターの視覚化

 

次に、index.htmlに<ul><li>タグを追加していきます。コードだと少し分かりにくいかもしれませんが、視覚的にすると分かりやすくなります。

 

HTMLのコード

 

CSSのコード

次に新規でCSSを作成し、下記のようにコードを付けていきます。

※新規のCSSは、TeraPad等のテキストエディタを使用して作成してください。又は、既存のCSSをコピーして作成してもOKです。

「footer_area」の高さは300pxとしていますが、テンプレートのプレビューを確認しながら、調整してください。各数値も同様に調整します。

 

プレビューで確認

サーバーに全てのファイルをアップロード(サイトの公開)をして確認してみましょう。

完成品

 

どうだったでしょうか?出来ましたか?

HTMLとCSSの基礎知識がなければ、ちょっと難しいですが、フッターのコードをじっくり解析していけば、出来ると思います。本当は全てのテンプレートに応用できるCSS等を作成し、配布したかったのですが、テンプレートは千差万別でなかなか難しいです。

時間があれば、全てのテンプレートを簡単に改変できるようなファイルも将来作成していきたいと思います。

 

返信を残す