今日もボチボチやっていこう

【はてなブログ】フッターにコピーライトを表示させる方法(カスタマイズ)

スポンサーリンク

みなさんこんにちは。

 

はてなブログを運営していると時間が経過していくにつれて、色々なカスタマイズをして見栄えを良くしたくなりますよね。

 

今回は、ブログの一番下フッターにデフォルトで配置されている簡単なブログ名?みたいなのがあると思うんですが、それを非表示にして”できるブログ感”を出していこうと思います。

スポンサーリンク

 

 

何をしたいのか

ます、ブログの一番下にこのようなのがありますよね。

 

これ⤵

f:id:chacha-cat:20210823150606p:plain

 

別に悪くないんですけど、もう少しカッコよくしたいですし、そもそもブログを報告するって…。報告されるような記事はもちろん書きませんが、その報告する方法が自身のブログに配置されているのは、ちょっと…。

 

あと、はてなブログを使ってブログを書いているのは当然なのですが”Powered by Hatena Blog”と言うのもねぇ(笑)

 

そこで、この黒枠で囲まれたものを非表示にして、コピーライトを表示させようと思います。この方法は複数のブロガーさんが色んな方法で紹介していますので、僕も参考にさせてもらいました。

 

あと、この方法は”はてなブログPro”の方に対してになりますので、Proの方で興味のある方はやってみてください。

 

 

フッター 非表示の方法

はてなブログProにしている人は簡単に設定できますが、無料版の方は非表示にできないので注意してください。

 

ステップ1

まず「設定」をクリック。

 

f:id:chacha-cat:20210823153110p:plain

 

ステップ2

次に「詳細設定」をクリック。

 

f:id:chacha-cat:20210823153233p:plain

 

ステップ3

「フッタ」にチェックを入れる。

 

f:id:chacha-cat:20210823153348p:plain

 

最後に必ず下にある「変更する」をクリックしてください。


これで、一番下に表示されているアレが非表示になります。

 

コピーライトとは

著作権を保護するための表記や著作権そのものを意味しているのがコピーライト。

要するに、このブログの著作権は僕が持っていますから、違法にコピーしたりしないでくださいねという意味です。

 

© ⇦これです。

 

コピーライトの設定方法

まず、このコードをコピーしてメモ帳やワード等に貼り付けます。

コード

<!--フッターコピーライト-->

<div id="copyright"> ©2021 ちゃちゃの備忘録的なブログ All rights reserved.</div>

 

その後、このコードを指定の場所に貼りつけますが、必ずメモ帳やワードに一度貼り付けたコードを使用してください。

このブログに記入しているコードを直接貼ると、なぜだか正しく表示されないことがあったので、面倒ですが一度メモ帳やワードを経由した方が確実だと思います。

 

©の後ろ文字は好きなようにしてください。

僕は書いてあるようにブログのタイトルにしましたが、これはユーザーネームだったり、ニックネームだったりと何でも良いようです。色んな方のブログを見に行きましたが、特に統一されている感じはありませんでした。

 

本名でも良いみたいですが、身バレ等ありますので特に何もなければ上記のようにブログ名にするのが無難な気がします。

 

ステップ1

「デザイン」をクリック。

 

f:id:chacha-cat:20210823154735p:plain

 

ステップ2

「スパナマーク」をクリックして、次に「フッタ」をクリック。

 

f:id:chacha-cat:20210823154848p:plain

 

ステップ3

先ほどメモ帳やワードに張り付けたコードを分かりやすく、一番下に貼り付けます。

※既に何かしらコードを貼っている人は、その入力済のコードを消さないように注意してください!

 

f:id:chacha-cat:20210823155057p:plain

 

コードを貼り付けた後は、必ず「変更を保存する」を忘れないように! 

 

この状態で見るとブログの一番下はこのようになっているはずです。

 

f:id:chacha-cat:20210823160042p:plain

 

画面の左の方にあると思うので、場所と背景色や文字色を替えていきます。

 

スポンサーリンク

 

 

表示されたコピーライトのカスタマイズ

このコードをコピーしてメモ帳やワード等に貼り付けます。

コード

/*コピーライト*/

#copyright {

padding: 20px;

text-align: center;

background: #ffffff;/*背景色*/

font-size: 14px;

color:#000000;/*文字の色*/

}

コピーライトの設定方法でも書きましたが、必ずメモ帳やワードに一度貼り付けたコードを使用してください。

このブログに記入しているコードを直接貼ると、なぜだか正しく表示されないことがあったので、面倒ですが一度メモ帳やワードを経由した方が確実だと思います。

 

ステップ1

「デザイン」をクリック。

 

f:id:chacha-cat:20210823154735p:plain

 

ステップ2

「スパナマーク」をクリックして、次に「{}デザインCSS」をクリック。

 

f:id:chacha-cat:20210823160906p:plain

 

ステップ3

先ほどメモ帳やワードに張り付けたコードを分かりやすく、一番下に貼り付けます。

※既に何かしらコードを貼っている人は、その入力済のコードを消さないように注意してください!

 

f:id:chacha-cat:20210823161228p:plain

 

コードを貼り付けた後は、必ず「変更を保存する」をクリック。

 

背景色や文字色を替えたい人は、このカラーコードを参考にすると好きな背景色や文字色になります。

www.colordic.org

 

ちなみに、僕のブログは背景色が白なのでコピーライトの背景も同色のホワイトにして、文字色は背景の白に合う色としてブラックを選びました。

 

すると

f:id:chacha-cat:20210823161643p:plain


このようないい感じに表示され、ブログの中央にも移動しています。ちなみに赤枠は実際のブログには表示されていません。

この赤枠は分かりやすいように強調しただけなので、ご了承ください。

 

その他のカスタマイズはこちらから

chacha-cat.hatenablog.com

 

chacha-cat.hatenablog.com

 

chacha-cat.hatenablog.com

 

 

さいごに

今回はフッターにコピーライトと表示させて”できるブログ感”を出してみました。

 

色んなブロガーさんがしているので、いつか僕もやってみたいと思ってたんですけど、はてなブログProにしたのをきっかけにやってみました。

 

特に難しいことはしないので、はてなブログProにしている方はやってみてはどうでしょうか?

 

それでは。

 

 

最後まで読んでいただきありがとうございます。
よろしければ読者登録よろしくお願いします。

 

にほんブログ村 その他日記ブログ 日々のできごとへ
にほんブログ村