はてなブログのフッター、フッターメニューまわりのカスタマイズ

はてなブログのフッター部分のカスタマイズについてあまり解説を見かけないので自分でできる範囲で書いてみました。良かったら参考にして下さい。

はてなグローバルナビゲーションは残し、フッターのみ消す（はてなブログProのみ）

グローバルナビゲーションとフッターははてなブログproでははずすことができますが、これは通知や記事を書く際に便利ですので外していません。

フッターのpowerd by Hatena Blog　の部分はいらないと思うので、これを消すには、CSSで以下のように記述を追加します。

#footer  {
display: none;
}

フッターとボトムエリアの隙間を消す

デザイン＞フッターで#bottom-editarea下部を作りこんだ場合や、設定でヘッダとフッタを消した場合（はてなブログPro）隙間（余白）が気になる場合があります。

これははてなブログサンプルテーマboilerplate.cssで#containerにmargin-bottom: 30px;が指定されているため、多くのデザインテーマでページ下部に余白があると思います。
これを消すにはデザインCSSに以下のコードを追加してみてください。

#container {
  margin-bottom: 0;
}

「Minimal　Green」では修正済みですので、変更は必要ありません。

コピーライトを表示する

ダッシュボード＞デザイン＞フッタに以下のコードを追記します。ユーザーネームにidや名前などを入れ替えて下さい。

<div id="copyright">Copyright ©ユーザーネーム All rights reserved.</div>

「Minimal Greenでは」CSSに以下のように記述済みですので、色を変更したい場合はbackgroundやcolorを変更してデザインCSSに追記してください。

#copyright {
    padding: 20px;
    text-align: center;
    background: #47a89c;/* 背景色 */
    font-size: 12px;
    color:#fff;/* 文字の色 */
}

フッターメニュー（というか#bottom-editarea)を作りこむ

ややこしいのですがはてなブログではフッタはPowerd by Hatena Blogの部分の

とダッシュボード＞デザイン＞フッタに記述する

 

の部分を同じ「フッタ」と呼んでいるようです。ここでは#bottom-editareaでのフッターメニューの作りこみについて説明します。

記事を読んだ後に読者におすすめしたい関連記事や補足情報を伝えるのにフッターメニューは役立ちます。
ダッシュボード＞カスタマイズ＞フッタに以下のように記述します。

<div id="footer_menu">
  <div class="footer_box01">
    <h3>タイトル</h3>
    <p>文章</p>
  </div>
    <div class="footer_box02">
    <h3>タイトル</h3>
    <p>文章</p>
  </div>
  <div class="footer_box03">
    <h3>リンク</h3>
    <ul>
    <li><a href="">リンク1</a></li>
　　<li><a href="">リンク2</a></li>
　　<li><a href="">リンク3</a></li>
    </ul>
  </div>
  <div class="footer_clear">
  </div>
</div>

とりあえず3カラムにしましたが、footer_box01、02、03を自由に編集をして下さい。box幅や余白もデザインに合わせて変更してみてください。

デザインCSSに追加。

/* bottom-editarea */
#bottom-editarea {
	background-color: #e5e5e5;
	margin: 0;
	padding: 0;
}
#footer_menu {
	width: 1000px;  /*contentの幅と合わせる*/
	margin: 0 auto;
	padding: 40px 0 0 0;
	font-size: 90%;
}
#footer_menu h3 {
	color: #737373;
	font-size: 1.1em;
	margin: 0 0 20px 0;
}
#footer_menu p {
	color: #737373;
	margin: 1em 0;
}
#footer_menu ul {
	text-align: left;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#footer_menu ul li {
	line-height: 1.1em;
	color: #737373;
	margin: 0 0 25px 0;
	padding: 0;
}
#footer_menu ul li a {
	color: #737373;
}
#footer_menu .footer_box01 {
	width: 300px;
	float: left;
	margin: 0;
	margin-bottom:40px;
	padding: 0;
	overflow: hidden;
}
#footer_menu .footer_box01 img {
	max-width: 300px;
	margin: 0 0 20px 0;
	padding: 0;
}
#footer_menu .footer_box02 {
	width: 300px;
	float: left;
	margin: 0 0 40px 30px;
	padding: 0;
	overflow: hidden;
}
#footer_menu .footer_box03 {
	width: 300px;
	float: left;
	margin: 0 0 40px 30px;
	padding: 0;
	overflow: hidden;
}
#footer_menu .footer_clear {
	clear: both;
}

レスポンシブデザインでは、フッターメニューはタブレットやスマートフォンで見ると下に長すぎるため非表示にしています。

/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 919px) {
#footer_menu {
    display: none;
  }
}