Q&A
index.phpの全体を提示されてはいかがでしょう。
Local by wheelで静的HTMLをwordpress化しようとしています。
しかし、途中で確認してみると、index.phpのヘッダーとフッターの部分は、cssも当たって綺麗に表示されていますが、<body>内のコンテンツが全く表示されておりません。
なぜか、background-colorだけ反映されている状態です。
フォルダ構造は以下のようになっています。
・index.php
・style.css
・image
・css
・jquery
フォルダの直下にあるstyle.cssには、Theme nameのみ記述しており、index.phpではcssフォルダ内のstyle.cssやresponsive.css、normalize.cssを読みこんでいます。
index.phpは以下のように記述しております。
index.php
1<!doctype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css"> 7 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css"> 8 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/responsive.css"> 9 <!-- Faviconの読み込み --> 10<!-- <link rel="icon" type="image/x-icon" href="image/favicon.ico">--> 11<!-- <link rel="apple-touch-icon" sizes="180x180" href="image/apple-touch-icon.png">--> 12 <!-- FontAwesomeの読み込み--> 13<!-- <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">--> 14 <!-- Google Fontの読み込み--> 15<!-- <link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap" rel="stylesheet">--> 16 <!-- jQueryの読み込み--> 17<!-- <script src="jquery/jquery-3.4.1.min.js"></script>--> 18<!-- <script src="jquery/jquery.bgswitcher.js"></script>--> 19 <title><?php bloginfo('name'); ?></title> 20 <?php wp_head(); ?> 21</head> 22 23<body id="top"> 24 <header class="header"> 25 <div class="header-innaer"> 26 <a href="#top"><img src="<?php echo get_template_directory_uri(); ?>/image/logo-mark.png" alt="Technologies" class="logo"></a> 27 <ul class="nav"> 28 <li class="nav-item"><a href="#company">私たちについて</a></li> 29 <li class="nav-item"><a href="#service">事業内容</a></li> 30 <li class="nav-item"><a href="#news">お知らせ</a></li> 31 <li class="nav-item"><a href="#contact">お問い合わせ</a></li> 32 <li class="nav-item"><a href="#info">会社概要</a></li> 33 </ul> 34 </div> 35 <ul class="nav-res"> 36 <li class="nav-item-res"><a href="#company">私たちについて</a></li> 37 <li class="nav-item-res"><a href="#service">事業内容</a></li> 38 <li class="nav-item-res"><a href="#news">お知らせ</a></li> 39 <li class="nav-item-res"><a href="#contact">お問い合わせ</a></li> 40 <li class="nav-item-res"><a href="#info">会社概要</a></li> 41 </ul> 42 </header> 43 44 <section class="firstview bg-slider"> 45 <h1 class="top-title01">テクノロジーの力で<br>人々の活動に革新を</h1> 46<!-- <div class="scroll"></div>--> 47 <a href="#" class="scroll"><span></span></a> 48 49 </section> 50 51 <div class="bg-space fadein"> 52 <div class="bg-border"></div> 53 </div> 54 55 <section class="section company-wrapper fadein" id="company"> 56 <h2 class="heading bg-light fadein">About Us</h2> 57 <p class="sub-heading bg-light fadein">私たちについて</p> 58 <div class="company"> 59 <p class="company-text fadein">テクノロジーズ株式会社は、エンジニア人材事業、システム開発など、IT関連ビジネスにフォーカスしております。主に、クライアント様とエンジニア人材のマッチング、システム開発、ITに関するコンサルティングなどの分野に精通し、お客様のビジネスの成功を責任を持ってサポートいたします。弊社では、クライアント様の利益を自己の利益より優先し、社会に最大の恩恵をもたらすことに務めることで、安心して弊社に業務を委任していただけるよう常に配慮しております。</p> 60<!-- <img src="image/logo-mark.png" alt="" class="about-pic fadein">--> 61 </div> 62 <div class="bg-space-offwhite fadein"> 63 <div class="bg-border-offwhite"></div> 64 </div> 65 </section> 66 67 <section class="section service" id="service"> 68 <h2 class="heading bg-light fadein">Services</h2> 69 <p class="sub-heading bg-light fadein">事業内容</p> 70 71 <div class="service-boxes"> 72 73 <div class="service-box fadein"> 74 <img class="service-pic" src="<?php echo get_template_directory_uri(); ?>/image/pic-engineering.jpg" alt=""> 75 <div class="text-box"> 76 <h3 class="service-title">システム開発事業</h3> 77 <p class="service-text">メインとなる受託開発では、これまでのシステム開発経験で培った確かな技術力・ノウハウを生かし、業務やプロジェクトの規模に応じて、経験豊富なエンジニアによる開発チームを編成。責任を持って、お客様のニーズに見合った高品質の成果物を開発、納品いたします。<br>また、◯◯◯◯◯◯◯◯◯◯◯◯◯などの自社サービスの開発にも力を入れております。</p> 78 </div> 79 </div> 80 81 <div class="service-box fadein"> 82 <img class="service-pic" src="<?php echo get_template_directory_uri(); ?>/image/pic-worker.jpg" alt=""> 83 <div class="text-box"> 84 <h3 class="service-title">エンジニア人材事業</h3> 85 <p class="service-text">当社は様々な技術スタックを有したフリーランスエンジニアの皆様を対象としたサービスを提供しております。<br>クライアントの皆様は、システム開発のフェーズに応じ、必要な期間だけ、経験豊富なIT人材をアサインすることのできる技術支援サービスです。Web系からインフラ系のエンジニアまで多種多彩な人材がおり、広範囲にわたりご支援が可能です。</p> 86 </div> 87 </div> 88 89 <div class="service-box service-box-bottom fadein"> 90 <img class="service-pic" src="<?php echo get_template_directory_uri(); ?>/image/pic-startup.jpg" alt=""> 91 <div class="text-box"> 92 <h3 class="service-title">ITスタートアップ投資事業</h3> 93 <p class="service-text">海外のベンチャーキャピタル投資会社と提携し、ITスタートアップ支援を行っております。具体的には、<br>①アイデア段階からの審査<br>②海外エンジェル投資家の紹介<br>③モバイルアプリなどのITシステム開発の提供、などになります。<br>このようなサービスは、当社のグローバルネットワークから生まれます。</p> 94 </div> 95 </div> 96 97 </div> 98 99 <div class="bg-space-offwhite fadein"> 100 <div class="bg-border-offwhite"></div> 101 </div> 102 103 </section> 104 105 <section class="section news" id="news"> 106 <h2 class="heading bg-light fadein">Information</h2> 107 <p class="sub-heading bg-light fadein">お知らせ</p> 108 <div class="news-wrapper fadein"> 109 <div><a class="article" href="news-newsite.html"> 110 <div class="news-info"> 111 <p class="article-component category">NEWS</p> 112 <p class="article-component date">2020.05.08</p> 113 </div> 114 <p class="article-component article-text">コーポレートサイトをリニューアルいたしました。</p> 115 <div class="arrow"></div> 116 </a></div> 117 <div><a class="article" href="news-virus.html"> 118 <p class="article-component category">NEWS</p> 119 <p class="article-component date">2020.03.09</p> 120 <p class="article-component article-text">新型コロナウイルスに対する当社の取り組みについて</p> 121 <div class="arrow"></div> 122 </a></div> 123 <div><a class="article" href="news-newyear.html"> 124 <p class="article-component category">NEWS</p> 125 <p class="article-component date">2019.12.01</p> 126 <p class="article-component article-text">年末年始の冬季休暇のお知らせ</p> 127 <div class="arrow"></div> 128 </a></div> 129 </div> 130 <a href="news-lists.html" class="news-button fadein">一覧を見る</a> 131 </section> 132 133 <section class="section contact fadein" id="contact"> 134 <h2 class="heading bg-dark">Contact</h2> 135 <p class="sub-heading bg-dark">お問い合わせ</p> 136 <p class="contact-text">弊社では、エンジニア人材事業、システム開発の推進に当たって、人材情報・案件情報の交換をしていただけるビジネスパートナー様との協業を積極的に行っております。<br class="res-text"> また、個人のフリーランスエンジニア様で、弊社の事業にご協力いただける方の募集も行っております。<br>ビジネスパートナー、フリーランスエンジニア募集、事業提携、メディア取材など、弊社へのお問い合わせは、以下の「お問い合わせ」フォームをご利用ください。折り返し、担当者からご連絡させていただきます。</p> 137 <a href="contact-form.html" class="contact-button">お問い合わせはこちら</a> 138 </section> 139 140 <section class="section info" id="info"> 141 <h2 class="heading bg-light fadein">Company</h2> 142 <p class="sub-heading bg-light fadein">会社概要</p> 143 <img src="<?php echo get_template_directory_uri(); ?>/image/info-pic.jpg" class="info-pic fadein" alt=""> 144 <table class="info-table fadein"> 145 <tr> 146 <th>社名</th> 147 <td>テクノロジーズ株式会社<br class="res-text">（Technologies, Ltd.）</td> 148 </tr> 149 <tr> 150 <th>設立</th> 151 <td>2011年12月</td> 152 </tr> 153 <tr> 154 <th>資本金</th> 155 <td>10,000,000円</td> 156 </tr> 157 <tr> 158 <th>事業内容</th> 159 <td>エンジニア人材事業、システム開発</td> 160 </tr> 161 <tr> 162 <th>所在地</th> 163 <td>東京本社<br>〒150-0032 東京都渋谷区</td> 164 </tr> 165 <tr> 166 <th>代表者</th> 167 <td>aaaaa</td> 168 </tr> 169 <tr> 170 <th>電話</th> 171 <td>999-9999-999</td> 172 </tr> 173 <tr> 174 <th>E-mail</th> 175 <td>contact@aaa.com</td> 176 </tr> 177 </table> 178 </section> 179 180 <footer class="footer"> 181 ©2020 TECHNOLOGIES, LTD. ALL RIGHTS RESERVED. 182 </footer> 183 <div class="to-top"><a href="#"></a></div> 184<!-- <script src="jquery/script.js"></script>--> 185 <?php wp_footer(); ?> 186</body> 187</html> 188
bodyの中身は、imgの読み込みでphpを記述した以外は、何もいじっておりません。
色々調べてみたのですが、解決に結びつきそうな答えが見つからず、こちらで質問させて頂きました。
ご教示頂けますと幸いです。
回答1件
0
ベストアンサー
ヘッダーとフッターの部分は、cssも当たって綺麗に表示されています
が、<body>内のコンテンツが全く表示されておりません。
「ヘッダーとフッターの部分」は普通に考えて「<body>内」な気がしますが、違うのでしょうか。
ひとまず状況を確認してみてください。
- PHPのエラーが起きてHTMLが途中で途切れている（ブラウザで「ページのソースを表示」を確認）
- CSSが読み込まれていない（デベロッパーツールのコンソールにエラーが出るはず）
- HTMLの構造が意図通りでなく、CSSが適用されていない
- 別のCSSが上書きしている
【WordPress初心者におすすめ！デバッグモードの使い方 | Mignon Style】
http://mignonstyle.com/debug-mode/
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
投稿2020/05/16 18:59
総合スコア69606
アドバイスありがとうございます！
色々と確認してみたところ、
スクロール時に要素がふわっと浮き出てくるようなアニメーションとして、fadeinクラスを各コンテンツに適用していたのですが、これのopacityが0となっているのが主な原因だったみたいです。
ただ、これが直接の原因だったのかどうかは判明できない理由があって、一旦コメントアウトして、再度fadeinクラスを適用したら、今度は普通に問題なく表示されていましたのです。
他にも同時に、style.cssの画像をきちんと読みこんであげたのと、index.phpのjQueryもきちんと読み込んだのも、何かしら関係しているのかなとも思いますが、結果として無事に表示されるようになって良かったです。
この度はご教示いただき、ありがとうございました！
あなたの回答
tips
プレビュー
