【忘備録】固定ページごとにアイキャッチ画像を背景として表示させる方法！

SUGOYOKU BLOG

今回は固定ページごとのアイキャッチ画像をページ上部に背景画像として、取得、表示する方法をご紹介いたします。まずは「function.php」に

// アイキャッチを有効にする
add_theme_support('post-thumbnails');

1 2	// アイキャッチを有効にする add_theme_support('post-thumbnails');

をコピペしてください。するとアイキャッチ画像が設定できるようになります。次に背景画像を表示させたい箇所に

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

</div>

該当のファイル「page.php」や「page-該当するファイル名.php」の分かりやすく上部にコピペをしてください。 divやspanのclassは使いやすいように変更してかまいません(^^) コピペをしFTPなどでアップロードをすると、表示・・・されていませんね！デベロッパーツールで確認すると、背景画像のURLだけが表示されています！なので、CSSにテコ入れ CSS

.bg_thumbnails{
    display: block; /*ブロック要素に変更*/
    height: 550px;  /*背景画像の高さを指定*/
    background-size: cover; /*大きさに指定*/
    background-position: left center; /*背景として設定する場所を指定*/
}

.bg_thumbnails{

display: block; /*ブロック要素に変更*/

height: 550px; /*背景画像の高さを指定*/

background-size: cover; /*大きさに指定*/

background-position: left center; /*背景として設定する場所を指定*/

}

heightで高さをdisplay: block; で表示をさせています！

※ここがないと画面に表示がされないので要注意です！！！

忘れないための忘備録。

ちょこっとメンターサービス

HP無料診断

【実践マーケティング手法２２選】無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

SUGOYOKU BLOG