【STINGER8】サムネイルが目立つTOP記事一覧表示に変更してみた

どうも、トッド（Todd）です。

STINGER8のトップ記事一覧表示は以下のようなスタイルになっています。ところが、タイトルが長くなったりすると記事によって占める領域に差が生まれ、記事同士の配列に統一感を持たせることが難しいと感じたので変更してみました。

実際にどのような仕上がりに変更していくのかというとこんな感じになります。↓

リアルだとこんな感じです。↓

• 僕が感じたデフォルト表示での悩み
• STEP1 適用されるサイズを準備する
• STEP2 new post.phpを変更する
• STEP3 適応させたいエリアにコードを記入する
• STEP4　画像ぼやけを鮮明に

・サムネイル画像が小さく、大きさを変更すると記事本文のレイアウトがスマホで観た時にサムネ画像に押され偏ってしまうのが気に食わなかったので今回のカスタムに挑戦してみようと思いました。

・記事エリアの各記事毎の統一感が「長めのタイトル」、「カテゴリーの数」などによってサムネイル画像の下の隙間部分が(う～ん…)と感じ、記事毎の領域幅の違いが不満に感じる。

まぁ、こういう事です↓

ココの隙間もそうですが、タイトルから本文までが長くなってしまいバランスが悪くなる感じです。

以上の２項目がカスタム要因になりました。

初めからそうなっているテーマを選べばいいんじゃないの？(その通りです)

ただ、STINGER8はシンプルでカスタマイズしやすいことで有名で初心者の僕にとってはカスタママイズすることは楽しいの一つです。

おっと～

それではここから↓

※基本的にSTINGER8 childのstyle.sheetを変更していきます。

stinger8 の親テーマからFTPソフトを使用して子テーマに要素をぶち込む方法はまた別で書いていきます。

今回はぶち込み済みからの話になります。

スポンサーリンク

まずは、子テーマのstyle.sheetに「PC」「タブレット」「スマホ」「全て」どこにCSSコードが適応されるのかを区別するために以下のコードを子テーマのstyle.sheetに書き込みましょう。

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
 ---------------------------------------------------------------------------------------------------*/ @media only screen and (max-width: 959px) {
/*-- ここまで --*/
 }
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
 ---------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width: 600px) and (max-width: 959px) {
/*-- ここまで --*/
 }
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
 ---------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width: 600px) {
/*-- ここまで --*/
 }
/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
 ---------------------------------------------------------------------------------------------------*/
 @media print, screen and (min-width: 960px) {
/*-- ここまで --*/
 }

これらは、stinger8の親テーマの中に書かれているのでコピペして子テーマに書いておきましょう。

ここでは、準備段階ということで、触ってすぐ変化することはありません。後々必要になる変更なので先にやっておきます。

new post.phpの中にこの部分があるので探しましょう。

<?php
/**
 * サイドバーの新着一覧
 */
?>
<p class="menu_underh2">新着記事</p>
<div class="kanren newpost">
	<?php
	$newentrypost_no = 5; //表示したい記事数
	$args = array(
		'posts_per_page' => $newentrypost_no,
	);
	$st_query = new WP_Query( $args );
	?>

みつける事が出来たらこの中の<div class=”kanren”>と表記されている部分があるので上記のコードのように<div class=”kanren newpost”>に変更しておきます。

STEP3 適応させたいエリアにコードを記入する

STEP(1・2)が終わりました。後は端末ごとに変化するコードを打ち込んでいきます。

PC表示

.kanren dt {
	float: none;
	width:500px;
	height:300px;
}

.kanren dt img {
	width: 500px;
	height: 300px;
	padding-left: 70px;
	
}

.kanren dd {
	text-align: center;
	padding-left: 0px;
	margin-top:10px;
}

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

.kanren.newpost dt {
	float: none;
	width: 200px;
	height: 100px;
}

.kanren.newpost dt img {
	padding-left: 50px;
	width: 200px;
	height: 100px;
}

.kanren.newpost dd {
	padding-left: 0px;
    margin-top: 10px;
	
}

上記のコードを下記のエリア内にコピペしてください↓( {から}までの中に書く)

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
 ---------------------------------------------------------------------------------------------------*/
 @media print, screen and (min-width: 960px) {


/*-- ここまで --*/
 }

タブレット表示

.kanren dt {
	float: none;
	width:500px;
	height:300px;
}

.kanren dt img {
	width: 500px;
	height: 300px;
	padding-left: 100px;
	
	
}

.kanren dd {
	text-align: center;
	padding-left: 0px;
	margin-top:10px;
}

.kanren.newpost dt {
	float: none;
	width: 500px;
	height: 300px;
}

.kanren.newpost dt img {
	padding-left: 120px;
	width: 500px;
	height: 300px;
}

.kanren.newpost dd {
	padding-left: 0px;
    margin-top: 10px;
	
}

上記のコードを下記のエリア内にコピペしてください↓( {から}までの中に書く)

/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
 ---------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width: 600px) {


/*-- ここまで --*/
 }

スマートフォン表示

.kanren dt {
	float: none;
	width:300px;
	height:200px;
}

.kanren dt img {
	width: 300px;
	height: 200px;
	padding-left: 20px;
	
	
}

.kanren dd {
	text-align: center;
	padding-left: 0px;
	margin-top:10px;
}

.kanren.newpost dt {
	float: none;
	width: 300px;
	height: 200px;
}

.kanren.newpost dt img {
	padding-left: 20px;
	width: 300px;
	height: 200px;
}

.kanren.newpost dd {
	padding-left: 0px;
    margin-top: 10px;
	
}

上記のコードを下記のエリア内にコピペしてください↓( {から}までの中に書く)

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {



/*-- ここまで --*/
}

【PC・タブレット・スマホ】この3つのコードを記入し、更新ボタンを押すとほぼ完成です。

1度プレビューでサイトを表示してみてください。基本的に500×300pxサイズの画像でサムネイルを表示させると綺麗に表示してくれます。

ここで終わりと言いたいのですが、少し画像がぼやけているのが気になる方はSTEP4に進んでください。

もう、これくらいなんてことないさ！と、思われた方はここで終了になります。

長いよ[/speech_bubble] [speech_bubble type=”ln-flat” subtype=”R2″ icon=”mogakun.png” name=”モガ君”]あと少し[/speech_bubble]

500×300pxで作成したサムネイル画像がぼやけているという方は、Wordpress管理画面から「設定」→「メディア」の設定に進んでください。

そして設定内容を以下のようにしてください。

これでクリアになります。

以上で本当に終了ですお疲れさまでした。

最後まで読んでいただき有難うございました

目次に戻る