【Xeory Base】アイキャッチのサイズを投稿の幅に広げ隙間を調整する方法

Xeory Baseのテーマではデフォルトの状態では、アイキャッチ画像が小さめでテキストが回りこむという形となっています。

この記事ではアイキャッチ画像を投稿の幅に広げる方法を解説していきます。




デフォルトを確認

Xeory Baseのデフォルトの状態では、アイキャッチを設定すると次のような表示となります。

これはこれでオシャレではありますが、インパクトを与えたい場合少しパワー不足にも感じます。
そこで今回はこのアイキャッチ画像を大きくインパクトのあるサイズに変更していきます。

アイキャッチを投稿の幅に調整する

アイキャッチの表示に関するファイルはsingle.phpを変更していきます。

ワードプレスの管理画面から「外観」>「テーマの編集」を選択します。
この時single.phpをクリックして選択しておきます。
※この編集はできればsingle.phpを入れた子テーマで行いましょう。

40行目あたりにあるコードを確認します。

<section class=”post-content” itemprop=”text”>

<?php if( get_the_post_thumbnail() ) : ?>
<div class=”post-thumbnail”>
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_content(); ?>
</section>

このコードの中でアイキャッチを呼び出すコードは『<?php the_post_thumbnail(); ?>』というコードです。
『()』の中にサイズを入れ込むことでサイズの変更を行うことができます。
今回は投稿幅に広げるため『’full’』と入力します。

これでアイキャッチのサイズが変更できました。

隙間の余白を調整する

このままでは気になる余白があるので、アイキャッチ画像の横と縦の位置を調整していきます。

横の位置を調整

まずは横にある余白をなくします。
ワードプレスの管理画面から「外観」>「テーマの編集」を選択し、style.cssを開きます。

405行目あたりにある下のコードを確認します。

.post-thumbnail {
margin-left: 20px;
margin-bottom: 20px;
float: right;
}

左からの位置をしている『margin-left: 20px;』を『margin-left: 0;』に変更します。

これで横の余白がなくなりました。

縦の位置を調整

次にタイトルとアイキャッチの間の余白を詰めます。
ここでも先ほどと同じように「style.css」を開きます。

412行目あたりにある下のコードを確認します。

.post-content {
padding: 42px 64px;
overflow: hidden;
}

このコードの中で位置を指定している『padding: 42px 64px;』のコードを『padding: 0 64px 42px 64px;』に変更します。

これでアイキャッチ上部の空間が0となったため、アイキャッチ画像を上に詰めることができました。

これでアイキャッチ画像の余白の調整もすべて完了です。

cssの編集は変更をしてもブラウザの履歴の影響により反映されない場合もあります。
変更して保存したはずなのに反映されないという方は、ブラウザの履歴を削除して試してみて下さい。


2 Comments

こんばんは。

現在Xeory Baseを利用してブログを運営しているのですが、こちらの記事の通りに画像サイズを変更するとサイズは大きくなるのですが、画像左側に文章が来てしまいます。

左側の位置を0にしても反映されず、文頭部分がぎちぎちになって表示されてしまうのですが原因などわかりますでしょうか?

説明力がなく、わかりづらい質問で申し訳ございません。
ご回答いただけると幸いです。

よろしくお願いいたします。

返信する
AMY AMY

杏 さん

コメントありがとうございます!

実際にテストしてみましたが、サムネイルの箇所を( ‘full’ )とした場合でも「サムネイルに設定した画像サイズが小さい場合」は左側に文章がきてしまうことが確認できました。。。
このカスタマイズ方法で投稿の幅に広げたい場合、余裕を持って800pxの幅のある画像を設定しておくことで対処できると思います^^

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA