晴耕雨読

現役の税理士が教えるお金の貯め方、増やし方のブログです!

MENU

【カスタマイズ】はてなブログにコピーライトのあるフッターを設置する

f:id:zeirishi-kondo:20190405183610p:plain

フッター設置方法 

 

晴耕雨読です。

 

さて、はてなブログのフッターにコピーライトを表示させたいと思い、色々調べていたところ、カスタマイズにより、独自にフッターを作成してコピーライトを表示させることができることがわかりました。

 

今回、こんな感じで出来上がりました。

 

f:id:zeirishi-kondo:20190405183951p:plain

なかなかいいんではないでしょうか・・・自画自賛(笑)

 

コピーライトだけでなく、プライバシーポリシーもフッターに表示できましたので、その方法についてお伝えしたいと思います。

 

ちなみにフッターは記事の下の部分で、コピーライトはCopyright © 2019 晴耕雨読 All Rights Reserved.の部分を言います。

 

f:id:zeirishi-kondo:20190404121512p:plain

 

この図は、ほとんどの人にとっては当たり前だと思いますが、自分の場合、昨年の5月まではサイト作成についてズブの素人でしたので、もしかしたら昨年の自分と同じような境遇の人がいたら少しは役立つかなと思い、上の図を作成してみたわけです。

 

当初は、ヘッダーフッターが何を意味するのかさえ知りませんでした・・・笑

 

ちなみに、昨年5月まではワードとエクセルが使えるくらいのレベルでしたよ。

 

でも昨年5月からワードプレスをさわり始めたおかげで、色々とサイト作成についてもわかってきました。

 

覚え方

先程もお話したようにフッター記事の下のエリアを言います。

FOOT(フット)が足を意味しますから、フッターの名前の由来はおそらくFOOTだと思います。

 

ちなみに記事の上がヘッダーです。
HEAD(ヘッド)は頭を意味しますから、ヘッダーの名前の由来は多分HEADですね。

  

また記事の右はサイドバーと言います。そのまんまですね。

 

それでは作成の手順を記載します。

 

手順

 1⃣まずはダッシュボードからデザインを選択します。

f:id:zeirishi-kondo:20190404140553p:plain

 

2⃣その後、カスタマイズ、そしてデザインCSSを選択します。

f:id:zeirishi-kondo:20190405175409p:plain


3⃣そこに次のコードを書き込みます。


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

 

#好きな色のコードの部分のは、次のサイトから選んでカスタマイズしてください。

ちなみに白は、#FFFFFFとなります。

html-color-codes.info

 

4⃣その後、カスタマイズのフッタを選択します。

f:id:zeirishi-kondo:20190404140559p:plain

 

5⃣そこに次のHTMLを記入します。

 

<!-- コピーライト -->
<div id="copyright"> Copyright © 2019 自分のサイト名 All Rights Reserved.</div>
 

プライバシーポリシーの設置方法

プライバシーポリシーは固定ページで作ります。

 

ダッシュボードから固定ページを選択し、プライバシーポリシーを作成しました。

詳細はこちらに書いてありましたので、ご参考にしてください。

www.okuni.me

オークニズムさん、参考にさせていただきました。

ありがとうございました。 

 

表示はどうするのか?

さて、プライバシーポリシーを作ったのはいいのですが、表示に困ってしまいました。

 

サイドバーに表示させている方もいましたが、僕はフッターにプライバシーポリシーを表示させたいと思い、色々調べた結果、先程のHTMLを次のように修正しました。

 

<!-- コピーライト -->
<div id="copyright"> Copyright © 2019 自分のサイト名 All Rights Reserved.
<a href="プライバシーポリシーのURL">プライバシーポリシー</a></div> 

 

文字の色の修正

しかし、また困ったことが起こりました。

 

そのまま入力すると、プライバシーポリシーの文字の色が黒くなってしまいました。

 

正直みえずらいのです。

 

最終的にはフッターのHTMLを次のように書き換えて文字の色を修正しました。

 

<!-- コピーライト -->
<div id="copyright"> Copyright © 2019 晴耕雨読 All Rights Reserved.
<a style="color: #FFFFFF;" href="https://www.kondo-zeirishi.tokyo/privacy-policy">プライバシーポリシー</a></div>

 

実は文字の色を変えることについては、Aさんに教えて頂きました。

 

Aさんありがとうございます。

 

2つのフッター

この結果、次のように表示されますが、今回作成したフッターの下に、はてなブログ独自のフッターも表示されてしまいます。

f:id:zeirishi-kondo:20190405181342p:plain

しかし、PROの方であれば下のフッターは表示させないことができます。

 

方法は、ダッシュボード ⇒ 設定 ⇒ 詳細設定で次のところにチェックを入れます。

f:id:zeirishi-kondo:20190405181528p:plain

この結果、はてなブログのフッターは表示させないことができました。

f:id:zeirishi-kondo:20190405183951p:plain

 ようやく完成です!!

 

まとめ

はてなブログコピーライトの入ったフッターを作成する場合には、デザインCSSにご紹介したコードを記入するとともに、その後フッターにご紹介したHTMLコードを入力することにより表示させることができます。

 

またプライバシーポリシーは固定ページで作成することができます。

 

ちょっと苦労しましたが、色々なサイトを参考にして、ようやくフッターにコピーライトとプライバシーポリシーを表示させることができました。

 

同じようにカスタマイズしようとしている方にとって、少しでもお役に立てる情報でしたら嬉しいです。

それでは!!