Jimdoフッターカスタマイズ

Jimdoのフッター部分に関するカスタマイズをご紹介いたします。

フッターの高さを調節する

フッターの高さを調整しましょう。

この意味は何かというと、フッターに高さを持たせることで、フッターにコンテンツを入れることが出来るようになります。例えばフッターメニュー。それ以外にもツイッターのつぶやきやテキスト文章。

会社の場合はフッターにもロゴを入れたりしますね。

さて、早速フッターに高さを与えてあげましょう。

 

CSS:元のCSS

 

#footer{    clear:both;    margin-top:10px;    background:url(footer-bg.gif) repeat-x top;    height:65px;}

 

CSS:変更後のCSS

 

#footer{    clear:both;    margin-top:10px;    background:url(footer-bg.gif) repeat-x top;    height:200px;}

 

上記の変更で65pxの高さから200pxの高さに変更しました。

 

フッターに背景画像を設定する

元々の独自レイアウトにはフッターの背景画像が設定されています。

このフッター背景画像は高さが65pxですので次のセクションで紹介する、フッターにコンテンツを入れるために高さを200pxに設定しました。さて次はその高さに合わせたフッター画像に変更してみましょう。

 

まずは高さ200pxのフッター画像を用意しましょう。

こんな画像を用意してみました。これをファイルアップロードします。

今回はfooterbg.jpgという名前でアップロードしました。

 

さて次はCSSの設定です。

 

CSS:上記セクションで編集したCSS

 

#footer{    clear:both;    margin-top:10px;    background:url(footer-bg.gif) repeat-x top;    height:200px;}

 

CSS:変更後のCSS(画像を入れ替えています)

 

#footer{    clear:both;    margin-top:10px;    background:url(footerbg.jpg) repeat-x top;    height:200px;}

 

これにて、高さ200pxのフッター画像が設定されました。

さぁ次はフッターにコンテンツを入れて行きましょう!

 

フッターにコンテンツを入れる

フッターにコンテンツを入れる前に入れる箱を用意しましょう。

まずはHTMLでその箱を作ってあげます。

 

HTML:元のフッター部分のソース

 

<div id="footer">

<div class="gutter">

<var>footer</var>

</div>

</div>

 

HTML:改変後のソース

 

<div id="footer">

<div class="footerin">

<div class="footerA">footerAここにテキストを入れます。</div>
<div class="footerB">footerBココにもテキストを入れます。</div>

</div>
<div class="gutter">

<var>footer</var>

</div>

</div>

 

footerA,footerBとフッター部分に箱を2つ作りました。

ABを今回は横並びにしていきます。

 

CSS:下記ソースをCSSに追加しましょう。

 

.footerin {padding:17px;height:126px;}

.footerA {float:left;width:390px;}

.footerB {float:right;width:390px;}

//下記は元ある#footer .gutter を書き換えてください。
#footer .gutter {   clear:both; height:40px; padding:0 15px 0 15px;}

 

これで出来ました。

完成したものを見てみましょう。

フッターに箱ができてそこにテキストが入りました。

ココに入れるテキストはあなた次第です。

もちろんメニューを作ってもいいですし、ツイッターなどのつぶやきを入れてもよいでしょう。

細かい高さ設定や箱の数等を変えてあげる事でオリジナリティあふれた、あなただけのフッターを作ることができます。多少CSSの知識が必要なので、そこはご了承ください。