PugをBackgroundで画像を表示させる記述について
はじめに
概要
この記事では、HTML(Pug)のStyle属性を使って画像を表示させる方法について紹介します。これにより、Wordpressのカスタムフィールドとの連携を実現し、画像の編集を簡単に行うことができます。なお、画像についての詳細はこちらの記事を参照ください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
PugのBackgroundの記述方法
コードの表示
devタグにStyle属性を記述
dev(style="background-image: url('./images/top/content.jpg');")
HTML変換後
<div style="background-image: url('./images/top/content.jpg')"></div>
カスタムフィールドとの連携
コードの表示
例：WordpressとACFプラグインとの紐づけ
<div style="background-image: url('<?php the_field("icon-1"); ?>')"></div>まとめ
- Style属性で記述すると、カスタムフィールドとの連携がしやすくなる
- Style属性で記述すればBackground-imageも編集が可能になる
- Backgournd-imageはパスの記述に注意する