▶ Windows 11情報をお求めの方はこちらをクリック

「Simplicity」でサムネイル画像にカテゴリをCSS変更だけで表示する方法(スマホ対応)

2 min

今回は、Simplicityでアイキャッチ画像を設定するとトップページに表示されるサムネイル(アイキャッチ)画像に、カテゴリ情報を表示する方法をご紹介します!

スタイルシート(style.css)を変更するだけですので簡単です。もちろんスマホ対応!コピペでOK!entry-card.phpの変更不要!です。

 

カテゴリ表示後のイメージ

本記事でご紹介する変更内容を適用すると、Simplicityトップページのサムネイル(アイキャッチ)画像にカテゴリが表示されるようになります。

パソコンとスマホそれぞれの画面でご紹介します。

 

パソコン(PC)

 

スマホ

 

style.css変更内容・方法

子テーマをインストールしていない方は、まず子テーマをインストールします。Simplicityの場合は、こちらからインストールできます。

 

次に、「外観」⇒「テーマの編集」⇒ スタイルシート(style.css)を開きます。

 

「/* Simplicity子テーマ用のスタイルを書く */」の下に以下のコードをコピペします。

/* ▽サムネイル画像にカテゴリ名を表示▽ */
#list .category .fa {
	display: none;			/* アイコン消す */
}
#list .entry {
	position: relative;
}

 /* カテゴリ表示領域設定 */
#list .category {
	position: absolute;
	left: 0px;
	top: 3px;				/* 高さがずれる場合はここで調整 */
	background: #FF6633;	/* 背景色 */
	padding:0;				/* 余白 */
	opacity: 0.9;			/* 透明度 */
}

 /* カテゴリ文字設定 */
#list .post-meta .category a {
	color:#FFFFFF;			/* 文字色 */
	font-size:12px;			/* 文字サイズ */
	font-weight:bold;
	text-decoration:none;
	padding:0 4px;			/* 余白 */
}

/* @media~はスマホ用 各設定項目は上記参照 */
@media screen and (max-width: 440px){
	#list .category {
		position: absolute;
		left: 0px;
		top: 5px;
		background: #FF6633;
		padding:0;
		opacity: 0.9;
	}
	#list .post-meta .category a {
		color:#FFFFFF;
		font-size:9px;
		font-weight:bold;
		text-decoration:none;
		padding:0 2px;
	}
}
#list .post-meta .category {
	padding-right: 0;
}
/* △サムネイル画像にカテゴリ名を表示△ */

 

背景色・文字色サイズ・余白の変更方法

「カテゴリ表示後のイメージ」でご紹介した表示内容から、自分なりにカスタマイズしたい場合に、どこを変更すればよいかをご説明いたします。

以下を参考にオリジナルのカテゴリ付きサムネイル(アイキャッチ)画像を表示してみましょう!

 

背景色の変更

サムネイル(アイキャッチ)画像の雰囲気にあわせて、カテゴリ文字の背景色を変更してください。

まず現在設定されている背景色は「#FF6633」です。これを好きな色(カラーコード)に変更します。

background: #FF6633;	/* 背景色 */

 

下のカラーコード表から好きな色を選びます。

 

例えば、背景を黒にしたい場合は、次のように変更します。

background: #000000; /* 背景色 黒に変更*/ 

 

文字色・サイズ

カテゴリ名が長いなどで、サムネイル(アイキャッチ)画像からカテゴリ文字がはみ出る場合は、カテゴリ文字サイズを調整する必要があります。

またカテゴリ文字の背景色を変更した場合は、背景色に合わせて文字色を変更する必要があります。

文字の色は、次の「#FFFFFF」を好きな色(カラーコード)に変更します。文字サイズは、次の「12px」を好きな数字に変更します。

 
color:#FFFFFF; /* 文字色 */ 
font-size:12px; /* 文字サイズ */

 

例えば、文字色を黒に、文字サイズをさらに大きく18pxにする場合は、次のように変更します。

color:#000000; /* 文字色 黒に変更*/ 
font-size:18px; /* 文字サイズ 18pxに変更*/ 

※当ブログは、パソコン用を12px、スマホ用を9pxに設定しています。

 

余白

余白は、カテゴリの背景と文字の間の余白です。この数字が大きくなればなるほど、背景部が大きく広がり、小さくなれば背景部が小さくなります。

次の「4px」を好きな数字に変更します。

padding:0 4px; /* 余白 */

 

例えば、背景を大きく広げたい場合は、数字を大きくします。

padding:0 8px; /* 余白 背景部を大きく広げる*/

 

まとめ

今回は、人気のWordPressテーマ「Simplicity」でアイキャッチ画像を設定するとトップページに表示されるサムネイル(アイキャッチ)画像に、カテゴリ情報を表示する方法をご紹介しました。

雰囲気がガラッとかわってカッコよいのでとてもお気に入りです。ぜひ、本記事をご参考にオリジナルのサムネイル(アイキャッチ)画像を表示してみてくださいね。

この記事が皆様のお役に立ちましたら幸いです!

SEパパ

SEパパ

外資系IT企業SE職で2児の父ちゃん!職業柄かリサーチ&問題解決が好き。

幅広いジャンルで「お悩み解決」記事を執筆中。月間最高24万PV。雑誌掲載。

読者様に役立つ情報提供を心がけています。

カテゴリー:

コメントを残す

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

CAPTCHA