Plain

テーマ「Plain」の見本ブログです。

フッターを追加する

フッター(はてなデフォルトのフッター#footerではない)はそもそも完全にユーザーがゼロから作るものなので、Plainではなにも用意していません。

が、このサンプルブログ用にフッターを作ったので、せっかくなので提供します(笑)

HTML

「フッタ」に貼ってください(貼る場所

<footer id="plainfooter">
    <nav id="pfnav">
        <div class="pfnav-left">
            <div>
                <div class="title">見出し1</div>
                <p>なにか文章</p>
            </div>
            <div>
                <address>
                    <div class="title">お問い合わせ・プロフィール</div>
                    <p><a href="/about">id:なまえ</a></p>
                    <p>自己紹介とか</p>
                    <p>お問い合わせは<a href="お問い合わせURL">こちら</a>へお願いします。</p>
                </address>
            </div>
        </div>
        <div class="pfnav-right">
            <div>
                <div class="title">見出し2</div>
                <p>長い文章段落1</p>
                <p>長い文章段落2</p>
            </div>
        </div>
    </nav>
    <div>
        <div class="title">プライバシーポリシーとか</div>
        <div>
            <p>プライバシーポリシーとかの内容</p>
        </div>
    </div>
</footer>


CSS
/*Plainフッター*/
#plainfooter
 {margin:4rem auto;box-sizing:border-box;width:96vw;max-width:calc(730px + 2rem + 360px + 2rem);background:#aaa;padding:2em 1rem;}
#plainfooter > nav > div, #plainfooter > div
 {padding:0 2rem;}
#plainfooter *
 {color:#fff;}
#plainfooter a
 {text-decoration:underline;}
#plainfooter a:hover
 {text-decoration:none;color:#eee;}
#plainfooter nav
 {display:flex;}
#plainfooter nav > div
 {width:100%;box-sizing:border-box;}
#plainfooter nav p
 {font-size:90%;}
#plainfooter address
 {font-style:normal;}
#plainfooter nav > div > div
 {padding-bottom:2em;}
#plainfooter .title
 {border-bottom:solid 1px #fff;}
#plainfooter > div p
 {font-size:70%;margin-top:2em;}

@media (max-width: 767px) {
    #plainfooter
     {width:100vw;margin-bottom:0;}
    #plainfooter nav
     {flex-direction:column;}
    #plainfooter > nav > div, #plainfooter > div
     {padding:0;}
}



はてなフッター(#footer)のスタイルを合わせる場合は以下も追加で貼ってください。

/*Plainフッターのスタイルにはてなフッターを合わせる*/
#footer
 {font-size:80%;box-sizing:border-box;padding:0 1em;}
#footer-inner
 {display:-webkit-flex;display:flex;
  -webkit-justify-content:space-between;justify-content:space-between;
  -webkit-align-items:center;align-items:center;}
#footer *{color:#fff;} /*文字色*/
#container
 {margin-bottom:0;}
#footer
 {margin:0 auto 2em auto;}
#footer
 {width:96vw;max-width:calc(730px + 2rem + 360px + 2rem);background:#aaa;}
#plainfooter
 {margin:4rem auto 0 auto;}
@media (max-width: 767px) {#footer{margin-bottom:0;width:100vw;}}