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

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

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

そんなわけで、はてなブログ標準のフッタを表示しないで（はてなブログ開発ブログ - ブログのヘッダとフッタを非表示にできるようにしました（有料プラン））、その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
/* 横幅いっぱいにフッタを広げる */
#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;
}

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