TopMovable Typeテンプレート > 2005年12月
2005年12月21日

公開テンプレートにフッタを追加する

December 21,2005 11:57 PM
Tag:[, ]
Permalink

公開テンプレートにフッタを追加する公開テンプレートのカラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。スクリーンショットは固定レイアウトにフッタを追加したものです(フッタ部分のみ切り取って表示させています)。
Serene Bach 版はデフォルトでフッタを設定していますが、Movable Type 版は設定していなかったのでここでご紹介します。Serene Bach 版もカスタマイズすることで本記事のようなデザインに変更することが可能です。

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

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

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

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

注:FC2ブログテンプレートの固定レイアウトにはフッタを用意してますので、1.1項の設定は不要です(CSSは若干異なりますので適宜変更してください)。

      :
</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-three-column #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-three-column #box」と「.layout-three-column #content」で検索しましょう。

.layout-three-column #box {
    width: 850px;
    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;
}
       :
     (中略)
       :
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

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

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

注:FC2ブログテンプレートのリキッドレイアウトではフッタが表示されるようになっていますので、2項の設定は不要です。

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

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

      :
</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-three-column-liquid #footer {
    margin : 15px 0 0;
    padding-top: 5px;
    color: #444444;
    font-size: 12px;
    text-align: center;
}

3.3.1xをご利用の場合

上記のカスタマイズは3.2x用です。3.1xまではCSSの設定が異なるため、1.2項にある

.layout-three-column #footer {
      :
.layout-three-column #box {
      :
.layout-three-column #content {
      :

または2.2項の

.layout-three-column-liquid #footer {
      :

の赤色部分を削除してください。

2005.12.23 追記
3.1x 用のカスタマイズ方法を追加しました。

2007.2.25 追記
HTMLマークアップを変更しました。それに伴い CSS も一部変更しました。

Comments [28] | Trackbacks [4]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3