SWELLの記事一覧タイトルと日付の間を詰める方法
SWELLのテーマのカスタマイズで、記事一覧のカスタマイズの情報です。
記事一覧でタイトルと日付の間に、空白が生まれることがあります。
これは、記事の抜粋が表示される場所です。
でも、この記事の抜粋を利用していないときに、空白が生まれるので謎でした。
色々調べて、記事一覧の抜粋のコードをコメントアウトしたら、 が消えました。
下記のコードが、記事一覧のコードです。
SWELLのテーマのparts/post_list/style_normal.phpです。
このファイルを子テーマにコピーして、修正することをお勧めします。
<li class="p-postList__item">
<a href="https://rakutenmatome.com/?p=2038" class="p-postList__link">
<div class="p-postList__thumb c-postThumb noimg_">
<figure class="c-postThumb__figure">
<img src="https://rakutenmatome.com/wp-content/themes/swell/assets/img/no_img.png" data-src="https://rakutenmatome.com/wp-content/themes/swell/assets/img/no_img.png" alt="" class="c-postThumb__img u-obf-cover lazyloaded"><noscript><img src="https://rakutenmatome.com/wp-content/themes/swell/assets/img/no_img.png" alt="" class="c-postThumb__img u-obf-cover"></noscript> </figure>
<span class="c-postThumb__cat icon-folder" data-cat-id="7">カテゴリ</span>
</div>
<div class="p-postList__body">
<!-- タイトル -->
<h2 class="p-postList__title">記事のタイトル</h2>
<div class="p-postList__meta">
<!-- 日付やその他の情報の表示 -->
<div class="p-postList__times c-postTimes u-thin">
<time class="c-postTimes__posted icon-posted" datetime="2023-10-07" aria-label="公開日">2023年10月7日</time></div>
<!-- コメント数を表示 -->
<div class="comment-count">
<i class="fa fa-comment"></i>
0 コメント
</div>
<!-- コメント数を表示 ここまで -->
</div>
</div>
</a>
<div>
<!-- タグ表示の追加部分
-->
</div>
</li>
この中で、下記のように抜粋の部分をコメントアウトします。
<!--
<?php if (!empty($excerpt)) : ?>
<div class="p-postList__excerpt">
<?php echo $excerpt; // phpcs:ignore WordPress.Security.EscapeOutput ?>
</div>
<?php endif; ?>
-->
するとタイトルのH2タグの後ろにあった の空白が消えました。
SWELLは、抜粋を使わないときは、自動で空白が作られるようです。
この記事が気に入ったらサポートをしてみませんか?