Bloggerで見出しをカスタマイズする

2019/12/16

Blogger

t f B! P L

(★追記:テーマにAwesome Inc.を使っていたときの記事です。)

テーマ(テンプレート)ごとに、カスタマイズも違うようだということがようやくわかってきました。(遅い! 遅すぎる!)

このブログではAwesome Inc.というのを使っていますが、「見出し」を設定すると、下書きでの場合と実際の表示とがまったく違ってしまい、茫然としました。でも、次のサイトを参考になんとか修正しました。

Blogger 最初のカスタマイズ

とても助かりました。





どうでしょうか。本人は気に入っています。




「見出し」や「小見出し」が混在しているとわかりにくいので、たぶん使いません。




絶対に使わないでしょうけど、何があるかわかりません。とりあえず設定しておきます。

追加CSS

追加したCSSはこんなものです。

.post-body.entry-content h2 {
 font-size: 1.5em;
}
.post-body h3 {
 font-size: 1.3em;
}
h4:not([class]) {
 font-size: 1.1em;
 color:#424242;

marginやpaddingは、適当に追加して下さい。

「見出し」(h2)の下の下線:Awesome Inc.の場合

Awesome Inc.のテーマを使っている場合だけだと思うのですが、「見出し」(h2)の下に下線が引かれます。これを取るには、次のCSSを追加します。

.main-inner .widget h2 + div {
 border-top: none;
}

ただし、こうすると、「ラベル」や「自己紹介」の後の下線も消えてしまいます。
h2が「ラベル」などにも使われているのが問題なのです。

これを解決しようとすると、「HTML編集」の泥沼にはまってしまいそうです。最終的には自分でテーマ(テンプレート)まで作りたくなってしまい、人生を大いに無駄にしてしまうでしょう。

カスタマイズは適当なところで妥協して、さっさとブログを書くことに力を注ぐ方が正解かもしれません。

QooQ. Powered by Blogger.