はてなブログカスタマイズ ヘッダー画像がスマホで小さくならない

このブログを開設した時に行ったカスタマイズを紹介いたします。

せっかくヘッダー画像を準備したのに，レスポンシブデザインを採用した時，スマホで見えるヘッダー画像サイズが小さくならずに苦労しました。

その時の対応を備忘録を兼ねて記事にしました。

使用したテーマははてなブログテーマで一番人気がある「Brooklyn」です。

「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。

WordPress侍

2020.11.21

役に立つ！はてなブログのカスタマイズ20選

https://wordpress-samurai.com/hatenablog_customize_20

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。しかし、はてなブログのカスタマイズ記事を多数掲載していたので、そのまま無くすというのも勿体ないと思い、WordPressサイトではありますが、カスタマイズ記事だけをこちらのサイトに移設いたしました。記事文章につきましてはなるべく原文を使用しているため、おかしな内容になっているかもしれませんが、「はてなブログ」を利用されている方にはご理解いただけると思っています。また、はてなブログと動作が違うものもいくつかあります。それは、イメージを持...

はてなブログをやるなら、制限が少ないはてなブログProがオススメ！

ヘッダー画像が小さくならない

タイトル画像で準備したサイズは1000 × 200です。(2020年11月 画像は差し替えております。)

レスポンシブ・デザインということでパソコンのデザインが，そのままスマホでも縮小されて表示されるはずですが，何故か縮小されず大きなタイトル画像のままなのです

レスポンシブ・デザインモードにするとスマホのカスタマイズ設定は無効になります。

ということは何らかパソコン画面で設定を行わなければいけないということです。

これは困ったぞ，せっかくお気に入りのテーマなのに・・・

せっかく作ったタイトル画像なのに・・・

※上記ように文節にマーカーがスゥーっと引けるようなカスタマイズは下記 ⇓

WordPress侍

2019.03.09

はてなブログに蛍光マーカー風ラインを引くようなアニメーションを実装

https://wordpress-samurai.com/marker_line_draw

最近、投稿記事内の強調したい文章や文節に蛍光ペンでラインマーカーを使用しているサイトが特に目立ちます。パッと見た目のインパクトはありますし、何を強調しているのかわかりやすいですよね。ではもう少し強調して、今この文節のように、読む直前に蛍光マーカーでラインを引いていけばより目立つのではないでしょうか？はてなブログのカスタマイズで蛍光マーカー風ラインを下線を引くように動かしていく方法をご紹介いたします。 「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。はてなブログをやるなら、制限が...

CSSの設定をしなくちゃいけない

いろいろ調べていると，どうやらスマホ対策用のCSSを追加する必要があるみたいです。

このCSSを追加しないといけないようです。

デザイン ⇨ カスタマイズ ⇨ デザインCSS へ追加

問題解決しました

background-size: contain;  というのがスマホサイズ指定へ対応のポイントのようです。

containを指定すると画像の幅と高さの比率は固定され，表示領域が変更されても、画像が全て表示される設定になっています。

とりあえずCSS追加で問題解決しましたが，CSSの世界って奥深いんですね。