2017.12.25アイキャッチ画像の上にカテゴリーを重ねて表示しているサイトをたまに見かけます。おしゃれだなーと思っていたので、テーマTwentySeventeenのコードをいじくってみました。その時の実装方法をご紹介します。修正するPHPファイルは以下のとおりです。子テーマに配置しておきましょう。public_html/wp-content/themes/子テーマ/template-parts/post/失敗しても復元できるように、バックアップを取っておくと良いでしょう。以下の記事で、トップページが一覧表示されるようにカスタマイズしていますので、よろしければ参考にしてください。一覧表示された状態でアイキャッチ画像の上にカテゴリを重ねて表示した方が、良い見栄えになります!CHECKTwentySeventeenでサムネイル(アイキャッチ画像)付き記事一覧を表示する方法!カスタマイズ方法content.phpの変更まず、content.phpファイルの以下のコードを探してください。どこかに書いてあるはずです。?>これを見つけたら、</a>の後に、以下のコードを追加します。?></p>追加すると、このようなコードになります。?>はカテゴリー名を表示するコードです。?>がある箇所に追加しました。“thumbnail-category-tag”>というクラスを指定しています。style.cssファイルの変更カテゴリー名を表示する位置の調整と、デザインを変更していきます。私は以下のとおりにしました。これをstyle.cssの最後に追加します。6px;font-weight:700;}.post-thumbnail{position:relative;}rgba()の最後を0.8(1以下)に設定して、ちょっと透過させる謎のこだわりをしてみました。完成品このように、アイキャッチ画像にカテゴリー名が重ねて表示されるようになりました。ちなみにカテゴリーを階層化している場合は、子のカテゴリーが表示されます。応用編:カテゴリー毎に背景を色分けする上記のカスタマイズを少し変えて、カテゴリー別に色を変更する方法をご紹介します。先ほど、</a>の前に、コードを入力しましたが、カテゴリー毎に背景を変えたい場合は、以下のコードを追加します。?>というクラスを追加しています。これは、カテゴリーのスラッグを取得するコードです。スラッグとは、カテゴリーで指定する以下の赤枠で囲まれた内容のことです。これを指定しないと、カテゴリー別に色分けすることができませんので、注意してください。追加すると、このようなコードになります。取得したスラッグ名を使って、色の指定を行います。以下の様にコードを設定しました。これをstyle.cssの最後に追加します。※スラッグ名(以下の.racing-carと.work)は、ご自分の環境に合わせて修正してください。以下のように、カテゴリー別に背景を色分けをすることができました。育児・マイホームアイテムレビューブロガーだちたまこんにちは!「だちたま」です。2人(4才・0才)の4人家族。元エンジニアの夫に教えてもらいながら、WordPressのカスタマイズ・プログラミングについてお勉強中。