福岡市のホームページ制作・SEO対策のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

WordPressでアイキャッチ画像をCSSで背景画像に指定する方法

| カテゴリー : WordPress

WordPressのアイキャッチ画像はサイト閲覧者の興味を引くために役立ちます。

デザインによってはこのアイキャッチ画像を「CSSで背景画像にしたい」という場合があります。
例えば、こうしたタイトル帯の背景に敷いてある画像にアイキャッチ画像を採用したいときなどです。

今回はWordPressのアイキャッチ画像をCSSのbackground-imageに設定する方法をご紹介します。

アイキャッチ画像のURLが取得さえできれば簡単!

次のPHPコードは背景にするアイキャッチ画像のURLを取得するために、WordPress関数を利用したものです。

このコードを使って、アイキャッチ画像を背景画像にするには次のようなコードを書くと良いでしょう。

まず、アイキャッチ画像が使用されている場合は、$img-urlにアイキャッチ画像のパスを保存します。

次にそのパスをbackground-imageに設定したCSSを、任意のHTMLタグにインラインで記述します。
これでアイキャッチ画像が背景に設定できたはずです。

アイキャッチ画像が設定されていなかった場合も考えて、あらかじめデフォルトのbackground-imageをCSSファイルで設定しておくと良いでしょう。
そうすれば、アイキャッチ画像がある場合はインラインのCSSが優先されるようになります。

中小企業のホームページ制作やサイトリニューアルならアイドットデザインまで。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。