Wordpress ではフッターに情報を載せるのが当たり前のようです。
はてなブログしかしらない私にはあまり馴染みがなかったのですが...。
フッタが格好良いブログに触発されて、カスタマイズしてみました。
もちろんコピペだけです。
フッターに記載したい内容を記述する
まずはフッターに記述したい内容を決める必要がありますが、今回はとりあえずそれもコピペで。
以下のコードを「デザイン」→「カスタマイズ」→「フッタ」にコピペします。
フッターに記載する内容の記述
<!-- フッター画像 -->
<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">Copyright(C) 2006-2019 Maximal-Life All rights reserved.</p>
</div>
</footer>
フッターに記述する内容、リンク先などはココで指定されます。
赤字の部分は個別に書き換える必要があります。
フッターのデザインを整える
フッター部分の文字の大きさ、色などのデザインを整えます。
「デザイン」→「カスタマイズ」→「デザイン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: #000;
background: #ffffff;
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: 30px;
font-weight: 100;
color: #000;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links ul li {
display: inline-block;
padding: 0 6px;
font-size: 15px;
box-sizing: border-box;
}
.copyright {
font-size: 15px;
}
字の大きさ、色などは、好みで変更できます。
Before：
After：
今回は、スッキリと色、画像などを入れずにタイトルとリンクのみを表示しました。
Before にあった”お名前.com"の広告があるとフッタが分割された感じになってしまうので外しちゃいました。
根本的な解決策はスキルが上がったら見つかることでしょう？
今回は以下のブログを参考にさせて頂きました。
【はてなブログカスタマイズあるある】だいたい皆、フッターは無視 - オークニズム
ありがとうございました。
↓ ランキングに参加しています。よろしければポチッとして下さい。
