SIMWordPressオリジナルテーマでレスポンシプでバグらない投稿ページのPHP・CSS設定を紹介します。
投稿ページのPHP｜single.php
投稿ページのメインコンテンツ部分の抜粋PHPを下記に載せておきます。
<main class="l-main --sidebar">
<section class="l-section --sidebar">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1 class="c-single-h1"><?php the_title(); ?></h1>
<div class="service-thumbnail-wrapper">
<?php the_post_thumbnail('large'); ?>
</div>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</section>
</main>そして投稿ページの直接サムネイルに関係する箇所の抜粋が下記のとおりです。
<div class="service-thumbnail-wrapper">
<?php the_post_thumbnail('large'); ?>
</div>ここで、the_post_thumbnail()の引数がlargeになっていますが、画像サイズの上限を十分な大きさに設定して下さい。設定は、WordPress管理画面の設定＞メディア設定＞サムネイルのサイズ＞大サイズで適切な数字を記入して下さい。
初期設定では中サイズが300px、大サイズが1024pxですので、余程ページ幅が大きい場合を除いて再設定の必要はないと思います。
投稿ページのCSS（SCSS）
CSSを追記しない初期状態では、サイドバー付きのマルチカラムの場合、レスポンシブにサムネイルが対応できずに表示がバグります。
それを解消するために、下記のようにCSSに追記すると正常に表示されるようになります。
// ------------------------------------
// サムネイルの設定
// ------------------------------------
.service-thumbnail-wrapper {
margin-top: 2em;
margin-bottom: 5em;
box-shadow: 6px 6px 16px fw.$shadow-black;
}
.attachment-large {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}パーツごとに解説していきます。
レスポンシブに関係するCSS
Chromeのデベロッパーツールで確認すると、サムネイル（大）のclassはattachment-largeです。これに対して、レスポンシブでバグらないようにCSSを書く必要あります。
attachment-large {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}なお、object-fitは、coverでもcontainでもどちらでも影響ありません。一般的にはcontainが無難かもしれませんね。
余白や装飾に関するCSS
オリジナルテーマの場合は要素の余白がゼロですので、新たに設定する必要があります。私の場合は、サムネイルを囲うタグを作りましたので、そのタグ（service-thumbnail-wrapper）に対して装飾を行いました。
この例では、上方余白を１文字分(1em)、下方余白を２文字分（2em）に設定しています。他にはサムネイルに影を付けるためにbox-shadowも設定しています。
.service-thumbnail-wrapper {
margin-top: 2em;
margin-bottom: 5em;
box-shadow: 6px 6px 16px fw.$shadow-black;
}さいごに
以上、簡単ですが、WordPressオリジナルテーマの投稿ページのサムネイル画像がレスポンシブでバグらない設定を紹介しました。
