バズ部さんが無料で提供しているWordPressのテーマXeory Baseのアイキャッチをカスタマイズします。デフォルトでは、アイキャッチに設定した画像が本文右側に表示されるようになっています。これはこれで悪くはないのですが、アイキャッチなのか本文に挿入された画像なのかいまいちわかりにくいところもあります。今回はこのアイキャッチの表示を変更してみましょう。ご紹介するのは、「アイキャッチ画像を記事の横幅いっぱいに広げる方法」と「アイキャッチ画像を記事内で表示させないようにする方法」です。Xeory Baseの本体ではなく子テーマをカスタマイズするので、子テーマが何かピンとこない方はこちらを読んでまた戻ってきてください。
アイキャッチを横幅いっぱいに広げる
まずはブログのアイキャッチでよく見る、タイトル直後に記事の横幅いっぱいに表示させる方法です。「Azureポータル > App Service Editor」から「WWWROOT > wp-content > themes > [子テーマ名（xeory_base-child）]」内に「single.php」を作成します。single.phpの内容は親テーマのsingle.phpをコピーします。
次に子テーマsingle.phpの48行目付近にある「the_post_thumbnail()」を「the_post_thumbnail(‘full’)」に変更します。これで画像が横幅いっぱいに表示されます。
最後のアイキャッチの余白を調整します。こちらは子テーマstyle.cssに以下を追加します。ちなみに「.post-thumbnail」の部分はアイキャッチ画像の表示領域（single.phpの<div class=”post-thumbnail”…の部分） のスタイル で、左側の余白（margin）を0に設定しています。「.post-content」の部分では投稿とアイキャッチ画像の間隔をなくすため、上方のpaddingを0にしています。「Width: 100%;」は忘れずに入れるようにしてください。これがないと、インターネットエクスプローラーの表示がおかしくなります。
※もともとの画像サイズ以上には横幅は広がりません。上記のように調整したのにまだ画像が右側に表示されている場合は、おそらくアイキャッチ画像のサイズの問題です。
アイキャッチを記事内で表示させない
アイキャッチを横幅フルサイズで表示させる方法を見た方であれば、記事内で表示させないようにすることは造作もないことです。まずは同様に「Azureポータル > App Service Editor」から「WWWROOT > wp-content > themes > [子テーマ名（xeory_base-child）]」内に「single.php」を作成します。single.phpの内容は親テーマのsingle.phpをコピーします。
次に子テーマsingle.phpの48行目付近にある「<div class=”post-sumbnail”>」から次の「</div>」までを削除します。これでアイキャッチが記事内で表示されないようになりました。