国産品 酔夢譚

国産品を応援するブログです

はてなブログのヘッダーにタイトル画像を設定するにはサイズ調整が必要だゼ!

このブログの記事も50を超え、国産品を応援する取組に努めたいというテーマも見えてきたのでブログタイトルを変え、併せてタイトル画像を設定してみた。はてなブログの仕様が特殊なのかけっこう大変だったので今回はそのあたりを書いてみたい。

はてなブログのレスポンシブデザインテーマではタイトル画像の調整が必要!

余白の調整などはPC上でもおかしかったが、この記事では基本的にスマホ画面で説明していく。用意した画像のサイズは、はてなブログが推奨する1,000×200である。

f:id:koku3:20180924085307j:plain

最初に、はてなブログの管理画面からデザインを選択し、カスタマイズ(スパナのアイコン)からヘッダを選ぶとタイトル画像を設定する項目が現れる。そこで、画像をアップロードして、画像だけを表示した状態が上である。

大きくタイトル画像がはみ出している状況にあることがわかるかと思う。「おいおい、レスポンシブデザインってのは、こういうのを調整するデザインなんじゃないのか」と怒っても仕方がない。ここから先達のやり方を調べながらの試行錯誤が続いた。

f:id:koku3:20180924091733j:plain

はてなブログのスマホ画面ではみ出さないようにCSSと画像サイズを調整

まずは画像サイズを一般的なスマホの画面に適する480×100に変更した。そして、以下のコードをデザインCSSに追加した。

/* ヘッダー画像スマホ対応 */
@media (max-width: 480px){
#blog-title-inner,#title a{
height:100px!important;
}

#blog-title-inner {
background-size: contain;
}
}

デザインCSSの在りかは、管理画面>デザイン>カスタマイズ>デザインCSSである。開かれたデザインCSSの一番下にコードをコピペして保存。これでやっと上の画像のようにまともにスマホ画面で表示された。しかし、今度はタイトル画像から本文までの異常なまでの空白が気になる。これではユーザビリティの観点からも読みやすいブログとは言えない。

f:id:koku3:20180924092648j:plain

はてなブログのタイトル画像から本文までの余計な空白を調整するCSS

このタイトル画像から本文までの空白(余白)もCSSを追加することで調整が可能である。サイズ調整の時と同じくデザインCSSに以下のコードを追加すればOK。余白の長短は200という数字を増減させればいい。ちなみに、わたしは短く(余白を少なく)したかったので110にしている。

/* ---- ブログタイトル下のスペース調整 --- */
#blog-title{
height:200px;

ここまでくればかなりいい感じにはなってきているのだが、もう少しだけ手を入れた。

f:id:koku3:20180924093922j:plain

タイトル画像の上下の余白が気になったのだ。はじめは元の画像の空白(余白)を切り取ってアップロードしてみたりしていたのだが、どうもはてなブログのテーマ側で制御されているようなので以下のCSSをさらに追加した。

/* タイトル画像上下の余白を取る */

#blog-title {

margin: 0 auto;

padding: 0;

}

ようやく自分でも満足する状態になった。これでいこうと思う。

あとがき

読んでいただいてどうもありがとう♪ しかし、こんなタイトル画像を追加するくらいで一時間もかかるとは思っていなかった。もともとはてなブログでは、カスタマイズ画面をPCとスマホで分けてある。レスポンシブデザインにするとPCでしかカスタマイズできないのだが、それゆえに大きさが一律になってしまうのかもしれない。

いずれにせよ公式で対応してほしいものだ。けっこうこういう細かなところでつまづく人は多いと思う。運営さん、よろしくお願いね!