TEDASK(テダスク)トップTEDASKについて代表プロフィール各種サービスのご案内ホームページ制作WEB集客サポート各種料金コラムお問い合わせTEDASKは埼玉県川口市のフリーランスWEBエンジニアが運営するホームページです。2018年12月20日こんにちは。今日はHTMLのbackground-imageについてのお話しです。background-imageはよく使うCSSのプロパティですが背景画像を設定するものですね。url("ここに画像のパスとファイル名を記入");ですね。urlのパスの指定を間違うと当然ですが、表示されません。パスというのは表示したい画像が置いてある場所の事です。ここでパスの書き方ですが、この記述がstyle.cssなどのCSSファイルだとしたらそのCSSファイルがあるところから見た画像の置き場という相対パスでの指定になります。一般的にstyle.cssはテンプレートフォルダの直下にありますね。wp-content/themes/theme名/style.cssそして、theme名フォルダの中に画像が入っているimgフォルダがあるとします。url("img/ファイル名");でOKです。したら、別のパターンで、例えば以下のようなフォルダ構成の場合index.htmlimg(フォルダ)---画像が入っているcss(フォルダ)---style.cssとかreset.cssなどが入っているこのCSSフォルダの中のstyle.cssで同様に、background-imageを設定するとしたらこうなります。url("../img/ファイル名");上の例と違いが分かりますか?../というのが追加されていますね。この../(カンマ、カンマ、スラッシュ)というのはこの一セットで一つ上の階層に移動するという意味があります。これはlinuxとかいわゆる黒い画面でも1階層上に移動するときは、同じく../を使います。上のURLは「1階層上に移動して、その階層にあるimgフォルダの中のファイル名を読み込む」という事になります。因みに、../../と2回書くと当然、2階層上に移動することになります。分かってしまえば簡単ですね!background-imageのurl指定で画像が表示されない原因でした!それでも難しいと思う方はこちらTEDASKでは個人向けに、マンツーマンのホームページ制作レクチャーを行っております。メールサポートのプランや、対面もしくはSkype、Zoomを使った1時間のセッションなどのサービスを行っておりますので是非ホームページ制作レクチャーの詳細をご覧になってみてください。【WordPress勉強会】第15回WordPress勉強会&もくもく会活動報告(2020/01/04)【WordPress勉強会】第15回WordPress勉強会&もくもく会活動報告(2020/01/04)の記事は次のリンクからご覧いただけます。プラグインWordPressで無料メールマガジンが出来るプラグインMailPoetの設定方法WordPressで無料メールマガジンが出来るプラグインMailPoetの設定方法についてはWordPress専門のサイトにて記事を公開しておりますので、下のリンクから移動して下さい。パートナー募集にiOSアプリ制作ができるエンジニアさんの募集も加わりました。ニュースキャッシュレス・消費者還元事業の対象となりました。