常連

先日、「はてなブログ」で初めてブログを開設しました。
デザインを変えようと、「ZENO-TEAL」というテーマをインストールしました。

メニューバーのところをカスタマイズしようとして、[リンク内容](https://www.simonsnote.com/entry/menu-bar)　こちらの記事を参考にしてメニューバーが透過するようにHTMLとCSSをいじりました。

PCで表示する分には、意図通りの結果になったのですが、スマホの表示では以下のように文字の大きさが大きすぎたり、文字が重なっていたりと、非常に読みにくくなってしまいました。


【PC】
![イメージ説明](fb4f7ce05a7ac29469a8a7109e61001f.jpeg)
【スマホ】
![イメージ説明](e85733effedc097d0de4d06103d6204d.png)

テーマはレスポンシブデザインに対応しているものなのに、このように表示されてしまって困っています。
はてなブログも無料版ですので、スマホの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=""><span>カメラ機材</span></a></li>
            <li><a href=""><span>雑談</span></a></li>
        </ul>
    </div>
    <div class="nm-search">
        <div class="hatena-module-body">
            <form class="search-form" role="search" action="/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;}
}
```

です。
よろしくお願い致します。

	@@ -1 +1 @@
1	- ~~※超初心者~~　ブログでレスポンシブデザインのテーマをカスタマイズしたら、スマホで見た時にズレてしまいます。
1	+ ブログでレスポンシブデザインのテーマをカスタマイズしたら、スマホで見た時にズレてしまいます。

質問編集履歴