ブログでレスポンシブデザインのテーマをカスタマイズしたら、スマホで見た時にズレてしまいます。

Question

先日、「はてなブログ」で初めてブログを開設しました。
デザインを変えようと、「ZENO-TEAL」というテーマをインストールしました。

メニューバーのところをカスタマイズしようとして、リンク内容　こちらの記事を参考にしてメニューバーが透過するようにHTMLとCSSをいじりました。

PCで表示する分には、意図通りの結果になったのですが、スマホの表示では以下のように文字の大きさが大きすぎたり、文字が重なっていたりと、非常に読みにくくなってしまいました。

【PC】

【スマホ】

テーマはレスポンシブデザインに対応しているものなのに、このように表示されてしまって困っています。
はてなブログも無料版ですので、スマホのHTMLやCSSはいじれません。

プログラミングも全くやったことがなく、WEBの記事を見ながら試行錯誤で進めています。
かなりレベルの低い質問だということも承知の上です。
どうかお力を貸していただけると幸いです。

ちなみにいじった内容のコードは、「タイトル下」のHTMLが

<nav id="new-menu">
    <div class="nm-menu">
        <ul>
            <li><a href="https://fillog.hatenablog.jp/about"><span>プロフィール</span></a></li>
            <li><a href="https://www.instagram.com/oztsy/"><span>インスタグラム</span></a></li>
            <li><a href="https://fillog.hatenablog.jp/archive/category/%E5%86%99%E7%9C%9F"><span>写真</span></a></li>
            <li><a href="<!--任意のURL-->"><span>カメラ機材</span></a></li>
            <li><a href="<!--任意のURL-->"><span>雑談</span></a></li>
        </ul>
    </div>
    <div class="nm-search">
        <div class="hatena-module-body">
            <form class="search-form" role="search" action="<!--https://fillog.hatenablog.jp/archive-->/search?" method="get">
                <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required>
                <input type="submit" value="&#xf01a" class="search-module-button">
            </form>
        </div>
    </div>
</nav>
<div id="new-menu-backlayer">
</div>
<header id="new-blog-title">
    <div id="new-blog-title-inner">
        <div id="new-blog-title-content">
            <h1 id="new-title"><a href="https://fillog.hatenablog.jp/archive">FILLOG フィルログ</a></h1>
            <h2 id="new-blog-description">写真好きによる写真好きのためのポートフォリオ</h2>
        </div>
    </div>

で、CSSが

/* <system section="theme" selected="10328749687225937733"> */
@import url("https://blog.hatena.ne.jp/-/theme/10328749687225937733.css");
/* </system> */
#blog-title
 {background:none;padding-left:4em;}
#blog-title #blog-title-inner
 {position:relative;z-index:10;padding:0 2em;text-align:left;display:table;}
#blog-title #blog-title-inner #blog-title-content
 {display:table-cell;vertical-align:middle;}
#blog-title #title a
 {font-size:200%;}

#new-menu
 {display:-webkit-flex;display:flex;
 -webkit-justify-content:flex-end;justify-content:flex-end;
 -webkit-align-items:stretch;align-items:stretch;
 width:100vw;padding:0 1vw 0 7vw;position:relative;z-index:9;}
#new-menu div,#new-menu li,#new-menu-backlayer,#blog-title,#blog-title #blog-title-inner{
  height:6rem;}
.nm-title
 {flex:1;}
.nm-title-inner
 {float:left;display:table;padding:0 4em;}
 .nm-title h1
 {display:table-cell;vertical-align:middle;}
.nm-menu
 {width:40vw;}
.nm-menu ul
 {display:-webkit-flex;display:flex;
 margin:0;padding:0;}
.nm-menu li
 {width: 100%;
 display:-webkit-flex;display:flex;
 -webkit-align-items:center;align-items:center;
 -webkit-justify-content:center;justify-content:center;}
.nm-search
 {display:table;}
.nm-search .hatena-module-body
 {display:table-cell;vertical-align:middle;height:auto !important;}
.nm-search form
 {width:25vw;background:#fff;}
input[type="text"]:focus{outline:0;}
.nm-search form:hover
 {border-color:#ccc;}
.nm-search form:after
 {content:none;}
.nm-search input.search-module-button
 {font-family:blogicon;color:#666;font-size:1.5rem;height:100%;top:0;right:auto;}
 .nm-search input.search-module-button:hover
  {color:#222;}

#new-blog-title
 {width:100%;height:200px;overflow:hidden;display:table;margin:0 0 0rem 0;background:#009688;color:#fff;}
#new-blog-title #new-blog-title-inner
 {display:table-cell;text-align:center;vertical-align:middle;}
#new-blog-title #new-title a
 {font-size:48px;font-weight:700;line-height:1;color:#fff;letter-spacing:0.15em;}

#top-editarea,#new-menu-backlayer
 {margin-top:-6rem;}
#new-menu-backlayer
 {width:100vw;z-index:8;background:gray;}
#top-editarea
 {height:calc(6rem + 200px);}
 #new-blog-title
 {background:none;}    /*タイトル部分の背景はいったん消します*/
#new-menu-backlayer
 {position:relative;z-index:8;background-color:rgba(200, 200, 200, 0.5);  /*背景をぼかしたい場合は背景色はrgba()の指定になります。*/
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);/*ぼかし具合*/;}     /*ぼかし具合をpxで調整してください。*/
#top-editarea
 {background:url("https://static.pexels.com/photos/266967/pexels-photo-266967.jpeg");}   /*通しの背景です。写真にすると透明が活きますが、べつに色でもOK*/
 #new-menu .nm-menu a
 {display:table;width:100%;height:100%;}
#new-menu .nm-menu span
 {display:table-cell;text-align:center;vertical-align:middle;}
#new-menu .nm-menu li:hover
 {background:#DDDDDD;} /*マウスカーソルを上に乗せた時のボタンの色*/
 .nm-menu{width:40vw;}             /*メニュー部分。0vw~100vwの間で*/
.nm-search form{width:25vw;}  /*検索フォーム部分。0vw~100vwの間で*/
@media (max-width: 480px){ #blog-title-inner,#title a{height:100px!important;}

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

です。
よろしくお願い致します。

Comments

[m.ts10806]

初心者でも超も何もないかとは思いますが質問要件とは違う情報ですので「初心者アイコン」を質問につけるにとどめてください。

[oztsy]

分かっておりませんでした。教えていただきありがとうございます。修正致しました。

Answer 1

CSSの下の方にある

.nm-menu{width:40vw;}

を

.nm-menu{width:60vw;max-width:600px}

とりあえず現時点で答えられるのはここまで

ちなみに簡単に解説すると

文字が縦に伸びてしまうのはwidthが小さすぎる
->大きくする(width:60vw)
->->加えて大きくなりすぎるのを防止する目的でmax-width:600px

h1タグを記載していただければもう少し詳しくお答えします。

追記1

@media (max-width: 480px){ #blog-title-inner,#title a{height:100px!important;}

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

を

@media (max-width: 480px){ #blog-title-inner,#title a{height:100px!important;}
 h1 {font-size:2rem}
 #blog-title-inner {background-size: contain;}
}

に

Comments

[kyoya0819]

と、回答したはいいものを確認したらダメそうなので修正します。

[oztsy]

回答していただき、嬉しく思います。本当にありがとうございます。試してみましたが、メニューバーのブログタイトルのサイズが大きくなって、他は変化ありませんでした。やはり、スマホの方のCSSなどをいじれないと難しいのでしょうか。

[kyoya0819]

不可能ではないですが（レスポンシブ対応をすれば）、このコードでは難しいかもです。
よろしければご利用のテーマ名を教えていただけませんか？

[oztsy]

ありがとうございます。「ZENO-TEAL」というテーマです。
@mediaの中のh1タグを、h1 {font-size:0.5em}　にしたら文字の大きさの収まりはよくなりました。
ですが、上記の画像のように白文字(タイトル)が、黒文字(メニューカテゴリ)に重なって表示されているのは改善されません。横並びじゃなくて、上下になってもよいので重なって表示されないようにできないでしょうか。

[kyoya0819]

単位がemじゃなくてremでした。

[oztsy]

色々試してみましたが、結果的にはできませんでした。が、教えていただいたおかげで、他の方法に移行することにしました。勉強になりました。ありがとうございました。