Q&A
<body style="padding-top: 70px"> をしてみたら表示されませんか？実際のHTMLがあるともう少し具体的に回答できそうです。
bootstrapにて作成したサイトをwordpressの"_"テーマにて移行させたいのですが、ナビゲーションバーのところがわずかな隙間ができるでけでスタイルが表示されません。
リンクがあるであろう場所にカーソルを合わせることはできるので反映はできてるかと思うのですが、スタイルが表示されない原因がわかりません。。
どなたかご教示いただければと思って質問させていただきました。
よろしくお願いします(><)
＞すみません。追記をしたつもりが出来ていなかったようです。。
下記汚いコードで恐縮ですが実際のものです。
よろしくお願いいたします。
<header id="header"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse" > <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"></a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#about">About</a></li> <li><a href="#about">About</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </div><!--/.nav-collapse --> </div> </nav> <div id="header-image"> <img src="<?php echo get_template_directory_uri(); ?>/img/header_bg.jpg" class="img-responsive" alt="よもぎCafe" /> <h1>活力を感じてもらう場所です。</h1> </div> </header>
Ken.sakanakana様
いつもありがとうございます。
レスが遅くて申し訳ありません。
padding-topをつけると余白がおかしくなってしまいました。
htmlのみでは正常に表示されますが、wordpressへ移行（といえるのかわかりませんが…）した際に表示がおかしくなってしまいます。
htmlで表示した場合
wordpressで表示した場合
padding-topを適用した場合
functions.phpをいじればいいのかなどと思い調べてみましたが、うまくできませんでした。
素人なもので見当違いの回答になっていたらすみません。
よろしくお願いいたしますm(_ _)m
Ken.sakanakana様
デバッグツールで高さを50→200pxに変えてみました。
スタイルは当たってないものの何かでてきました。
幅を狭くしてみると一応メニューアイコンも出ているようです。
やはりスタイルシートかPHPのところが崩れの原因なのでしょうか。。。
回答1件
0
ベストアンサー
HTMLだけで確認してみました。HTMLでbootstrapだけのCSSを適用した場合はちゃんと表示されているようです。
WordPressのスタイルシートとバッティングしているかもしれません。
ブラウザのデバッグツールで、navibar付近のマージンを確認してみてもらっても良いですか？
あと、<body style="padding-top: 70px"> をしてみたら表示されませんか？
画像追加
投稿2016/01/17 13:02
編集2016/01/19 14:02総合スコア1768
画像添付ありがとうございます。すごくイメージがつかみやすいです:-)
<div class="container"の中のborder-boxの値は50pxですか？そこをデバッグツールで数字を変更すると表示は変わりますか？
スタイルシートの値が上書きされているか、<?php が間でHTMLを崩しているか。
そんな気がします。質問の所に画像追加しました。
以下のブロックのheightを50px以上にすればメニューが出てくると思います。
なぜ、このブロックのheightがなくなってしまっているのかは、スタイルシートがどこかで上書きされている、もしくは、HTMLの崩れが発生しているかもしれないので、HTMLやCSSとにらめっこという感じになるかもです。デバッグツールで追いかけられるのでしたら、早くポイントを突き止められるかもしれません・・・
<div id="navbar" class="collapse navbar-collapse"> ←このブロック
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
一旦動く状態のもの(HTMLにStyle直書きででも)を作って保存しておき、完璧版は納期を見て修正するというのもありかもしれません。
bootstrap + wordpress で私も苦戦中で上手にポイントを絞ってお話しできずすみません。。。
Ken.sakanakana様
ご丁寧かつ素早く対応いただきありがとうございました。
デバッグツールからもう少し検証していきます。
あなたの回答
tips
プレビュー
