サポート » テーマ » 自作テーマでCSSの背景画像が表示されない

  • 解決済 KonpeitoRO

    (@konpeitowp)


     CSSの背景画像について質問です。独自テーマを使用していますが,CSSの背景画像について書籍やネット記事などを参考にしてトップページのみに表示させようとしました。普通に「front-page.php」のdiv要素にid属性を追加し,それに対して style.css で「background-image」属性を使って相対パスで背景画像を指定しました。
     ファイル構造は,テーマの style.css ファイルと同階層に画像ファイルのフォルダー「images-content」があり,そこにサブフォルダー「logo-animate」の中に「logo-animation.gif」ファイルが保存されています。
     WordPress 5.x対応の解説書『WordPressデザインレシピ集』(https://gihyo.jp/book/2019/978-4-297-10778-9)を参考にしました。Webブラウザー(Microsoft Edge)の開発者ツールの「スタイル」タブで該当div要素に適用されているCSSを確認すると,style.css で相対パスで指定したアドレスが「https://(ドメイン名)/images-content/logo-animate/logo-animation.gif」と表示されていました。これはWordPress側の仕様変更なのでしょうか?
     うまくCSSの背景画像を表示できないので,解決策をご存知の方はご返信いただければと思います。よろしくお願いします。

    コード

    front-page.php

    <?php get_header(); ?>
    	<div id="hero-gif"></div>
    	<div class="maincol">
    		<div class="maincol-container">
    			<?php if( have_posts() ): while( have_posts() ) : the_post(); ?>
    			<?php the_content(); ?>
    
    		</div>
    	</div>
    	<?php endwhile; else: ?>
    	
    	<?php endif; ?>
    <?php get_footer(); ?>
    </main>

    style.css(抜粋)

    /* フロントページのアニメーションGIF */
    #hero-gif {
    	width: 500px;
    	height: 500px;
    	background-image: url(/images-content/logo-animate/logo-animation.gif) !important;
    }

    ※Webページ(https://kinsta.com/jp/blog/wordpress-background-image/#wordpress-4)を参考にfunctions.phpにもコードを追記しましたが表示されません。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    こんにちは

    ルートパスになってますね。
    background-image: url(/images-content/ ……

    background-image: url(images-content/ ……

    トピック投稿者 KonpeitoRO

    (@konpeitowp)

     ご返信いただきありがとうございます。ご指摘の通り,相対パスの最初に「/」が入っていたので,表示されませんでした。「/」を削除し,無事解決しました。
     ちょっとしたことでも落とし穴がありますね。解決できたのでよかったです。ありがとうございました。また何かあればよろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。