Minimalistテンプレートでヘッダーをレスポンシブデザインにするのに簡単な設定だけでCSS必要なし!【Blogger カスタマイズ】

モバイル版ヘッダーがレスポンシブデザインにならない件、解決

















何時間もCSSやhtmlをいじってやっと設定の方法がわかりました。
何時間も

 .header {
        position: relative;
        max-width: 90% ; /* 横幅の90% */
        height: auto ; /* 縦幅を自動調整 */
      }

なんてのをCSSに追加しても全く変化せず
本当に困っていたのですが

ふとMinimalistテンプレートのフォルダを開いてみると






















ヘッダーの設定方法らしき画像が。

ヘッダー画像のプレースメントの設定が
上から二番目を選ぶように指定されています。

自分の設定だと、一番上の設定にしていたんです。






























しかし、マニュアルでは二番目の設定にするようになっている。。。















サンプルの画像も、「こうすればモバイル版のヘッダーもうまくハマるぜ」
と言っているかのようです。

試しに2番目「タイトルと説明の代わり」に設定してみると







ヘッダーが小さくなった?

設定したCSSが邪魔をしているのかも、と思い
追加したCSSを全削除、htmlのいじった部分をもとのコードに書き換えると
ヘッダーの大きさが元に戻りました。

そしてスマホで確認。





やった・・・
ヘッダーがマトモな大きさになりました
゚゚(´O`)°゜゚

ていうかMinimalistのマニュアルとっても親切でした。
モバイル版もPC表示で設定するように解説してありましたね。
気がつきませんでした。マニュアルはちゃんと読みましょう。












モバイル版ヘッダー、もう少し大きくてもいいかなと思ってるんですが
まあいいかな・・・
これで一件落着
ネームに入れます😃

Minimalistは無料テンプレートなのにとっても親切なんですね。

鴎十

0 件のコメント:

コメントを投稿

tumblr

複眼画像RSS Powered by 複眼RSS