【はてなブログ】ヘッダのデザインをカスタマイズしてみた。

f:id:Kawan0116:20210429140534p:plain

ブログは、バリバリとCSSで改造しています。

4日ほどかけてブログデザインの完成。現在、バージョン3.0.1です。

coool.blue

今日は、はてなブログにおけるヘッダのカスタマイズについて書きたいと思います。

CSS

CSSはこんな感じになります。

#blog-title {
text-align: center;/*テキストを中央揃え*/
background: #0e48b6;/*背景を設定*/
margin-bottom: 2em;/*ヘッダ下の余白の設定*/
padding: 2px;/*ヘッダ内の余白*/
}

#title a {
font-size: 1.5rem;/*ロゴの文字サイズ*/
color: #fff;/*ロゴの色*/
font-family: serif;/*ロゴの書体*/
}

あくまで僕の環境によりますが、上のCSSで大丈夫でした。

その結果、ブログのタイトルのようなデザインになりました。

もし、同じような事をしたいと思っている人は、ヘッダのID、もしくはクラスを見つけて、それらに対してCSSを書けば良いと思います。

バックアップを取ってから

作業はバックアップを取ってから行いました。もし、間違えてデザインがぐちゃぐちゃになると取り戻せないからです。

バックアップを取っていれば、ぐちゃぐちゃになっても直ぐに元に戻せます。

よって、まずはバックアップを取って作業します。ちょっとした余白の調整などもバックアップを取ってから行います。

バックアップなんて1分くらいで出来ますので、もし、作業したい方はバックアップを取ってから作業することをオススメします。

割と簡単だった

CSSには詳しいので、割と簡単でした。一番悩んだのは色ですね。青系にしたかったのですが、試行錯誤して見つけました。

最終的には、Windows10のペイントで色を決めてそして、CSSに書くという形を取りました。

はてなブログのデザインでペイントは超重要だと思いました。

作業時間

作業時間は30分ほどです。先ほど書いたように色選びで時間を使いました。

とても疲れましたね(笑)。

まぁ、ヘッダは超重要ですので、力を込めるべきところですね。

現状、とても満足していますけどね。

ちょっと味気ない感じはしますが、まぁ、シンプルで良いでしょう。

さいごに

ちなみに、フッタは指定していません。デザインの都合上、フッタはない方がいいと判断しています。

先ほど書いたように、今、バージョン3.0.1ですが、今、ちょこちょことカスタマイズしています。

ということで、今日は僕が行ったヘッダのデザインをカスタマイズしてみたというお話しでした。