自作wordpressテーマで、フッターレイアウトが崩れる

Question

###WordPressの自作テーマで、レイアウトが崩れてしまいます。
想定しているもの（HTML/CSSで組んで、プレビューしたもの）

PHP化して、wordpressにあげた結果。

環境は、以下の通りです。

WordPress 5.1.1

Google Chrome

コードはそれぞれ以下の通りです。

想定しているもの

    <footer class="footer">
        <div class="footer-contents">
            <div class="social">
                <ul>
                    <li class="social-icon">
                        <a href="https://twitter.com/Ryunosukehama"><img src="./images/Twitter_Logo_WhiteOnImage.png" width="30px" height="30px"></a>
                    </li>
                    <li class="social-icon">
                        <a href="https://www.instagram.com/?hl=ja"><img src="./images/glyph-logo_May2016white.png" width="30px" height="30px"></a>
                    </li>
                    <li class="social-icon">
                        <a href="https://github.com/ryujno"><img src="./images/GitHub-Mark-Light-64px.png" width="30px" height="30px"></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>Copyright - ryujno, 2019 All rights reserved.</p>
        </div>
    </footer>

/*==================================
* footer
*==================================*/
.footer {
    width: 100%;
    background-color: #0E0E0E;
    text-align: center;
    padding:10px;
}

.footer-contents {
    display: block;
    margin:30px auto 20px;
    width:100%;
}

.social .social-icon{
    display: inline-block;
    margin: 0 30px;
}

.social-icon a{
    display: block;
    width: 100%;
    height: 100%;
}

.copyright {
    color: #FFFFFF;
    font-size: 0.8rem;
}

そして以下は、wordpress用に、HTMLをfooter.php化したものです。該当部分のCSSはそのままです。

    <footer class="footer">
        <div class="footer-contents">
            <div class="social">
                <ul>
                    <li class="social-icon">
                        <a href="https://twitter.com/Ryunosukehama">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/Twitter_Logo_WhiteOnImage.png" width="30px" height="30px">
                        </a>
                    </li>
                    <li class="social-icon">
                        <a href="https://www.instagram.com/?hl=ja">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/glyph-logo_May2016white.png" width="30px" height="30px">
                        </a>
                    </li>
                    <li class="social-icon">
                        <a href="https://github.com/ryujno">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/GitHub-Mark-Light-64px.png" width="30px" height="30px">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <p>Copyright - ryujno, 2019 All rights reserved.</p>
        </div>
    </footer>

実際変えているのは、画像のパスくらいなのですが、
冒頭のキャプチャの通り、レイアウトが大きく崩れてしまいます。

Chromeの開発環境で、調べてみたところ、
footer-contentsをwidth100%にしているにもかかわらず、
135×255というめちゃくちゃに狭いサイズにされており、
「それが原因なのでは？」と思っていたのですが、
いじってもいじっても解決せず、GW最終日なのに4時間ぐらい費やしてしまい、、
埒が明かないので投稿させていただきました。

足りない情報があればご指摘ください。
何卒よろしくお願いします......！

Comments

[退会済みユーザー]

デザイン時のhtmlと、テーマに適用したあとの該当箇所htmlソースを比較したら、なにかわかるんじゃないでしょうか。

[ryujno]

コメントありがとうございます！
比較してみたのですが、htmlは変わらずでした。。。

Answer 1

例えばGoogle Chromeでいうデベロッパーツール、Firefoxでいう開発ツールで、
該当箇所のhtml要素（img、a、li）や、classがfooterやsocialに適用されているスタイルを調べてみてください。
テーマに含まれるスタイルシートによって意図しないスタイルが適用されているのではないかと。

Answer 2

CSSファイルが読み込まれていないので
CSSファイルを読み込みましょう。

ChromeのデベロッパーツールのNetwork => CSS を確認すれば
CSSファイルが読み込まれているかどうかわかります。

Answer 3

Google Chromeのキャッシュを削除したらうまくいきました！
@m6uさん、@yasutomiさんのコメントをもとに、
デベロッパーツールを根気よく見ていったところ、
なぜか書いたハズのcssが消されている状態になっていました。

そこで
「wordpress 自作 css 　消えている」とググって出てきたこの記事
【WordPress】デザインが反映されない / CSSが効かない時の対処法
https://jin-theme.com/manual/delete-cache/
を参照しつつ、キャッシュの削除をしたら、ちゃんと反映されました！

早々にお返事いただきありがとうございました！