Q&A
ブラウザ開発ツールのコンソールにエラーか何かでていませんか？
前提・実現したいこと
wordpress、mixhost（レンタルサーバー）を利用してサイトを公開すると
ローカルサーバーやhtmlでサイトに表示したときとは違うhtml,cssを吐きます。
wordpressを利用した場合
ローカルサーバーで見た場合
このようにヘッダー部分には管理画面のヘッダー部分が追加され、
フッター部分はwidthのサイズがずれてしまいます。
この部分をローカルサーバーで表示されるように変更したいです。
###エラー
該当のソースコード
header.php
php
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <!-- Bootstrap CSS --> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 9 <title>test</title> 10 <?php wp_head(); ?> 11 </head <?php body_class(); ?>> 12 <body> 13 <!-- Optional JavaScript --> 14 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 15 <link rel="stylesheet" type="text/css" href=https://rmultigamingsever.com/wp-content/themes/hp_sakusei/reset.css> 16 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> 17 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 18 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 19 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 20 21 <!-- header --> 22 <header class="navbar bg-dark shadow navbar-light fixed-top navbar-expand-md"> 23 <div class="container-fluid px-0 pr-3"> 24 <div class=""> 25 <h1><a class="nav-link navbar-brand text-white" href="#">aaaaaaaaaa</a></h1> 26 </div> 27 <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 28 <span class="navbar-toggler-icon"></span> 29 </button> 30 <div class="collapse justify-content-center navbar-collapse" id="navbarSupportedContent"> 31 <ul class="nav row"> 32 <a class="nav-link text-white col-md" href="#">HOME</a> 33 <a class="nav-link text-white col-md" href="#">INTRODUCTION</a> 34 <a class="nav-link text-white col-md" href="#">SERVICES</a> 35 <a class="nav-link text-white col-md" href="#">PROFILE</a> 36 <a class="nav-link text-white col-md" href="#">CONTANCT</a> 37 </ul> 38 </div> 39 </div> 40 </header>
php
1 2<?php get_header(); ?> 3 <!-- home --> 4 <main class="container"> 5 <div class="carousel slide justify-content-center p-5 m-5 pb-n5 mb-n5" data-ride="carousel"> 6 <div class="carousel-inner"> 7 <div class="carousel-item active"> 8 <img class="d-block w-100 " src="<?php echo get_template_directory_uri(); ?>img/mikan.PNG" alt="First slide"> 9 </div> 10 <div class="carousel-item"> 11 <img class="d-block w-100" src="<?php echo get_template_directory_uri(); ?>img/phone.PNG" alt="Second slide"> 12 </div> 13 <div class="carousel-item"> 14 <img class="d-block w-100" src="<?php echo get_template_directory_uri(); ?>img/umebosi.jpg" alt="Third slide"> 15 </div> 16 </div> 17 </div> 18 <div class="container"> 19 <div class="justify-content-center p-5 m-5 pt-n5 mt-n5"> 20 <h4 class="information h5 mb-3 p-2 w-100 bg-light">お知らせ</h4> 21 <table class="table w-100"> 22 <tbody> 23 <tr> 24 <th class="w-25">2019/06/29</th><th class="w-50">お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・</th> 25 </tr> 26 <tr> 27 <th class="w-25">2019/06/29</th><th class="w-50">お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・</th> 28 </tr> 29 <tr> 30 <th class="w-25">2019/06/29</th><th class="w-50">お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・</th> 31 </tr> 32 <tr> 33 <th class="w-25">2019/06/29</th><th class="w-50">お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・</th> 34 </tr> 35 <tr> 36 <th class="w-25">2019/06/29</th><th class="w-50">お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・お知らせです・・・</th> 37 </tr> 38 </tbody> 39 </table> 40 </div> 41 </div> 42 </main> 43 <?php get_footer(); ?>
footer.php
php
1<!-- footer --> 2<footer class="shadow-lg"> 3 <div class="container-fulid"> 4 <div class="row bg-light p-5 justify-content-center"> 5 <div class="h4 pr-5 font-weight-bold text-success float-left"> 6 <p>aaaaaaaaa</p> 7 </div> 8 <div class="h6 font-weight-light float-right"> 9 <p>【本社】</p> 10 <p>〒aaaaaaaaaaaaaaaaaa</p> 11 <p>電話 aaaaaaaaaaa</p> 12 <p>【aaaa所】</p> 13 <p>〒aaaaaaaaaaaaaaaa</p> 14 <p>電話 aaaaaaaaa</p><br> 15 <p>COPYRIGHT (C) 2019 aaaaaaaaaaaaaaaaaaaaaaaa.</p> 16 </div> 17 </div> 18 </div> 19</footer> 20<?php wp_footer(); ?> 21</body> 22</html> 23
css
1 2/* 3Theme Name: hp_sakusei 4Theme URI: aaaaaaaaaaaaaaa 5Description: test 6Author: yusuke 7Author URI:aaaaaaaaaaaaaaa 8Version: 1.0 9*/ 10body { 11 font-family: Verdana, 'Arial Black', sans-serif; 12 margin: 0; 13} 14 15/* header */ 16header { 17 width: 100%; 18} 19header a:hover { 20 opacity: 0.7; 21 display: block; 22} 23.navbar-toggler .navbar-toggler-icon { 24 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 25} 26.navbar-toggler{ 27 border-color: black; 28} 29#navbarSupportedContent{ 30 margin-right: 250px; 31} 32header ul { 33 width: 800px; 34} 35@media(min-width:768px){ 36 ul a { 37 text-align: center; 38} 39} 40 41/* profile */ 42main { 43 margin-top: 50px; 44} 45/* contact */ 46main .font-size { 47 font-size: 12px; 48} 49.contact-img { 50 background-image:url(img/phone.png); 51} 52.contact-title{ 53 box-shadow: 5px 5px rgba(0,0,0,0.2) 54} 55.contact-img h1 { 56 line-height: 1.5rem; 57} 58 59.contact-form { 60 line-height: 30px; 61} 62/* introduction */ 63.onlineshop-font-size { 64 font-size: 1rem; 65} 66@media (max-width: 768px) { 67 .introduction-card { 68 width: 100%; 69 } 70} 71 72/* carousel */ 73.carousel img{ 74 height: 250px; 75} 76/* home */ 77table th { 78 line-height: 1.5rem; 79} 80.information { 81 box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.1); 82} 83/* footer */ 84.shadow-lg { 85 clear: both; 86} 87
試したこと
.上記でも話していますが、wordpressが関与しない場所である、ローカルサーバーで通常通り表示できることを確認
・wordpressのアイコンが勝手に追加される等でググってみてもそれらしい記事見つからず
補足情報（FW/ツールのバージョンなど）
Windows10 Bootstrap４ mixhost
###追加編集
あと、フッター部分に関する質問もしていましたがこちらは、管理画面にあるテーマエディターにあるCSSを変更したところ解決できました。
以前にテストで作っていたCSSがそのまま継承されていたようです。
あります。
初歩的なミスですね申し訳ない
ただ、今回の件とは別件のようにも感じます。
それが初歩的かどうかは提示されないと何とも言えません。
特にCSSフレームワークを利用している場合、様々な要因があって、ちょっとしたことでも崩れるというのはありえます。Bootstrap４はjQuery導入必須のフレームワークだったはずなので余計にですね。
問題切り分けの妨げにもなりますので、そのエラーを解消してからの話となると思います。
提示しました。
ヘッダーの下にある。スライド形式？の画像が表示される部分ですね読み込まれてないとのことです。
またフッターに関するCSSの崩れですが、テーマエディターにあるCSSが以前テストで使用していたCSSが継承されていたのでそちらを今使っているCSSに変更したところ改善されました。
<?php echo get_template_directory_uri(); ?>
を
<img src="<?php bloginfo('template_directory'); ?>
に変換したところ開発ツールにあるエラーを解消できました。
又それと同時に、そのほかの問題も解決できました。
回答1件
0
ベストアンサー
とりあえずダッシュボードの
ユーザー - あなたのプロフィール - 「サイトを見るときにツールバーを表示する」のチェックを外してみてください。
投稿2019/07/01 04:55
総合スコア3235
返信ありがとうございます。
＞＞とりあえずダッシュボードの
ユーザー - あなたのプロフィール - 「サイトを見るときにツールバーを表示する」のチェックを外してみてください。
こちらを実行したところツールバーはなくなりました。が、ヘッダーの挙動がおかしいです。
ヘッダーにマウスポインターを持ってくるとがくがくと上下に揺れます。
あと、フッター部分に関する質問もしていましたがこちらは、管理画面にあるテーマエディターにあるCSSを変更したところ解決できました。
以前にテストで作っていたCSSがそのまま継承されていたようです。
提示されているstyle.css、header.php、footer.phpと、
```
<?php get_header(); ?>
<main>test</main>
<?php get_footer(); ?>
```
のみ書いたindex.phpでテストしてみましたが上下に揺れるような挙動は確認できませんでした。
フッターと同じように質問にはない部分が影響している可能性があります。
ブラウザのキャッシュクリア、スーパーリロード等も試してみてください。
環境があれば複数のブラウザでの動作も確認してみてください。
返信ありがとうございます。
お騒がせして申し訳ないです。
修正依頼をもとに別のエラーを解除したところ上下に揺れる挙動がなくなりました。
また、ditさんが教えてくれたツールバーの削除もうまくいったままなので無事解決したと思われます。
ありがとうございました。
解決したようで何よりです。
あなたの回答
tips
プレビュー
