STINGER8の関連記事をCSSでかっこよくタイル形式に表示する方法

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレスの「STINGER8」では、デフォルトの状態で投稿記事の下に関連記事が表示されています。

デザインとしては記事一覧と全く同じリスト形式が採用されているので、少し見栄え的にも変わり映えがないように感じていましたし、この機会のもっとかっこよくタイル形式に表示してみようと思います。

関連記事は「YARPP」や「Contextual Related Post」プラグインを使えば、簡単に導入することができますが、サーバーの負荷を考えてあまりプラグインを増やしたくないという方も多いでしょう。

そこでCSS初心者の私のような方でもプラグインなしでSTINGER8の関連記事を、かっこよくタイル形式に表示させる方法を、できるだけわかりやすくご紹介していきます。

関連記事をタイル形式で表示させる方法

ワードプレス管理画面のメニューから、「外観」⇒『テーマの編集』をクリックしてファイルの編集画面に移動します。

STINGER8のテーマ内にある「kanren.php」と「style.css」ファイルを使って編集を行っていきます。

ファイル編集は子テーマ「STINGER8 Child」で進めていきますので、もし親テーマにしか「kanren.php」がない場合は、FTPソフトで子テーマ内にファイルをアップロードしておいて下さい。

また、テーマの編集を行う際は複数タブを開いておき、不都合が起きた場合にすぐに編集前の状態に戻せるよう準備しておくことをオススメします。

また、ご紹介する編集内容は「STINGERの関連記事をグリッド表示っぽくデザイン変更してみた」の記事を参考にさせて頂いています。

子テーマ「kanren.php」を編集

初めに「kanren.php」を開き、ファイル内の下の方にある以下の記述を探しましょう。

$st_query = new WP_Query( $args ); ?>
<?php
if ( $st_query->have_posts() ): ?>
	<?php
	while ( $st_query->have_posts() ) : $st_query->the_post(); ?>
		<dl class="clearfix">
			<dt><a href="<?php the_permalink() ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
						<?php the_post_thumbnail( 'thumbnail' ); ?>
					<?php else: // サムネイルを持っていないときの処理 ?>
						<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
					<?php endif; ?>
				</a></dt>
			<dd>
				<p class="kanren-t"><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></p>

				<div class="smanone2">
					<?php the_excerpt(); //抜粋文 ?>
				</div>
			</dd>
		</dl>
	<?php endwhile; ?>
<?php else: ?>
	<p>関連記事はありませんでした</p>

見つかりましたら、上記のコードを以下の色がついている部分のみ、コード内容を変更・追加していきます。

$st_query = new WP_Query( $args ); ?>
</div>
<div class="random">
<?php
if ( $st_query->have_posts() ): ?>
	<?php
	while ( $st_query->have_posts() ) : $st_query->the_post(); ?>
		<ul class="clearfix">
			<li><a href="<?php the_permalink() ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
						<?php the_post_thumbnail( 'thumbnail' ); ?>
					<?php else: // サムネイルを持っていないときの処理 ?>
						<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
					<?php endif; ?>
<span><?php the_title(); ?></span>
				</a></li>
		</ul>
			<dd>
				<p class="kanren-t"><a href="<?php the_permalink(); ?>">

2・3・15・17列目はコードを追加して8列目は「dl ⇒ ul」に変更し、9・16列目は「dt ⇒ li」に変更して下さい。

「dl」のままだとタイル形式で表示させた時に、歪んでいたのでここでは「ul」に変更しています。

コードの追記と変更が終わったら次に以下のコードをコメントアウトにする為、「dd」の前に「<!– 」、「/dd」の後に「 –>」を追記します。

		<!-- <dd>
			<p class="kanren-t"><a href="<?php the_permalink(); ?>">
					<?php the_title(); ?>
				</a></p>

			<div class="smanone2">
				<?php the_excerpt(); //抜粋文 ?>
			</div>
		</dd> -->

ここのコードは今回の編集では必要ないので削除してしまってもいいですが、また復活させたい時に手間がかかってしまうので、コメントアウトで非表示にしておきます。

以上のファイル編集が完了したら、下にある『ファイルを更新』をクリックしましょう。

子テーマ「style.css」の編集

続いて子テーマの「style.css」で関連記事をタイル形式に表示させていきます。

以下のコードを「style.css」ファイルの一番下に追記します。

/*-- 関連記事エリア --*/
.random {
    padding: 0px;
    margin: 0px;
    text-align: center;/*記事エリア及びタイトルを中央揃え*/
}

.random ul {
    padding: 0px;
    margin: 0px;
    display: inline-block;/*横並びでブロック配置*/
}

.random li {
    float: left;
    position: relative;
    list-style: none;
}

.random li:last-child {/*記事の間隔*/
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.random span {/*記事タイトル*/
    background: rgba(0,0,0,0.6);/*背景色*/
    font-weight: bold;/*文字を太字に*/
    color: #fff;/*文字色*/
    font-size: 12px;/*文字サイズ*/
    padding: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: normal;
    width: 180px;/*タイトルエリアの幅*/
}

.random li img {/*アイキャッチ画像*/
    width: 190px;/*画像幅*/
    height: 170px;/*画像の高さ*/
}

これでファイルを更新すれば、関連記事がタイル形式で表示されているはずです。

後はアイキャッチ画像のサイズやタイトルの色などをブログに合わせて変更して下さい。

こちらがスマホ用のCSSコードになります。

@media only screen and (max-width: 420px) {/*スマホ用*/
.random li img {/*アイキャッチ画像*/
    width: 150px;/*画像幅*/
    height: 150px;/*画像の高さ*/
}
.random span {/*記事タイトル*/
    text-align: left;/*タイトルを中央揃え*/
    font-size: 10px;/*文字サイズ*/
    width: 140px;/*タイトルエリアの幅*/
}
}

基本的には２列で表示されるようになっていますが、画面が小さい機種の場合は１列になってしまう可能性があります。

その際はサイズを調整されてみて下さい。

その他のカスタマイズ

少し変化を付け加えてみたい方は、こちらも参考にしてみて下さい。

カーソルホバーで画像を拡大

カーソルが乗った時に画像が拡大するアクションを追加したい時は、以下のコードを「style.css」に追加して下さい。

.random li {
    overflow: hidden;/*拡大領域固定*/
}

.random li img {
    transition: .3s;/*拡大・縮小速度*/
}

.random li img:hover {/*マウスホバーで画像拡大*/
    transform: scale(1.2);/*拡大率*/
}

先程追加した「random li」「li img」内に対象コードの１文を追加し、「hover」に関するコードはそのまま追加しましょう。

これで画像がはみ出ることなく、領域内で拡大されるかと思います。