アイキャッチ画像をタイトル直下に表示する方法（テーマOnetone）
ワードプレスの固定ページでアイキャッチ画像をタイトルの直下に表示するためのカスタマイズ方法は以下の通りです。
page.php の ↓この辺りに赤文字を追記した
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<?php if ( $display_breadcrumb == ‘yes’ ): ?>
<!—————-アイキャッチをタイトル上に—————–>
<p class=”resizeimage”>
<?php the_post_thumbnail();?>
</p>
<!—————-アイキャッチをタイトル上に—————–>
<section class=”page-title-bar title-left no-subtitle” style=””>
<div class=”container”>
<hgroup class=”page-title”>
<h1>
<?php the_title();?>
</h1>
画面の横幅いっぱいに画像を表示し画面幅に合わせてサイズを変えるために style.css に以下赤文字を追記した
/*アイキャッチをタイトル上に*/
p.resizeimage img {
width: 100vw;
}
「vw（viewport width）」は他の干渉を受けずに表示させる単位。