公開テンプレートにフッタを追加する: 小粋空間

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

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

Posted at December 21,2005 11:57 PM
Tag：[Footer, Template]

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

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

１．固定レイアウトの場合

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

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

注：FC2ブログテンプレートの固定レイアウトにはフッタを用意してますので、１．１項の設定は不要です（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>
　　　　　　：

１．２スタイルシートにフッタ用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;
}

２．リキッドレイアウトの場合

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

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

２．１テンプレートにフッタを追加

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

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

２．２スタイルシートにフッタ用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.1xをご利用の場合

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

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

または２．２項の

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

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

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

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

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ MovableType3.2 フッタを追加する from おじさんの備忘録
MovableType3.2 フッタを追加する [続きを読む]

Tracked on December 28, 2005 9:13 AM

≫ カスタマイズさくさく・前編（テンプレート＆プラグイン） from Sky High!
MovableTypeの特徴とくれば、カスタマイズが優れていること。データベースは4種類から選ぶことが出来るし、それにテンプレートデザインも自分で好きなよ... [続きを読む]

Tracked on March 3, 2006 9:58 PM

≫ テンプレートにフッタを追加・・・したけれど from ぺしぺし
今日は小粋空間さまの　公開テンプレートにフッタを追加する　を実行。もともと３カ... [続きを読む]

Tracked on July 6, 2007 1:40 PM

≫ フッターがうまく表示されない from 箱
どんなに頑張ってもまだできません ... [続きを読む]

Tracked on April 28, 2008 10:01 AM

はじめまして、すみれかおると申します。テンプレはじめ各種カスタマイズでお世話になっております。

今回も早速参考にして、サイトに取り入れさせていただきました。本当にどうもありがとうございました。
私はMovableType3.171を使用しておりますが、#footerの前にある.layout-three-column(もしくは、.layout-three-column-liquid)を削除してスタイルシートに貼り付けて再構築しても動作しました。3.0xや3.1xを使っている火と向けにも是非この方法を記載していただければと思います。

それと、BlogPeopleの捕捉ありがとうございました。近いうちに小粋なユーザーリストもサイトに追加したいと思いますが、リストが結構長くなりそうなのでなかなか導入に踏み切れないんですよね……(汗。

今後ともよろしくお願いいたします。

[1] Posted by すみれかおる : December 22, 2005 8:06 PM

＞すみれかおるさん
はじめまして。
テンプレート＆カスタマイズご利用ありがとうございます。

3.1xの件、ご連絡ありがとうございました。
ということで追記いたしました。

ユーザリストは全体を div class="hogehoge" で括り、スタイルシートで

.hogehoge { height: 200px; overflow:auto; }

という風に設定すれば、スクロール表示されますので、お試しください。詳細はBlogPeople のリンクリストにスクロールバーをつけるの1項の説明が参考になれば幸いです。

こちらこそ今後ともどうぞよろしくお願い致します。

[2] Posted by yujiro : December 23, 2005 3:47 AM

いつもお世話になっております。早速著作権表示のカスタマイズ方法ありがとございます。そこで、説明の通りカスタイズを試みたところ右サイドの下に表示され　どうしても中央カラムの下部センターに表示させたいのですがうまく表示させる事ができません。　お手数おかけしますがサポートお願いします

[3] Posted by panser : December 23, 2005 3:08 PM

いつもカスタマイズの件ではお世話になっております。当ブログのバナーのところのBBS-1のところにBBSを設置したのですが不具合があります。
どうしても右カラムのサイドメニューが中央カラムに表示されてしまいます。どうしてでしょうか？サポート宜しくお願いします。
（他のページに関してはこのような事がないのですが・・・）

[4] Posted by panser : December 23, 2005 7:42 PM

＞panserさん
こんばんは。
お世話になります。
1つめのご質問ですが、panserさんのカラムレイアウトの場合、１項の作業を一旦削除して、２項の作業のみ行ってください。
2つめのご質問は、中央カラムに </div> がひとつ足りないようですので、追加してください。

以上です。
それではどうぞよろしくお願い致します。

[5] Posted by yujiro : December 24, 2005 3:01 AM

ありがとございます。3カラムリキッドにしてからご指示頂いたようにしたところなんとか著作権表示ヘッダーに表示できております。そこで、「Mozilla Firefox」で表示させたところ全体的に表示くずれてしまいます。どうしてでしょうか？なんとか正常に表示するようにしたいのですがどのように修正すればいいでしょうか？お忙しいところ大変申し訳ないのですがサポート宜しくお願いします。

[6] Posted by panser : December 24, 2005 3:18 PM

＞panserさん
こんばんは。
ご質問の件ですが、スタイルシートの冒頭にある

a:hover {position:relative; top:1px; left:4px; {color:#FFFFFF; text-decoration:none; }

がCSS文法違反です（途中の"{"がひとつ余分）。

これを直すと表示は劇的に改善されましたが、完全に直るわけではありませんので、残ったエラーについては下記のリンクを利用して自己解決して頂ければ幸いです（下記でエラーが解消しても問題が解決しない場合はご連絡ください）。

HTML文法の検証：Another HTML-lint gateway
スタイルシート検証：W3C CSS 検証サービス

またスタイルシートにHTMLが存在しておりますので、これも削除してください。

以上です。
それではどうぞよろしくお願い致します。

[7] Posted by yujiro : December 26, 2005 12:01 AM

先日は、、「Mozilla Firefox」の表示不具合の件でサポートありがとございました。あれから、ご指示頂いたようにチェックしたところソースの不具合点がかなりあるようでした。私の知識では、修正にするのには困難のように思えたので全て最初からやり直しました。今のところ、「Mozilla Firefox」の表示を確認しながら作成しておりますが、一部エントリーの画像がIEでは正常なのですがMozilla Firefoxでは正常に表示していない以外は他、正常に表示されているようです。このまま、再度カスタマイズをしてみようと思います。何かと色々とサポートばかりお願いしましてすみません。また、何かあれば宜しくお願い致します。
では、今年も残りわずかとなりましたが、来年も良いお年でありますように　また、来年も宜しくお願い致します。では

[8] Posted by panser : December 30, 2005 3:35 AM

＞panserさん
こんばんは。
ご連絡ありがとうございました。
Firefoxの件（.entry-header のことと思われます）は、セレクタにタグ名を加えて

h3.entry-header {

とすれば認識してくれるかもしれません（間違ってたらすいません）。

こちらこそ色々お世話になりました。
panserさんもどうぞ良いお年をお迎えください。

[9] Posted by yujiro : December 31, 2005 1:33 AM

　現在作成中のサイトがあり、3カラムリキッドのテンプレート利用させて頂いております。
　左右のサイドバーよりも中央のコンテンツが短いときに、背景付きのフッタを入れてしまうと、サイドバーにはフッタが重なって表示されてしまいますよね？それで小粋空間様のプロフィールのページだけはフッタがないのでしょうか？

　以上のことを回避するために、中央コンテンツの長さを左右のサイドバー（またはある一定値）より長くして、その下にフッタを表示させようと思うのですが、それは可能でしょうか？また他に何かよい方法はありますか？

[10] Posted by まさ : January 6, 2006 6:39 PM

＞まささん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、当サイトのレイアウトは公開テンプレートのレイアウトと異なってますので、ソースをご覧になってレイアウトを組みなおすか、仰るように中央コンテンツがサイドバーより長くなるようにされるかのいずれかになると思います。
プロフィールのページは単なる設定誤りでした。ご指摘ありがとうございます。

以上です。
それではよろしくお願い致します。

[11] Posted by yujiro : January 7, 2006 3:05 AM

はじめて小粋空間さんの2カラムリキッドテンプレートを使わせていただき、構築しました。
フッタを追加すると、contentの長さがleftの長さより短い場合に、フッタがleftに重なってしまうんです。何か設定を間違えているのでしょうか？

[12] Posted by mgmg : January 7, 2006 5:07 PM

＞mgmgさん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、「２．リキッドレイアウトの場合」の説明や既出のコメントの通り、情報量によってフッタがサイドバーに重なる場合があります。設定誤りではありませんが公開しているリキッドレイアウトの制約です。

以上です。
それではよろしくお願い致します。

[13] Posted by yujiro : January 8, 2006 3:30 AM

こんにちは！
たびたび申し訳ないですが、。
フッタがなんかトップページのところだけ分裂してしまうんですがアドバイスください。

[14] Posted by ryu : February 19, 2006 5:49 PM

あ、すいません。
何とか解決しました。

[15] Posted by ryu : February 19, 2006 8:11 PM

＞ryuさん
こんばんは。
ご連絡ありがとうございました。
無事解決されたようでよかったです。
ではでは！

[16] Posted by yujiro : February 20, 2006 10:05 PM

yujiroサマ

済みません。もう少し面倒を見てやってください。

もう一つのサイトの方でフッターが右コラムの一番下に表示されてしまいます。こちらもうまく表示されているサイトと同じ３コラム固定のテンプレを使用させていただいでいるのですが、まったく同じに設置しているのに、こちらは、ダメなんて。。。。

もう一つのサイトは、こちらです。
http://tobehappy.hustle.ne.jp/k2blog/

よろしくお願いいたします。

[17] Posted by ナタリー : December 23, 2006 7:50 AM

＞ナタリーさん
こんばんは。
ご質問の件ですが、挿入位置が誤っているようです（右サイドバーの中に挿入してしまっています）ので、再度ご確認頂けますでしょうか。
それではよろしくお願い致します。

[18] Posted by yujiro : December 24, 2006 12:29 AM

yukiroサマ

お返事、ありがとうございました。

どうやらどこかでdivが閉じてなかったようです。
一つ</div>を追加したらうまく下に表示されました。

どこで忘れてしまったか。。。という問題は、残りますが、これは、おいおいチェックすることにします（＾＾；

失礼しました。

[19] Posted by ナタリー : December 24, 2006 6:11 PM

＞ナタリーさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは！

[20] Posted by yujiro : December 25, 2006 1:28 AM

コロコロとBlogを変えながら、度々お世話になっているものです。こんにちは。

このたびフッタをつけようとしましたがうまくできませんでした・・・(苦笑)

私は２つのBlogで"layout-two-column-right"で作成しているのですが、"layout-two-column-right"の場合はどのようにしたらフッタがつけられるのでしょうか？
アドバイスお願い致します。

またアーカイブごとにカタム変更した場合はどうなるのでしょうか？
また、おすすめ商品を紹介したいのですが、フッタの上にもう１つフッタ(？)をつけることも可能でしょうか？

[21] Posted by hi-lite&coffee : February 10, 2007 6:55 AM

＞hi-lite&coffeeさん
こんばんは。
2カラムのフッタの件は別途エントリーしたいと思います。少々お時間ください。
「アーカイブごとにカタム変更した場合」は具体例をご教示ください。
フッタを重ねる場合は異なる id 属性で同じタグを並べれば可能と思われます。
それではよろしくお願い致します。

[22] Posted by yujiro : February 13, 2007 1:00 AM

おはようございます。
またまたお世話になります┏○ﾍﾟｺﾘ
今度はフッターが表示されません。
記事どおりしているのですが理解力がないのでしょうか（汗）

３カラムリキッドを使用しています。
最初から入っているフッター？記事の下に出ているのですが、アレを削除して設定し直すのでしょうか？

スタイルシートは最後の方に追加したのですが、もしかして　
/* 2/3カラム用フッタ */　の部分を削除しないといけないのでしょうか？
って試してみたのですが表示されず。。。
これ以上するとグチャグチャになりそうなのでアドバイスお願い致します。
お手数お掛けしますが宜しくお願い致します┏○ﾍﾟｺﾘ

[23] Posted by く? : May 25, 2007 8:18 AM

＞く?さん
こんにちは。
ご質問の件ですが、FC2ブログテンプレートは設定が若干異なってます（最初からフッタが用意されてます）ので、頂いたコメントに書かれている

<p id="footer">

を

<p id="footer-liquid">

に修正してください。他の部分を修正する必要はありません。

FC2ブログテンプレートをご利用の方に誤解を招かないよう、本文は若干修正致しました。
それではよろしくお願い致します。

[24] Posted by yujiro : May 28, 2007 2:37 PM

はじめまして、先日よりこちらのテンプレートを使わせていただいております。
３カラム固定テンプレートでフッタを追加してみたところ、IEで表示させますとフッタの高さがスクロールするたびに違い、最下部を表示させて別ページからウィンドウを切り替えるとフッタの背景色が画面全体に表示されるという現象が出てしまいました。
FireFoxですときちんと表示されます。

どこに原因があるのか、見当もつかず途方にくれております。
お忙しいところ恐れ入りますがご教示くださいませ。

[25] Posted by ぺしみ : July 10, 2007 9:35 PM

こんばんわ。
また書き込みさせていただきます。

さっそくですが、Yujiroさんのテンプレートを導入しようと思ってるのですが、その前に疑問が出てきたので質問させていただきます。

タイトルバーの表示に関することで、"続きを読む"や"comments"をクリックすると、エントリーアーカイブに飛びますよね？
その際に、タイトルバーの表示が、サイト名:記事タイトル#comments#commentsのようにダブってしまうんですが、これを一つ(#comments)、もしくは両方(#comments#comments)消去するにはどうすればいいですか？

それではよろしくお願いします。

[26] Posted by エース : July 10, 2007 10:31 PM

度々恐れ入ります、フッタの表示崩れですが、

.clear {
clear: both;
}

を入れてみましたら改善したようです。
お騒がせしてすみませんでした。

[27] Posted by ぺしみ : July 11, 2007 3:24 PM

＞ぺしみさん
こんにちは。
ご質問の件ですが自己解決されたようで良かったです。
ではでは！

＞エースさん
こんにちは。
ご質問の件ですが、以前も他の方から同じ質問を頂いたことがありまして、申し訳ありませんが当方では解消できませんでした。
お役に立てず申し訳ありません。

[28] Posted by yujiro : July 12, 2007 4:36 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

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

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

小粋空間 - a cheap joke and a play on words site