質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.34%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 839

score 5

先日、「はてなブログ」で初めてブログを開設しました。
デザインを変えようと、「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;}
}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/10/17 07:15

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

    キャンセル

  • oztsy

    2019/10/17 07:42

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

    キャンセル

回答 1

checkベストアンサー

+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;}
}


投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/16 23:07 編集

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

    キャンセル

  • 2019/10/17 08:25

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

    キャンセル

  • 2019/10/17 22:39

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • HTMLに関する質問
  • ブログでレスポンシブデザインのテーマをカスタマイズしたら、スマホで見た時にズレてしまいます。