【AFFINGER】投稿一覧のサムネイル表示を変更し、アイキャッチ画像をキレイに表示できるようにする

投稿日:2017年4月9日 更新日:

アフィンガーを初期設定のまま使用すると、投稿一覧や関連記事などのアイキャッチ画像の表示が正方形になっています。

こんな感じですね。

管理項目のカスタムで丸形にすることは可能なのですが、横長にして黄金比などで形を作った画像をそのまま掲載することが不可能な状態。

個人的にはせっかく黄金比であったり個人のこだわりがあるサイズで画像を作っているのだから、それをそのままアイキャッチ画像に出来たほうが見栄えも良いし更新している自分のやる気も上がります。

なので、今回はそのカスタム方法を教えていきたいと思います。

スポンサーリンク

投稿一覧に表示されるアイキャッチ画像のサイズを変更する

アイキャッチが表示されている場所を特定する

webサイトを表示してソースを確認すると、一覧記事が表示されている場所のコードはこのような感じで表示されていると思います。

<div class="kanren">
<!-- ここがループされて記事一覧になる -->
   <dl class="clearfix">
      <dt>ここにアイキャッチ画像</dt>
      <dd>
         <h3>記事タイトル</h3>
         <div class="blog_info ">カテゴリーやタグの表示</div>
         <div class="smanone">抜粋記事の表示</div>
      </dd>
   </dl>
<!-- ループここまで -->
</div>

ですので “.kanren dt” に該当する箇所をCSSの記述から探し、そこを変更してやればアイキャッチの画像を変更できるはずです。

親テーマのCSSから検索をかけると、一覧表示関係ありそうな表記がここです。

.kanren dt {
	float: left;
	width: 100px;
}

.kanren dt img {
	width: 100px;
}

.kanren dd {
	padding-left: 115px;
}

.kanren dl {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #ccc;
}

このような記述の仕方ですので、アイキャッチ画像をはめ込めるサイズが100pxしか確保されていません。そのため、ここを変更しないことにはアイキャッチの画像サイズを基本的には変更できないようになっています。
(管理設定から一回りほど大きくすることは出来るみたいですが)

ですので、ここを変更してやりましょう。

.kanren dt {
	width: 240px; /* 希望のサイズに変更 */
	overflow:hidden;
}

.kanren dt img {
  width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	margin: 4px auto;
}

.kanren dd {
  width: 100%;
	padding-left: 8px;
}

.kanren dl {
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #ccc;
  display: flex;
}

すると画面の表記がこのようになります。

アイキャッチの表示領域は大きくなりましたが、アイキャッチの画像そのものは変わっていません。ということは、別の場所 “functions” などでサイズが固定定義されている可能性があります。

次はそちらの方を変更するため定義場所を探しましょう。

アイキャッチの表示方法の指定を変更する

トップページの記述がしてあるであろう “home.php” を開くと、その下の方に “itiran.php” を読み込むための記述が記入してあります。

<?php get_template_part( 'itiran' ); ?>

というところですね。

で、このファイルを見てみると “itiran-original-thumbnail-on.php” “itiran-thumbnail-on.php” のどちらかから条件でファイルを呼び出すようにしていしてあります。

2つのファイルで若干内容が違うのですが、今回使うのは “itiran-thumbnail-on.php” の方ですので、それを子テーマにアップロードします。

そして中身を見てみると、アイキャッチの画像設定が以下のようになっています。

<?php the_post_thumbnail( 'thumbnail' ); ?>

これはデフォルトの状態で使用することを意味しており、基本値の状態が変更されていなければ縦横150pxでの使用を前提としています。

もちろん勝手にリサイズされて横長になったり縦長になることも無いので、縦横どちらかに長い画像を作っていれば両端や上下が切り取られる形になってしまいます。

なので、投稿の最上部に載せるために作った画像をそのままの形で表示するため、以下のように記述を変更します。

<?php the_post_thumbnail( 'full' ); ?>

するとこのような表示変わります。

アイキャッチの表示が途切れず整っているのがわかると思います。

関連記事の表示に関する場所や、サイドバーの新着を表示する場所なども変更してやれば同じように表示されますので、他の場所も変更して見た目を整えてやれば完成です。

スポンサーリンク

-AFFINGER
-, , , ,

Copyright© ビブリオテーク , 2017 All Rights Reserved.