はてなブログに自作のフッタを設置した

hatenaロゴ

はてなブログのフッタは、グローバルヘッダーと違って便利な機能などはありませんが、その分軽いので、フッタを消しても消さなくてもブログの表示にあまり影響はないかと。

ただ、フッタを表示すると、もれなく「はてなブログをはじめよう!」という開設リンクのスクリプトが強制的に挿入されてしまうので...。そういうのはあまり好きじゃないなぁ。

そんなわけで、はてなブログ標準のフッタを表示しないで(はてなブログ開発ブログ - ブログのヘッダとフッタを非表示にできるようにしました(有料プラン))、そのHTMLコードを流用して、自分でフッタをつくって設置してみました。

(HTMLのコード:デザイン→カスタマイズ→フッタに入力)

HTML
<footer id="footer">
    <p><a href="https://simadzu.hatenablog.com/"><img src="https://cdn.profile-image.st-hatena.com/users/simadzu/profile.png" alt="simadzu’blog" />simadzu’blog</a>
    Powered by
    <a href="https://hatenablog.com/">Hatena Blog</a></p>
</footer>

(CSSのコード:デザイン→カスタマイズ→デザインCSSに入力)

CSS
/* 横幅いっぱいにフッタを広げる */
#footer {
	position: absolute;
	left: 0;
	width: 100%;
}

/* フッタ本体の設定 */
#footer {
    text-align: center;
    line-height: 1.5;
    padding-top: 8px;
    padding-bottom: 9px;
    color: #fff;
    font-size: 12px;
    background: #000;
}

#footer p {
    margin: 0;
}

#footer a {
    margin: 0 4px;
    color: #fff;
}

#footer img {
    width: 20px;
    height: 20px;
    margin: 0 4px;
}

なぜか、フッタを横幅いっぱいに表示できなかったので、画面横幅いっぱいに広がるヘッダー要素を参考に対策してうまく表示できました。