超簡単!1分で出来るaffingerの記事上にアイキャッチ画像を反映させる方法

affinger-customize2_sam

affinger』はアイキャッチが記事には出てきません。

最近の流行は記事上にアイキャッチがついていて、見た目も華やかになります。
文字だけのサイトってちょっと読む気がしなくないですか?

早速カスタマイズしてみましたので手順をご紹介します。

affingerの記事上にアイキャッチ画像を反映させるカスタマイズ

では早速カスタマイズです。

まずは「外観」の「テンプレート編集」からスタイルシート『単一記事の投稿(single.php)』を変更します。

affinger-customize1-2

 

そして下記の部分を探してください。

</div>と<?php the_content(); //本文 ?>の間に以下のテキストを追記してください。
上にスペースを開けてあげた方がやりやすいです!

以下の文章を追記

<!? ここからアイキャッチ画像 ?>
<div class=“post-thumbnail”>
<?php the_post_thumbnail(‘full’);?>
</div>
<!? ここまでアイキャッチ画像 ?>

【変更前】

echo ' <i class="fa fa-repeat"></i>&nbsp; ', $mtime;
} ?>
</span></p>
</div>

<?php the_content(); //本文 ?>

<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 5 ) ) : else : ?>
<?php endif; ?>

【変更後】

echo ' <i class="fa fa-repeat"></i>&nbsp; ', $mtime;
} ?>
</span></p>
</div>
<!? ここからアイキャッチ画像 ?>
 <div class=“post-thumbnail”>
 <?php the_post_thumbnail(‘full’);?>
 </div>
 <!? ここまでアイキャッチ画像 ?>
<?php the_content(); //本文 ?>

<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 5 ) ) : else : ?>
<?php endif; ?>

 

以上で終了です。めっちゃ簡単です!

このようになりますので確認してみて下さいね。(バックアップ推奨!!)

affinger-customize2

 

まとめ

いかがでしたでしょうか?

記事幅一杯にアイキャッチが広がるので一気に見た目が変わります。affingerは記事タイトルがH2っぽくなっているので、タイトルと本文を仕切ってくれてバランスもよくなります。

アイキャッチは他の人と差別化する事が出来るのでビジュアル面でも印象に残るサイト作成を目指せます!

コメントを残す

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