【カスタマイズ】フッターにコピーライトを表示する - ジャックのワーホリ研究所【オーストラリア】

f:id:jackchannel:20190514112645j:plain
こんにちはジャックです。

フッターにコピーライトを表示するためのカスタマイズ備忘録。

いつもは他の方のコピペで終了しているカスタマイズですが、今回は僕のブログだと表示に不具合があったため少しだけ自分で編集しました。
完成品はこのブログのフッター部分を確認してください。

コピーライトについて
フッターにコピーライトを表示する
最終的なコード
- HTML
- CSS
まとめ

コピーライトについて

フッターにコピーライトを表示する

何を書けばいいのか

ちなみにアドセンスを導入している方はここにプライバシーポリシーも入れておくといいですね。ついでにお問い合せも入れてます。

導入方法

HTMLとCSSを使って表示させます。こちらのサイトを参考にカスタマイズ（コピペ）させて頂きました。
www.okuni.me

発生した不具合

以前行った別のカスタイマイズと競合してしまうのか、僕のブログだといくつか不具合が発生しました。オークニズム様のカスタマイズで問題なかった場合、これから先は飛ばしてもらって大丈夫です。そして僕のコードを参考にしても責任は取れないので自己責任でお願いします。

ブログタイトルが背景と同化

ブログタイトルの色が変わってしまいました。
<div id="blog-title-content">
この部分がどっかと重複してる気がするので、footer-blog-title-contentに変更。

一部リンク色が背景と同化

お問い合せとプライバシーポリシーが背景と同化してしまいました。
.footer-links a {
color: #FFF;
}
これを追記してリンクの色指定を試みる。

最終的なコード

上記を反映した変更後のコードです。ちょっとした変更ではありますが、素人が探り探り変更したコードです。使用は自己責任で、バックアップを取ってから変更をお願いします。色などの指定方法はオークニズム様で紹介されている通りです。

HTML

<!--コピーライト-->
<footer id="footer">
	<div id="footer-menu">
		<div id="footer-blog-title-content">
       <a href="https://www.jack-workingholiday.com/">ジャックのワーホリ研究所【オーストラリア】</a>
	</div>
	  <nav>
	    <div class="footer-links">
	      <ul>
	         <li>
	             <a href="https://www.jack-workingholiday.com/contact">お問い合わせ</a>
	         </li>
	         <li>
	             <a href="https://www.jack-workingholiday.com/privacypolicy">プライバシーポリシー</a>
	         </li>
	      </ul>
	    </div>
	 </nav>
	     <p class="copyright">© 2017 jackchannel All rights reserved.</p>
	</div>
</footer>

CSS

/* コピーライト */
#bottom-editarea {
    width: 100%;
    margin: 0 auto;
    background: #444;
    padding: 0;
    color: #FFF;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#footer {
    text-align: center;
    color: #ffffff;
    background: #444;
    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: 100%;
}
#footer-blog-title-content a {
    font-size: 100%;
    font-weight: 100px;
    color: #fff;
}
.footer-links a {
    color: #FFF;
}
.footer-links ul {
    list-style: none;
    padding: 0;
}
.footer-links ul li {
    display: inline-block;
    padding: 0 6px;
    font-size: 100%
    box-sizing: border-box;
}
.copyright {
    font-size: 10px;
}

まとめ

フッターにコピーライトを表示するための備忘録でした。アドセンスを使っている場合、コピーライトよりプライバシーポリシーを表示する方が大事だと思います。