Someday Somewhere

A little something to say in my everyday life

フッターにコピーライトを入れてみた

サイトを見ていると、画面一番下、いわゆるフッターにコピーライトが明記されているのをよく見かけます。

こんなの(↓)
Copyright ©〇〇〇〇 All rights reserved

自分のサイトはどうなっているのか気にもせずにいたのですが、考えてみれば、このサイトにはフッターがないので当然コピーライトもありません。

コピーライトとは

このコピーライト、実際のところ必要なのかどうなのか。 個人それとも法人など、そのサイトがどんな類いのものなのかにもよるのかもしれませんが、いまいちはっきりわかりません。

このコピーライトのことをさらっと説明してくれているサイトさん(↓) hajipion.com

コピーライトの書き方なども書かれているので参考になると思います。

フッターに挿入する方法

まあ、「どこのサイトも入れてるから・・・」といったよくある理由で、当ブログでもフッターに入れてみることにしました。

1)フッターにコードを書き込む
ダッシュボード→デザイン→カスタマイズ→フッタと進み、以下のコードを書き込む。

<!-- コピーライト --> <div id="copyright"> © 2016-2019 〇〇〇〇〇 </div>

2016-2019:サイトの発行年等に書き換えてください
〇〇〇〇〇:ご自分のサイト名を入れてください

ちなみに、コピーライトに明記した内容ですが、上記サイトさんの記事を読み、すっきり、そして重複していないタイプのものにしました。

2)デザインCSSにコードを書き込む
ダッシュボード→デザイン→カスタマイズ→デザインCSSと進み、以下のコードを書き込む。

/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
background: #ffecf5;/*背景色*/
font-size: 14px;
color:#888;/*文字の色*/
}

上記コード内にある文字の色とか背景色は当ブログで使用しているものです。 使用されるサイトに合った色に変更してください。

これでコピーライトの出来上がりです。
と終わりにしようと思ったのですが、ついでに「プライバシーポリシー」と「お問い合わせ」というリンクもフッターに移すことにしました。

フッターに「プライバシーポリシー」と「お問い合わせ」リンクを貼る方法

方法と言うほどのこともなく、フッターに書き込んだコードにリンクを付け足すだけです。

変更前 <!-- コピーライト -->
<div id="copyright"> © 2016-2019 〇〇〇〇〇</div>
変更後 <!-- コピーライト -->
<div id="copyright"> © 2016-2019 〇〇〇〇〇 &nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://・・・URL・・・">プライバシーポリシー</a>
&nbsp;&nbsp;&nbsp;
<a href="https://・・・URL・・・">お問い合わせ</a> </div>

コピーライトとリンクの間に&nbsp;を入れることによってスペースを作れます。 &nbsp;の数でスペースを調節してください。

これで当ブログもフッターを備えたサイトになりました。 はてなブログProに移行した時「フッターを表示しない」を選択して以来、フッターがないっていうのもなんだかなーと思っていたのでちょうどよかったです。

こんなふうになりました(↓)。
f:id:tsukisai:20190316143933p:plain