みんなー！うしるだよー☆
今回はねえ・・・
はてなブログにフッターにコピーライトの導入方法をみんなに教えちゃうんだ♡
このうしるきゅんがおしえてあげるんだから刮目して見てよね！
フッターにコピーライトという名の自己顕示力の象徴を入れたいの！
愛しのラブイン愛内(id:lovein-ainai)さんのブログだよ☆
ワードプレスのフッターには、必ずフッターにコピーライトが表示されているのですが、はてなブログにはそれが表示されてません。
日本の著作権法では、「無方式主義」を採用しているので著作物が創作された時点から発生するものとして定義されているので、わざわざ書く必要はありません。しかし、自分は著作権を意識してるとか、誰が著作権を所有しているという権利を主張するためにあった方がいいと思います。
いや・・・違う・・・これは本音じゃない・・・。
本音はこうだ！！
このブログのイラスト写真も文章も俺のものだあああああああああああああああああ！！
と自己顕示するためでした♡
つまり、風子たんもユキたんもシャルたんもうしるきゅんの所有物ってことだよ！！
この私があなたなんかの所有物だなんて侮辱も同然ですよ？
ただで済むと思わない方がいいですよ？う・し・る・さん？
あああああああああああああああああ！！もう既にただで済んでないでござるよおおおおおおおおお！！
法律上そうなってるんだから仕方ないでござるよおおおおおおおおおおお！！
・・・
フッターへのコピーライト表記の導入方法（PC版）
導入するフッターのデザイン
今回導入するのは、上記の画像のようなロゴ、問合せリンク、プライバシーポリシーリンクが付属してるコピーライトフッターを導入します。PC版とスマホ版の両方に。
導入の実験としてサブブログの「シャルの甘美なる日々」を使用します。
www.charlottehibi.com
なんで私のブログなのよ！！
だってシャルたんは実験動物だからだもん！
私は実験動物じゃないわよ！馬鹿にするなこのオカマ！！
あああああああああああああああああ！！
そこは蹴っちゃいやよおおおおおおおおおおお！・・・・・・
ざまあみなさい！！
フッターのhtmlコード
<footer id="footer">
<div id="footer-menu">
<div id="blog-title-content">
<a href="https://www.charlottehibi.com/"><img class="hatena-fotolife" title="ブログ名" src="画像のURL" alt="ブログ名" style="height: 50px;" /></a>
</div>
<nav>
<div class="footer-links">
<ul>
<li>
<a href="https://www.itjigoku.com/entry/work">お仕事のご依頼</a>
</li>
<li>
<a href="https://www.charlottehibi.com/contact">お問い合わせ</a>
</li>
<li>
<a href="https://www.charlottehibi.com/privacypolicy">プライバシーポリシー</a>
</li>
</ul>
</div>
</nav>
<p class="copyright">© 2018 ユーザーネーム or サイト名 All rights reserved.</p>
</div>
</footer>
上記のhtmlコードをコピーします。
5行目、11行目、14行目、17行目は自分のサイトのURLに適宜変更してください。
5行目のサイト名や、画像のURLも適宜変更してください。
22行目は、年、ユーザーネーム or サイト名を適宜変更してください。
画像のURLの取得
はてなフォトライフの画像を使用する場合は、使用したい画像のページに移動して、画像の上で「右クリック」⇒「画像のアドレスをコピー」とすると画像のURLが取得できるので、5行目の「src="画像のURL"」の部分に貼り付けます。
フッタのhtml記述欄に貼り付け
はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②フッタ」に上記のhtmlコードを貼り付けます。
「③変更を保存」をクリックして設定を保存します。
フッターのCSSコード
#bottom-editarea {
width: 100%;
margin: 0 auto;
background: #444444;
padding: 0;
color: #fff;
display: flex;
display: flex;
justify-content: space-between;
justify-content: space-between;
}
#footer {
text-align: center;
color: #fff;
background: #444444;
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: 00px;
font-weight: 100;
color: #fff;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links ul li {
display: inline-block;
padding: 0 6px;
font-size: 14.5px;
box-sizing: border-box;
}
.footer-links ul li a{
color: #ffffff;
}
.copyright {
font-size: 10px;
}
#container {
margin-bottom: 0;
}
上記のCSSコードをコピーします。
上記コードの「background: #6桁の数字;」が背景色、「color: #6桁の数字;」が文字色です。
以下のカラーコードを参考にして好きな色に適宜変更してください。
www.colordic.org
デザインCSSにコードの貼り付け
はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。
「③変更を保存」をクリックして設定を保存します。
以上でフッターの導入は完了です！
つまり、風子たんはうしるきゅん物、ユキたんもうしるきゅんの物、シャルたんもうしるきゅんの物、うしるきゅんもうしるきゅんのものってことだよ！！
あああああああああああああああああ！！
シャルちゃんは私の愛玩動物で、風子さんは私の・・・♡ですよ？
分かってますか？うしるさん？
顔を赤らめるな気持ち悪い！！
私はあんたの愛玩動物じゃないわよ！バカタレ！！
・・・
フッターへのコピーライト表記の導入方法（スマホ版）
↑のデザインのフッターを導入します。
上記のコードだと上手く挿入できなかったので、いい感じにフッターを導入されていた相原美柑 (id:anmin_1990)さんに相談して、上記のソースコードを改良していただきました！
ありがとうございました！
み・・・みんちゃん・・・ハァハァ・・・♡
www.hucl.jp
www.hucl.jp
スマホ版フッターのhtmlコード
<footer id="footer">
<div id="copyright">
<div id="blog-title-content">
<a href="https://www.charlottehibi.com/"><img class="hatena-fotolife" title="ブログ名" src="画像のURL" alt="ブログ名" style="height: 50px;" /></a>
</div>
<nav>
<div class="footer-links">
<ul>
<li>
<a href="https://www.itjigoku.com/entry/work">お仕事のご依頼</a>
</li>
<li>
<a href="https://www.charlottehibi.com/contact">お問い合わせ</a>
</li>
<li>
<a href="https://www.charlottehibi.com/privacypolicy">プライバシーポリシー</a>
</li>
</ul>
</div>
</nav>
<p class="copyright">© 2018 ユーザーネーム or サイト名 All rights reserved.</p>
</div>
</footer>
上記のhtmlコードをコピーします。
5行目、11行目、14行目、17行目は自分のサイトのURLに適宜変更してください。
5行目のサイト名や、画像のURLも適宜変更してください。
22行目は、年、ユーザーネーム or サイト名を適宜変更してください。
スマホのフッタのhtml記述欄に貼り付け
はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に変更した上記htmlコードを貼り付けます。
貼り付けたら「③変更を保存する」をクリックして保存します。
スマホ版フッターのCSSコード
<style type="text/css">
.footer-action-wrapper
{
display: none;
}
.touch-item-list
{
display: none;
}
.pagetop.section
{
display: none;
}
#footer-menu
{
display: none;
}
.footer.section.footer-service-link
{
display: none;
}
#bottom-editarea .section
{
width: 100%;
}
#bottom-editarea {
width: 100%;
margin: 0;
padding: 0;
color: #000000;
display: flex;
display: flex;
justify-content: space-between;
justify-content: space-between;
}
#blog-title-content
{
background-color: #444444;
text-align: center;
}
#blog-title-content a {
font-size: 0px;
font-weight: 100;
color: #ffffff;
}
.footer-links{
background: #444444;
text-align: center;
}
.footer-links ul {
margin: 0;
list-style: none;
padding: 1em;
}
.footer-links ul li {
display: inline-block;
padding: 0 6px;
font-size: 14.5px;
box-sizing: border-box;
}
.footer-links ul li a{
color: #ffffff;
}
.copyright {
margin: 0;
background: #444444;
font-size: 10px;
text-align: center;
padding-bottom: 30px;
color: #ffffff;
}
.profile-description {
width: 93.75%;
margin-left: 3.125%;
}
</style>
上記のhtmlコードをコピーします。
上記コードの「background: #6桁の数字;」が背景色、「color: #6桁の数字;」が文字色です。
以下のカラーコードを参考にして好きな色に適宜変更してください。
www.colordic.org
79行目は、複合メニューを導入している場合にコピーライトが隠れてしまう対策のためのもので、導入してない場合は削除しても問題ありません。
複合メニューの導入方法は以下の記事を参照してください。
www.itjigoku.com
フッターの不要な部分をあらかじめ消している場合は、3行目から～27行目は不要ですので適宜消してください。
詳しくは以下の記事を参照してください。
www.hucl.jp
6.はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に変更した複合メニューバーのコードを貼り付けます。
貼り付けたら「変更を保存する」をクリックして保存します。
以上でスマホ版のフッターの導入は完了です！
つまり！
風子さんも、シャルちゃんも私のもので、うしるさんは害虫ってことですよね？
ね？
あ、はい・・・
まとめ
うしるきゅんの自己顕示力を満たすフッターを導入したシャルたんのブログも更新したから刮目してね！
www.charlottehibi.com
べ、別に見てくれてもいいし、見なくてもいいのよ？
見ても見なくてもいいってどういうこと！？
アンタが勝手に決めるんじゃなわよ！私のブログよ！
絶対見に行きなさいよね！アンタたち！！
うしるきゅんのを蹴りながら宣伝しないでくれるかなああああああああああああ！！
ふん！潰れてなくなっちゃえば見た目通り性別になれるんだからいいじゃない！
・・・
最後まで読んでいただきありがとうございました♡
