simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.11.22

【WordPress】シンプルなオリジナルテーマの作り方(3)~フッター~

WordPress

読み返したところ気に入らない点が多々あったため、当初とは大幅に内容を修正しました。一度確認してみてください。最終更新日は2017年11月28日です。

前回はbootstrapとカスタムメニューをつかってナビゲーションを作りました。前回の記事はこちらです。

【WordPress】シンプルなオリジナルテーマの作り方(2)~ナビゲーション~
読み返したところ気に入らない点が多々あったため、当初とは大幅に内容を修正しました。一度確認してみてください。最終更新日は2017年11月28日です。さて、前回に引き...

今回はフッターを作っていきます。作っていくといっても、内容としてはやはりシンプルにコピーライトくらいでしょうか。

bootstrapのSticky footerをつかう

bootstrapにはSticky footerというサンプルが予め用意されています。このSticky footerをつかえば、ページの情報量が少なくてもフッターをページの最下部に固定できます。特に新しいjavascript等は必要無いので便利なものの一つです。

footer.php

footer.phpには下記を記述します。

<footer class="footer">
<div class="container">
<p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
</div>
</footer>

style.css

CSSは下記の通りです。

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 40px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.footer .container{
    padding: 0;
}
.footer p{
    font-size: 12px;
    color: #777;
}

bodyのmargin-bottomと.footerのheight、line-heightは値を合わせてください。これだけです。

これで下の画像のように、ページの情報量が少なくてもフッターが一番下に固定されるようになりました。

ジョギングのこと

LIFE

ジョギングのこと

ハッピーガールちゃんの1日

LIFE

ハッピーガールちゃんの1日

【WordPress】シンプルなオリジナルテーマの作り方(7)~固定ページ~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(7)~固定ページ~

【初心者必見】WEBフォントFont Awesomeの使い方

WEB

【初心者必見】WEBフォントFont Awesomeの使い方

httpsのページにhttpのサイトの動画を埋め込むときは注意が必要らしい

WEB

httpsのページにhttpのサイトの動画を埋め込むときは注意が必要らしい

時間にルーズな人間について思うこと

THOUGHT

時間にルーズな人間について思うこと

WordPress環境をローカル上に簡単に構築できるLocal by Flywheel

WordPress

WordPress環境をローカル上に簡単に構築できるLocal by Flywheel

想像力の欠如が害になる

THOUGHT

想像力の欠如が害になる