アイキャッチ画像を背景画像にする方法

WordPressテーマカスタマイズ

WordPressのアイキャッチ画像を背景画像して表示するには、アイキャッチ画像のURLを取得してスタイルシートのバックグラウンドに設定する必要があります。

アイキャッチ画像のURLを取得する方法

アイキャッチ画像のURLを取得して出力する方法にアイキャッチ画像のURL取得方法を書きましたが、以下のコードを使用してURLを取得して出力します。

echo wp_get_attachment_url( get_post_thumbnail_id() );

アイキャッチ画像を背景画像にする方法

アイキャッチ画像を表示する箇所にHTMLタグを挿入し、タグにスタイルシートbackgound-imageを設定してURLに表示するアイキャッチ画像のURLを出力するWordPress関数を設定します。

<span style="background-image: url(
<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)"></span>

上の例では、spanタグを使用していますが、テンプレートの内容に応じて他のタグを使用してもいいと思います。

表示については、仮に上記のコードの場合でCSSを設定するとしたらspanタグに適当なclass設定を追加します。

<span class ="thumbnails-background" style="background-image: url(<?php 
echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>)"></span>

CSSの例

.thumbnails-background {
  height: 150px;
  width: 150px;
  border: solid 1px #ccc;
  display: inline-block;
}
スポンサーリンク

コメント

  1. […] アイキャッチ画像を背景画像にする方法|WordPressテーマカスタマイズ […]

  2. […] アイキャッチ画像を背景画像にする方法|WordPressテーマカスタマイズ […]

  3. […] で、たどり着いたのがこのサイト。これとドットインストールの手順を参考に下の画像のように書いてみましたが、サムネイルに設定した画像は表示されませんでした。 […]

タイトルとURLをコピーしました