Blogger Simpleテーマのヘッダー(ブログタイトルや説明)をカスタマイズ

BloggerでSimpleテーマを利用している方向けに、
ヘッダーをカスタマイズする方法を紹介します。ヘッダーをカスタマイズすることで、
ブログタイトルやブログの説明の文字サイズや色などを変更できます。

方法

Bloggerの、テーマ→カスタマイズ→HTMLを編集
を選択してください。
windowsなら「Ctrl + F」、Macなら「command＋F」を押すと、左上に、「search:　」とでるので、そこに「/* Header」を入れて「Enter」を押します。

そうすると、下記のスクリプトがあると思います。

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}

このスクリプトの中身を書き変えれば、好みに合わせてヘッダーをカスタマイズできます。

ブログタイトルのカスタマイズ

.Header h1 {}の中身を変えれば、変更できます。

例えば本ブログでは、

.Header h1 {
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
  font-size: 1.2rem; /*ブログタイトルのサイズを変更*/
　font-family: Georgia, serif; /*ブログタイトルのフォントの種類を変更*/
}

と変更しています。

ブログ説明のカスタマイズ

.Header .description {}の中身を変えれば変更できます。

例えば、本ブログでは、

.Header .description {
  font-size: 0.7rem; /*ブログの説明の文字のサイズを変更*/
  color: $(description.text.color);
}

と変更しています。

以上で、ヘッダーのカスタマイズは一応終了です。

よりカスタマイズしたい方は、CSSの知識が必要になるので、

CSS: カスケーディングスタイルシート等を参照してください。

ヘッダーはサイトの顔になる部分なので、自分の納得できるものにしたいものですね。

参考文献

・電脳電網総研. [Blogger] Bloggerカスタマイズ　ヘッダー編. <https://dendensoken.hankeidou.jp/2021/01/bloggercustomizeheader.html> （参照日2022年8月22日）.
・BLOGGER LABO Bloggerカスタマイズのための備忘録. 【Vaster2】ヘッダーのブログタイトルと説明のカスタマイズ. <https://blogger-learning-rab.blogspot.com/2018/02/vaster2_8.html#chapter-2> （参照日2022年8月22日）.