はてなブログでカスタマイズをしだいして、ずーっと気になっていたことがあります。WordPressでは当たり前のようにあって、はてなブログにはないもの。。。そう
フッターです！
今回は、そんなはてなブログにせめてフッターメニューとコピーライトくらい付けませんか？ってゆー提案でございます。
フッターなくて気持ち悪いの僕だけですか？
冷静に見てみてください。はてなブログのたいがいのブログがフッターがないです。カスタマイズ系でよく見るブログとかでもフッターない状態の人結構います。
ひどい人なら、記事があってその最後に「次のページへ」のページ送りボタンで終了みたいな。
スマホの場合、下の方にサイドバーが来てそのままページ終了みたいな…え？みたいな
いや、せめてコピーライトくらい付けましょうよ…
カタチだけでも！ｗ
そもそもコピーライト自体、なんの義務もないので付けてないからどーのこーのはないです。ただ、付けてることによって著作権の意思表示にはなります。
たとえば、一時キュレーションサイトとかで流行った、無限スクロール。あれとかはスクロールの度に一生次の記事が続いていき、フッターの存在を確認することのない”敢えて”終わりのない見せ方でした。
しかし、はてなブログの多くはそれではないです。完全にページの終わりにも関わらずフッターがないのは、なんてゆーか…締りが悪い！
読み込みのバグかなんかで、途中でページが切れてるのかと思うブログもありました＞＜
とゆーことで、コピペでできるお手軽フッターでも作りましょう！
今回用意したのは、僕のフッターと全く同じノリのやつです。
・タイトル
・メニュー
・コピーライト
以上を添えるだけでも十分でしょう！
HTML
| <footer id="footer"> | |
| <div id="footer-menu"> | |
| <div id="blog-title-content"> | |
| <a href="ブログのURL">ブログ名</a> | |
| </div> | |
| <nav> | |
| <div class="footer-links"> | |
| <ul> | |
| <li> | |
| <a href="お問い合わせページのURL">お問い合わせ</a> | |
| </li> | |
| <li> | |
| <a href="プライバシーポリシーのURL">プライバシーポリシー</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <p class="copyright">© 2018 ブログ名 All rights reserved.</p> | |
| </div> | |
| </footer> |
変更箇所
4行目：ブログのURLとブログ名
10行目と13行目：任意のページのURLと名前
18行目：ブログ名
以上を自分のブログ情報に変更してくださいませm(_ _)m
挿入場所
管理画面→「カスタマイズ」→「フッター」
※スクリプトを記載している場合は、それ以前に挿入してください。
CSS
| /* フッター */ | |
| #bottom-editarea { | |
| width: 100%; | |
| margin: 0 auto; | |
| background: #7f8c8d; | |
| padding: 0; | |
| color: #fff; | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-justify-content: space-between; | |
| justify-content: space-between; | |
| } | |
| #footer { | |
| text-align: center; | |
| color: #fff; | |
| background: #676F74; | |
| width: 100%; | |
| margin: 0; | |
| padding: 2em 40px 1em 40px; | |
| box-shadow: 0px 0px 3px rgba(0,0,0,0.1); | |
| text-align: center; | |
| font-size: 80%; | |
| } | |
| #blog-title-content a { | |
| font-size: 50px; | |
| font-weight: 100; | |
| color: #fff; | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .footer-links ul li { | |
| display: inline-block; | |
| padding: 0 6px; | |
| font-size: 14.5px; | |
| box-sizing: border-box; | |
| } | |
| .copyright { | |
| font-size: 10px; | |
| } |
変更点
backgroundで背景色
colorで文字色が変わります。
その他、細かい数値感等に関しては、ご自身のご都合の良いようにいじってくださいませm(_ _)m
挿入場所
上記HTMLのところで見た「フッター」のスグ下にある「デザインCSS」というところ。
これだけです。
以上で、お手軽フッターは完成です^^
不明点等あれば、コメントなりTwitterでご連絡いただけると対応致します！
まとめ
ヘッダーは皆さん「まずはじめに！」と意気込んでカスタマイズされるかと思います。ただ、フッターがなければせっかくのイケてるブログも、なんか惜しい感じになっちゃいますｗ
ユーザーが目当ての記事を読み終えた後訪れるフッターは、PCでもスマホでも案外請求力の高いエリアになっております。
特にWordPressのブログ等を参考にしながら、ゆくゆくは自分らしいデザインにカスタマイズできればいいですね！^^
以上。お疲れした！😂