2017年8月8日さて、前回までは「リッチメニュー」「LightBox風イメージ」等でホームページビルダー18(略hpb18)をカスタマイズしてきました。今回は、フッターまわりをちょっとリッチにカスタマイズしていきたいと思います。初心者の方にも分かりやすいように書いていますが、最低限のHTML、CSSの基礎知識はやはり必須となります。mysite○○」です。Class名を調べるフッターの領域を確保するindex.htmlにコードを追加HTMLのコードCSSのコードプレビューで確認フッターは有益なスペースエリア!画面のヘッダーは重要だけど、フッターって重要なの?って思ってませんか?数多くのデザイン的なサイトを見てみると、必ずフッター領域を大きくし、「メニュー」や「広告」等を付けることで、サイトの価値を高めています。サイトのスペースは限られているわけですから、なるべく有効利用したいです。下記のサイトは一例ですが、フッターを有効に活用し、うまく見せています。BizVektorのフッターホームワーカーズコミュニティのフッターフッターをカスタマイズ今回はフッターをカスタマイズしていきます。カスタマイズの内容は以下の通りです。サンプルをご覧ください。フッターのスペースを広げるフッターにメニュー一覧を付けるフッターに広告スペースを設置する※フッターとは画面の一番下の領域のことです。テンプレートでは領域が狭く、何もない状態のままです。Class名を調べるまずは、フッターメニューや広告を確保するための領域を変更します。class(クラス)名を確認します。下記のコードのようにフッターの箇所には<!–footer–>~のコメントアウトがあるので、そこを参考にしましょう。フッターを制御している領域のID名は「hpb-footerExtra1」という名称です。この名称を覚えておきます。class="footer_menu">フッターの領域を確保するindex.htmlを「HTMLソース」のまま、hpb18にて画面一番右側の「スタイルエクスプレス」の表示にします。cssファイルを上から順番にクリックしていき、「#hpb-footerExtra1」というID名を探しましょう。見つかったら、cssファイルを右クリックし、「編集」から展開します。スタイルエクスプレスからCSSを編集する「#hpb-footerExtra1」の幅は「width:990px;」となっています。このままでは領域が分かりにくいので、色を付けて視覚化します。「#hpb-footerExtra1」に「background-color:#dcdcdc;」(灰色)を付けると、フッターの領域がどこからどこまでなのか簡単にわかります。この状態で、「width:990px;」の値を変更してみましょう!各自で最適な幅を設定してください。下記がサンプルコードになります。次に、index.htmlに<ul><li>タグを追加していきます。コードだと少し分かりにくいかもしれませんが、視覚的にすると分かりやすくなります。-->CSSのコード次に新規でCSSを作成し、下記のようにコードを付けていきます。※新規のCSSは、TeraPad等のテキストエディタを使用して作成してください。既存のCSSをコピーして作成してもOKです。「footer_area」の高さは300pxとしていますが、テンプレートのプレビューを確認しながら、調整してください。各数値も同様に調整します。none;text-indent:-1.5em;}プレビューで確認サーバーに全てのファイルをアップロード(サイトの公開)をして確認してみましょう。完成品どうだったでしょうか?出来ましたか?HTMLとCSSの基礎知識がなければ、ちょっと難しいですが、フッターのコードをじっくり解析していけば、出来ると思います。本当は全てのテンプレートに応用できるCSS等を作成し、配布したかったのですが、テンプレートは千差万別でなかなか難しいです。時間があれば、全てのテンプレートを簡単に改変できるようなファイルも将来作成していきたいと思います。Windows7は1月14に終了へ。実践的なチュートリアルで、Photoshopの基本的な操作・テクニック・レタッチ・合成のポイント・応用まで幅広く学ぶことができます。Windows7は1月14に終了へ。講座について講師依頼についてパソコンの修理・保守についてその他について確認画面は表示されません。送信する前にお間違いがないかどうかご確認ください。講座について講師依頼についてパソコンの修理・保守についてその他について確認画面は表示されません。送信する前にお間違いがないかどうかご確認ください。PluginClose。