公開テンプレートにフッタを追加する(2カラム版)

公開テンプレートにフッタを追加する(2カラム版)

Posted at February 28,2007 1:01 AM
Tag:[Footer, Template]

公開テンプレートにフッタを追加する公開テンプレートの2カラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。以前、3カラムレイアウトにフッタを追加する「公開テンプレートにフッタを追加する」でご質問を頂きましたので本エントリーにて紹介致します。スクリーンショットは固定レイアウトにフッタを追加した完成例です(フッタ部分のみ切り取って表示させています)。

なお、リキッドレイアウトと固定レイアウトでカスタマイズ内容が異なりますのでご注意ください。

1.固定レイアウトの場合

1.1 テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの最後の方にある br 要素と div 要素(終了タグ)の間に青色で示したフッタを挿入します。

      :
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
 
<br class="clear" />
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
</div><!-- /box -->
 
</body>
</html>
      :

1.2 スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート(styles-site.css)を開き、下記の設定を挿入します(とりあえず最後の方に追加してください)。

.layout-two-column-left #footer,
.layout-two-column-right #footer {
    margin: 30px 0 0;
    padding: 10px;
    border-top: 1px solid #666699;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
}

また本文とフッタの表示バランスを修正するために、下記の box セレクタおよび content セレクタについても、赤色から青色に修正すると良いでしょう。スタイルシートには似たようなセレクタが並んでいるので、

.layout-two-column-left #box
.layout-two-column-left #content
.layout-two-column-right #box
.layout-two-column-right #content

で検索しましょう。

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

またレイアウトによって下記も同様に修正してください。

左サイドバーの場合

/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}

右サイドバーの場合

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

2.リキッドレイアウトの場合

当サイトで公開しているリキッドレイアウトは左右カラムを absolute(絶対値)指定しており、中央カラムの縦幅と左右サイドバーの縦幅が連動しないため、固定レイアウトのように左右サイドバーにまたがったタイプのフッタ表示はできません。例えばフッタを中央カラムの下に割り当てると、サイドバーの縦幅が中央カラムの縦幅より長くなるとフッタとサイドバーの表示が重なってしまいます。
ということで、ここではサイドバーにはみ出さないように、中央カラムの下に著作権表示をする例をご紹介します。

2.1 テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの途中にある中央カラム終了を示す div 要素(終了タグ)と、右カラム開始の div 要素の間に青色で示したフッタを挿入します。

左サイドバーの場合

      :
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<br class="clear" />
      :

右サイドバーの場合

      :
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
      :

2.2 スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート(styles-site.css)を開き、下記の設定を挿入します(とりあえず最後の方に追加してください)。

.layout-two-column-liquid-left #footer,
.layout-two-column-liquid-right #footer {
    margin: 15px 0 0;
    padding: 5px;
    color: #444444;
    font-size: 12px;
    text-align: center;
}
関連記事
zenback
人気エントリー
トラックバックURL


コメント

「公開テンプレートにフッタを追加する」で質問させていただいた者です。
ありがとうございました。
まだ、トップだけを徐々にカスタマイズしているだんかいですが、できました!
本当にありがとうございました。
これからも、色々参考にさせていただきます。

[1] Posted by hi-lite&coffee : March 30, 2007 7:59 PM

>hi-lite&coffeeさん
こんばんは。
ご連絡ありがとうございました。
お役に立てたようで良かったです。
ではでは!

[2] Posted by yujiro : April 1, 2007 1:55 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)