はてなブログを運営していると時間が経過していくにつれて、色々なカスタマイズをして見栄えを良くしたくなりますよね。
今回は、ブログの一番下フッターにデフォルトで配置されている簡単なブログ名?みたいなのがあると思うんですが、それを非表示にして”できるブログ感”を出していこうと思います。
ブログ初心者の僕でも簡単にできたので、是非やってみてください。
この記事ではフッターをカスタマイズして©を表示させる方法を簡単に図を使いながら説明していきます。
- はてなブログのフッターをカスタマイズしたい
- フッターをカスタマイズして非表示にする
- コピーライトとは
- フッターをカスタマイズしてブログにコピーライトを表示させる方法
- 表示したコピーライトのカスタマイズ
- さいごに
はてなブログのフッターをカスタマイズしたい
ます、ブログの一番下にこのようなのがありますよね。
これ⤵
別に悪くないんですけど、もう少しカッコよくしたいですし、そもそもブログを報告するって…。
報告されるような記事はもちろん書きませんが、その報告する方法が自身のブログに配置されているのは、ちょっと…。
あと、はてなブログを使ってブログを書いているのは当然なのですが”Powered by Hatena Blog”と言うのもねぇ(笑)
そこで、この黒枠で囲まれたものを非表示にして、コピーライトを表示させようと思います。この方法は複数のブロガーさんが色んな方法で紹介していますので、僕も参考にさせてもらいました。
あと、この方法は”はてなブログPro”の方に対してになりますので注意してください。
無料版を使っているけど興味のある方は別記事として、はてなブログ無料版・有料版(Pro)のメリットやデメリットを書いた記事があるので参考にしてもらえればと思います。
ちなみに無料版はてなブログでも収益化はできますが、有料版の方が圧倒的に可能性が広がるので、この際に検討してみてはいかがでしょうか。
【参考記事】
【はてなブログ】無料版と有料版(Pro)の違いとは|ブログ初心者ははてなブログで - ちゃちゃの備忘録的なブログ
フッターをカスタマイズして非表示にする
はてなブログProにしている人は簡単に設定できますが、無料版の方は非表示にできないので注意してください。
ステップ1
まず「設定」をクリック。
ステップ2
次に「詳細設定」をクリック。
ステップ3
「フッタ」にチェックを入れる。
最後に必ず下にある「変更する」をクリックしてください。
これで、一番下に表示されているアレが非表示になります。
コピーライトとは
著作権を保護するための表記や著作権そのものを意味しているのがコピーライト。
要するに、このブログの著作権は僕が持っていますから、違法にコピーしたりしないでくださいねという意味です。
© ⇦これです。
フッターをカスタマイズしてブログにコピーライトを表示させる方法
まず、このコードをコピーしてメモ帳やワード等に貼り付けます。
<!--フッターコピーライト-->
<div id="copyright"> ©2021 ちゃちゃの備忘録的なブログ All rights reserved.</div>
その後、このコードを指定の場所に貼りつけますが、必ずメモ帳やワードに一度貼り付けたコードを使用してください。
このブログに記入しているコードを直接貼ると、なぜだか正しく表示されないことがあったので、面倒ですが一度メモ帳やワードを経由した方が確実だと思います。
©の後ろ文字は好きなようにしてください。
僕は書いてあるようにブログのタイトルにしましたが、これはユーザーネームだったり、ニックネームだったりと何でも良いようです。
色んな方のブログを見に行きましたが、特に統一されている感じはありませんでした。
本名でも良いみたいですが、身バレ等ありますので特に何もなければ上記のようにブログ名にするのが無難な気がします。
ステップ1
「デザイン」をクリック。
ステップ2
「スパナマーク」をクリックして、次に「フッタ」をクリック。
ステップ3
先ほどメモ帳やワードに張り付けたコードを分かりやすく、一番下に貼り付けます。
※既に何かしらコードを貼っている人は、その入力済のコードを消さないように注意してください!
コードを貼り付けた後は、必ず「変更を保存する」を忘れないように!
この状態で見るとブログの一番下はこのようになっているはずです。
画面の左の方にあると思うので、場所と背景色や文字色を替えていきます。
表示したコピーライトのカスタマイズ
このコードをコピーしてメモ帳やワード等に貼り付けます。
/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
background: #ffffff;/*背景色*/
font-size: 14px;
color:#000000;/*文字の色*/
}
コピーライトの設定方法でも書きましたが、必ずメモ帳やワードに一度貼り付けたコードを使用してください。
このブログに記入しているコードを直接貼ると、なぜだか正しく表示されないことがあったので、面倒ですが一度メモ帳やワードを経由した方が確実だと思います。
ステップ1
「デザイン」をクリック。
ステップ2
「スパナマーク」をクリックして、次に「{}デザインCSS」をクリック。
ステップ3
先ほどメモ帳やワードに張り付けたコードを分かりやすく、一番下に貼り付けます。
※既に何かしらコードを貼っている人は、その入力済のコードを消さないように注意してください!
コードを貼り付けた後は、必ず「変更を保存する」をクリック。
背景色や文字色を替えたい人は、このカラーコードを参考にすると好きな背景色や文字色になります。
ちなみに、僕のブログは背景色が白なのでコピーライトの背景も同色のホワイトにして、文字色は背景の白に合う色としてブラックを選びました。
すると
このようないい感じに表示され、ブログの中央にも移動しています。ちなみに赤枠は実際のブログには表示されていません。
この赤枠は分かりやすいように強調しただけなので、ご了承ください。
さいごに
今回はブログのフッターにコピーライトと表示させてみました。
色んなブロガーさんがしているので、いつか僕もやってみたいと思ってたんですけど、はてなブログProにしたのをきっかけにやってみました。
ただ、はてなブログProにしていないとできないことなので、この際にはてなブログProに変更してみてはいかがでしょうか。