フッターを追加する
フッター(はてなデフォルトのフッター#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;}}