採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

TCDテーマChill:トップページのサムネイル画像の配置を変更する

Q.トップページのサムネイル画像の配置をタイトルの上に移動したい

トップページの新着記事一覧では、サムネイル画像が左で、記事の抜粋が右という配置になっていますが、
アイキャッチの登録が無い記事が混ざるとバランスが悪く見えるので、サムネイルをタイトルの下に移動させたいです。

A.下記ファイルの該当箇所を編集します

編集するファイル:style_pc.css
編集する箇所:index, post list内の以下の2行をコメントアウト

/* ----------------------------------------------------------------------
 index, post list
---------------------------------------------------------------------- */

/*.post_item .image { float:left; display:block; position:relative; }*/

/*.post_item .info { width:330px; float:right; }*/


編集するファイル:index.php
編集する箇所:

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="post_item clearfix<?php if (!has_post_thumbnail()) { echo
' no_thumbnail'; }; ?>">
  <?php if ( has_post_thumbnail()) { ?>
  <a class="image" href="<?php the_permalink() ?>"><?php
the_post_thumbnail('size1'); ?></a>
  <?php }; ?>
  <div class="info clearfix">
   <div class="meta clearfix">
    <p class="post_date"><span class="date"><?php the_time('j');
?></span><span class="month"><?php $month = get_the_date('M'); if
(strtoupper(get_locale()) == 'JA') { echo encode_date($month); } else
{ echo $month; }; ?></span></p>
    <ul<?php if ($options['show_comment']) { echo ' class="no_comment"'; }; ?>>
     <li class="archive_date"><?php the_time('Y', 'tcd-w'); ?></li>
     <li class="post_category"><?php the_category(', '); ?></li>
     <?php if ($options['show_comment']) : ?><li
class="post_comment"><?php comments_popup_link(__('Write comment',
'tcd-w'), __('1 comment', 'tcd-w'), __('% comments', 'tcd-w'));
?></li><?php endif; ?>
    </ul>
   </div>
   <h4 class="title"><a href="<?php the_permalink() ?>"><?php
the_title(); ?></a></h4>

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="post_item clearfix<?php if (!has_post_thumbnail()) { echo
' no_thumbnail'; }; ?>">
  <div class="info clearfix">
   <div class="meta clearfix">
    <p class="post_date"><span class="date"><?php the_time('j');
?></span><span class="month"><?php $month = get_the_date('M'); if
(strtoupper(get_locale()) == 'JA') { echo encode_date($month); } else
{ echo $month; }; ?></span></p>
    <ul<?php if ($options['show_comment']) { echo ' class="no_comment"'; }; ?>>
     <li class="archive_date"><?php the_time('Y', 'tcd-w'); ?></li>
     <li class="post_category"><?php the_category(', '); ?></li>
     <?php if ($options['show_comment']) : ?><li
class="post_comment"><?php comments_popup_link(__('Write comment',
'tcd-w'), __('1 comment', 'tcd-w'), __('% comments', 'tcd-w'));
?></li><?php endif; ?>
    </ul>
   </div>
  <?php if ( has_post_thumbnail()) { ?>
  <a class="image" href="<?php the_permalink() ?>"><?php
the_post_thumbnail('size1'); ?></a>
  <?php }; ?>
   <h4 class="title"><a href="<?php the_permalink() ?>"><?php
the_title(); ?></a></h4>

※ハイライト部分をカット(Ctrl+X)アンドペースト(Ctrl+V)しています。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事