今回は、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」でアイキャッチ画像を設定するとトップページに表示されるサムネイル(アイキャッチ)画像に、カテゴリ情報を表示する方法をご紹介しました。
雰囲気がガラッとかわってカッコよいのでとてもお気に入りです。ぜひ、本記事をご参考にオリジナルのサムネイル(アイキャッチ)画像を表示してみてくださいね。
この記事が皆様のお役に立ちましたら幸いです!