久しぶりにBloggerのカスタマイズの備忘録です。


今回いじるのは、ヘッダーのブログタイトル画像です。ヘッダーの設定方法については、以前記事を書いています。

・Bloggerカスタマイズ　ヘッダー編


上記記事の通り、ブログタイトルを画像にすることはできたのですが、PCでの閲覧時、タイトル画像の表示サイズが大きすぎて、正直あまりスマートではありません。


一方、スマホでの表示はこんな感じで無難な大きさだと思います。

そういうわけで、タイトル画像の表示サイズを調節したいのですが、Bloggerの管理画面からの設定ではそれができません。CSSを直接いじるしかないようです。

CSSをいじるには、管理画面から「テーマ」画面を開き、「カスタマイズ」のメニューから「HTMLを編集」を選択して、ソースコード編集画面を開きます（Bloggerテンプレート「Smart」導入メモ #2　を参照）。

ソースコードの内容は、利用しているテンプレートの種類によって異なります。僕は「Smart」テンプレートを利用しているため、以下の説明は、他のテンプレートを利用している場合には当てはまらない可能性があります。

ソースコード編集画面が開いたら、下の画像の部分を探し、赤枠で囲んだ部分を挿入します。

ソースコード内を「#Header1 a {」で検索すると、上の部分が見つかります。挿入するコードは以下のとおり。

/* ヘッダーイメージ */
#Header1 img {
  width: 20vw;
  height: auto;
  max-width: 80%;
}

「width: 20vw;」というのが、「画面の横サイズの20％の横幅にする」という設定なので、この数字を変えることで、タイトル画像のサイズを調節できます。上記のとおりにコードを挿入すると、下のように、ブログタイトル画像が小さくなって見栄えがよくなりました。

ただし、これだけだと、下のように、スマホでの表示も小さくなってしまいます。PCと同様に画面横サイズの20％になってしまったわけです。

そこで、先程、コードを挿入した部分の下にある「レスポンシブデザイン（スマホ用）」という部分に、以下の赤枠部分を挿入します。このブロックの内容はスマホで閲覧した場合にだけ適用されるわけです。

挿入するコードは以下のとおりです。

#Header1 img {
  width: 60vw;
}

先程見た通り、「width: 60vw;」という設定によって、スマホ画面横幅の60％の横幅になるわけです。実際のスマホでの表示は下のようになります。

以上で、ブログタイトル画像のサイズ調節は完了です。思ったより簡単にできました。