3日ほど前に、はてなブログの見出しをカスタマイズしました。
今まで何度もカスタマイズしていたのですが、僕史上最高の出来栄え(笑)。
今日は、はてなブログの見出しをカスタマイズした事に関して書いてみたいと思います。
最初に言っておきます
はてなブログの見出しをカスタマイズするには「CSS」を使います。
「CSSってなんだろう・・・」
と思う方は、はてなブログの見出しをカスタマイズするのは中止したほうが良いです。
また、ネットではてなブログの見出しのカスタマイズ方法を解説されております。
しかし、デザインテンプレートが異なると上手く行かない場合もあります。
なので、あまりCSSの知識がない方は、はてなブログの見出しをカスタマイズのは中止しておきましょう。
また、読者は、はてなブログの見出しを見にきているのではなくて、内容を見にきます。
最低限、「これは見出しだな」と確認出来るなら、それで良いと思いますけどね。
見出しのカスタマイズ
これは、あくまで趣味の世界です。
僕はCSSを知っているので、趣味で見出しを変えてみました。こんな感じになります。
これがカスタマイズした見出しです
CSSの紹介をしますね。あくまで一例です。皆さまのはてなブログの見出しのカスタマイズの役には立ちませんが(笑)。
何故なら、先程書いたようにデザインテンプレートが異なると全く出来ないからです。
.entry-content h2 {
font-size: 2.3rem;
border: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 20px 0;
text-align: center;
}
はじめからborderが設定されていたので、一旦「border: 0;」にしてから再度borderを適用しました。
小見出しのカスタマイズ
次に、小見出しのカスタマイズです。
これがカスタマイズした小見出しです
CSSはこんな感じです。
.entry-content h3 {
font-size: 2rem;
background: #000;
color: #fff;
padding: 10px;
}
背景の色「background: #000」で背景色を指定。これは黒色です。
また、文字色「color: #fff」で白色にしています。
小見出しに関してはこのような形です。
重要なポイント
つまるところ、「これは見出しだ」「ここは本文か」と分かれば全然良いのです。
見出しは大きいフォントサイズにする、本文は、見出しより小さなフォントサイズにするなど、違いが分かればよいのです。
それなのに、僕はなぜ、はてなブログの見出しをカスタマイズしたのかと言うと、先程書いたように、単に趣味だからです。
趣味ではてなブログの見出しをカスタマイズしました。
今のところはそれで満足です。
飽きたらまた違うモノにします。
まとめ
今回は、はてなブログの見出しをカスタマイズしたとお話してきました。
ポイントは下記になります。
- はてなブログの見出しをカスタマイズするにはCSSの知識が必要
- デザインテンプレートによってCSSは異なる場合がある
- CSSの勉強をして良いかも
よって、はてなブログの見出しのカスタマイズをしたい方は、ネットなどでCSSの勉強をすると良いでしょう。
CSSは結構奥が深いですが、見出しのカスタマイズにポイントを置いて、そこから勉強を始めると良いですよ。
今日はこの辺で終わりたいと思います。最後までお付き合い頂きありがとうございました。