WordPressに関して、ローカルサーバでcssが反映されますが、サーバーアップすると反映されなくなります、、。

前提・実現したいこと

恐れ入ります。現在、web制作を勉強して4ヶ月の者です。
某YoutuberさんのLPを作成中なのですが、知識・経験ともに不足していて、問題を解決することができずに困っております、、。ほんとうに申し訳ないのですが是非ともお力を貸していただきたいです、、。

リモートサーバー（ロリポップのサブドメイン）にて、index.phpにcssを反映するようにしたいです。

発生している問題

ローカルサーバーで確認したところ問題なく反映されているのですが、サーバーアップすると途端に反映されなくなります。
wordpressのテキストエディターで確認したところ、cssのファイル自体は転送に成功しているようです。
Google Chromeのデベロッパーツールでcssが読み込まれているのも確認できますが、何故か反映がされません。
safariでは「リソースを読み込み中にエラーが起きました」と表示されております。

考えられる原因をご指摘いただければ幸いです、、。

該当のソースコード

php
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>ドレミのコーラ</title>
6        <meta name="description" content="はじめまして！Youtuberのドレミのコーラと申します！">
7        <meta name="viewport" content="width=device-width, initial-scale=1">
8    <!-- resetCSS< -->
9        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
10    <!--slick.css---->
11      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
12    <!--slick-theme---->
13      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
14    <!-- FontAwesome -->
15        <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
16    <!-- CSSの読み込み -->
17        <link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">
18    <!-- adobeフォントの読み込み -->
19        <script>
20          (function(d) {
21            var config = {
22              kitId: 'hti4vfp',
23              scriptTimeout: 3000,
24              async: true
25            },
26            h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
27          })(document);
28        </script>
29    </head>
30
31    <body>
32      <header class="header">
33        <nav class="nav-web">
34          <ul class="header__ul">
35            <li class="header__list"><a href="#doremi-contact" class="header__link">お問い合わせ</a></li>
36            <li class="header__list"><a target="_blank" href="https://twitter.com/doreminocola" class="header__link"><i class="fab fa-twitter"></i>twitter</a></li>
37            <li class="header__list"><a target="_blank" href="https://m.youtube.com/channel/UCat8-t7vO_qKGmGN2paBMHw" class="header__link"><i class="fab fa-youtube"></i>Youtube</a></li>
38            <li class="header__list"><a target="_blank" href="https://www.instagram.com/doremi_cola_molkky/" class="header__link"><i class="fab fa-instagram"></i>Instagram</a></li>
39          </ul>
40        </nav>
41
42          <!-- スマホ表示 -->
43        <span class="nav_toggle">
44          <i></i>
45          <i></i>
46          <i></i>
47        </span>
48        
49        <nav class="nav">
50          <ul class="nav_menu_ul">
51            <li class="nav_menu_li"><a href="#doremi-contact" class="header__link">お問い合わせ</a></li>
52            <li class="nav_menu_li"><a target="_blank" href="https://twitter.com/doreminocola" class="header__link"><i class="fab fa-twitter"></i>twitter</a></li>
53            <li class="nav_menu_li"><a target="_blank" href="https://m.youtube.com/channel/UCat8-t7vO_qKGmGN2paBMHw" class="header__link"><i class="fab fa-youtube"></i>Youtube</a></li>
54            <li class="nav_menu_li"><a target="_blank" href="https://www.instagram.com/doremi_cola_molkky/" class="header__link"><i class="fab fa-instagram"></i>Instagram</a></li>
55          </ul>
56        </nav> 
57        <!-- スマホ表示 -->
58        <?php wp_head(); ?>
59      </header>

<?php get_header(); ?>
      <div class="top-logo"><img src="<?php echo get_template_directory_uri(); ?>/img/doremi_logo.png" alt="#"></div>

      <main class="main">
        <div class="main__wrapper">
          <video src="<?php echo get_template_directory_uri(); ?>/img/doremi-main.mp4" class="main-video" loop playsinline autoplay muted></video>
          <h1 class="main_title">好きなこと続けてたら、<br>
            「<span class="text-red">ドレミ</span><span class="text-yellow">の</span><span class="text-green">コーラ</span>」<br>
          やってました。
          </h1>
        </div>
      </main>

      <section class="dream">
        <div class="dream__image"><img src="<?php echo get_template_directory_uri(); ?>/img/doremi-irasuto.jpg" alt="#"></div>
        <div class="dream__article">
          <h2 class="title dream__title">夢はまだ破れていない。<br>ボク達には「<span class="text-red">お</span>も<span class="text-yellow">し</span>ろ<span class="text-green">い</span>」がある。</h2>
          <p class="text dream__text">これまでボク達はたくさんの<br>楽しいことをしてきました。</p>
          <p class="text dream__text">だから今度はボク達が<br>「おもしろい」を届けたい。</p>
        </div>
      </section>
・
・
・
・

試したこと

・ブラウザとロリポップのキャッシュ削除
・cssの読み込み順の確認
・タイプミスがないか血眼になって確認

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答3件

ベストアンサー

読み込まれないのはここの部分でしょうか？
WordPressに必要なstyle.cssに直接記述しているということでしょうか？

HTML
1   <!-- CSSの読み込み -->
2        <link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">

投稿2021/09/07 02:13

編集2021/09/07 02:15

rinrin1137

総合スコア87

Cyawanmushi

2021/09/07 02:30

ご回答いただきありがとうございます！まさしくその部分であります。せっかくご回答していただいた手前申し訳ないのですが、たった今解決できましたのでご返答させて頂きます。 googleのデベロッパーツールで検証してみたところ、「failed to load resource: the server responded with a status of 403 ()」とエラーが出ていました。調べてみるとサーバーのWAFが原因で起きているエラーのようでしたので、WAFの設定をOFFにしたところ、無事cssが反映されました。確認していただきご迷惑をおかけしてしまい申し訳ありませんでした。　おそらく解決できたと思いますので報告させて頂きました。ありがとうございました！！

行動規範の内容に同意します

無事に解決したようでよかったです◎

ベストアンサーまでいただきありがとうございます！

投稿2021/09/07 03:03

rinrin1137

総合スコア87

googleのデベロッパーツールで検証してみたところ、「failed to load resource: the server responded with a status of 403 ()」とエラーが出ていました。
調べてみるとサーバーのWAFが原因で起きているエラーのようでしたので、WAFの設定をOFFにしたところ、無事cssが反映されました。

投稿2021/09/07 02:31

Cyawanmushi

総合スコア12