はてなブログのフッターにコピーライトを導入する方法を公開しますの!

スポンサーリンク

スポンサーリンク

スポンサーリンク

みんなー!うしるだよー☆

 

今回はねえ・・・

 

はてなブログにフッターにコピーライトの導入方法をみんなに教えちゃうんだ♡

 

このうしるきゅんがおしえてあげるんだから刮目して見てよね! 

 

フッターにコピーライトという名の自己顕示力の象徴を入れたいの!

f:id:UrushiUshiru:20181013214949j:plain

愛しのラブイン愛内(id:lovein-ainai)さんのブログだよ☆

ワードプレスのフッターには、必ずフッターにコピーライトが表示されているのですが、はてなブログにはそれが表示されてません。

日本の著作権法では、「無方式主義」を採用しているので著作物が創作された時点から発生するものとして定義されているので、わざわざ書く必要はありません。しかし、自分は著作権を意識してるとか、誰が著作権を所有しているという権利を主張するためにあった方がいいと思います。

 

いや・・・違う・・・これは本音じゃない・・・。

 

本音はこうだ!!

 

のブログのイラスト写真も文章も俺のものだあああああああああああああああああ!!

 

と自己顕示するためでした♡

 

つまり、風子たんもユキたんもシャルたんもうしるきゅんの所有物ってことだよ!!

 

この私があなたなんかの所有物だなんて侮辱も同然ですよ?

 

ただで済むと思わない方がいいですよ?う・し・る・さん?

 

あああああああああああああああああ!!もう既にただで済んでないでござるよおおおおおおおおお!!

 

法律上そうなってるんだから仕方ないでござるよおおおおおおおおおおお!!

 

・・・

 

フッターへのコピーライト表記の導入方法(PC版)

うえの (id:uenoyou111)さんのブログの以下の記事を参考に導入しようと思いました。しかし、このフッターのデザインだと正直あまり目立たないなあと思いました。

 

うえのさん、参考にしなくてごめんなさいなの・・・ゆるちて・・・

www.uenoyou.net

 

 調べてみると⇓のサイトで良い感じのフッターデザインがあったので、こちらを参考にして導入してみようと思います。

www.okuni.me


 

f:id:UrushiUshiru:20181013225102j:plain

のデザインのフッターを導入します。

導入の実験としてサブブログの「シャルの甘美なる日々」を使用します。

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の取得

f:id:UrushiUshiru:20181013235333j:plain

はてなフォトライフの画像を使用する場合は、使用したい画像のページに移動して、画像の上で「右クリック」⇒「画像のアドレスをコピー」とすると画像のURLが取得できるので、5行目の「src="画像のURL"」の部分に貼り付けます。

 

フッタのhtml記述欄に貼り付け

f:id:UrushiUshiru:20180528234811j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②フッタ」に上記のhtmlコードを貼り付けます。

「③変更を保存」をクリックして設定を保存します。

 

 フッターのCSSコード

/* コピーライト */
#bottom-editarea {
    width: 100%;
    margin: 0 auto;
    background: #444444;
    padding: 0;
    color: #ffffff;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#footer {
    text-align: center;
    color: #ffffff;
    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: 0px;
    font-weight: 100px;
    color: #ffffff;
}
.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;
}
.copyright {
    font-size: 10px;
}

/*自分で設定したフッターとページ下の余白を消す*/
#container {
  margin-bottom: 0;
}

 上記のCSSコードをコピーします。

上記コードの「background: #6桁の数字;」が背景色、「color: #6桁の数字;」が文字色です。

以下のカラーコードを参考にして好きな色に適宜変更してください。

www.colordic.org

 

 デザインCSSにコードの貼り付け

f:id:UrushiUshiru:20180416005536j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

「③変更を保存」をクリックして設定を保存します。

 

f:id:UrushiUshiru:20181014003841j:plain

 以上でフッターの導入は完了です!

 

つまり、風子たんはうしるきゅん物、ユキたんもうしるきゅんの物、シャルたんもうしるきゅんの物、うしるきゅんもうしるきゅんのものってことだよ!! 

 

あああああああああああああああああ!!

 

シャルちゃんは私の愛玩動物で、風子さんは私の・・・♡ですよ?

 

分かってますか?うしるさん?

 

顔を赤らめるな気持ち悪い!!

 

私はあんたの愛玩動物じゃないわよ!バカタレ!!

 

・・・

 

フッターへのコピーライト表記の導入方法(スマホ版)

f:id:UrushiUshiru:20181014010258j:plain

のデザインのフッターを導入します。

上記のコードだと上手く挿入できなかったので、いい感じにフッターを導入されていた相原美柑 (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記述欄に貼り付け

f:id:UrushiUshiru:20180421005458j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に変更した上記htmlコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

 

スマホ版フッターのCSSコード

<style type="text/css">

/*はてなブログをはじめよう!を消す*/
.footer-action-wrapper
{
    display: none;
}
/*はてなブログ運営関連リンクを消す*/
.touch-item-list
{
    display: none;
}
/*はてな純正「上へ」を消す*/
.pagetop.section
{
    display: none;
}
/*フッターメニューを消す*/
#footer-menu
{
    display: none;
}
/*Powered by Hatena Blog.を消す*/
.footer.section.footer-service-link
{
    display: none;
}

/* コピーライト */
#bottom-editarea .section /*コピーライトサイズ*/
{
    width: 100%;
}

#bottom-editarea {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #000000;
    display: -webkit-flex;
    display: flex;
    -webkit-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

 

f:id:UrushiUshiru:20181014023953j:plain

79行目は、複合メニューを導入している場合にコピーライトが隠れてしまう対策のためのもので、導入してない場合は削除しても問題ありません。

複合メニューの導入方法は以下の記事を参照してください。

www.itjigoku.com

 

 フッターの不要な部分をあらかじめ消している場合は、3行目から~27行目は不要ですので適宜消してください。

詳しくは以下の記事を参照してください。

www.hucl.jp

 

f:id:UrushiUshiru:20180416171142j:plain

6.はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に変更した複合メニューバーのコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

 

f:id:UrushiUshiru:20181014024411j:plain

 以上でスマホ版のフッターの導入は完了です!

 

つまり!

 

風子さんも、シャルちゃんも私のもので、うしるさんは害虫ってことですよね?

 

ね?

 

あ、はい・・・

 

 まとめ

うしるきゅんの自己顕示力を満たすフッターを導入したシャルたんのブログも更新したから刮目してね! 

www.charlottehibi.com

 

べ、別に見てくれてもいいし、見なくてもいいのよ?

 

見ても見なくてもいいってどういうこと!?

 

アンタが勝手に決めるんじゃなわよ!私のブログよ!

 

絶対見に行きなさいよね!アンタたち!!

 

うしるきゅんのを蹴りながら宣伝しないでくれるかなああああああああああああ!!

 

ふん!潰れてなくなっちゃえば見た目通り性別になれるんだからいいじゃない!

 

・・・ 

 

 

最後まで読んでいただきありがとうございました♡