デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPress アイキャッチ画像の上にカテゴリ名を表示

【更新情報】2017年6月7日文言等を追記・修正しました。

前回、アイキャッチ画像の表示方法を紹介しましたが、
今回は、アイキャッチ画像の上にカテゴリ名を表示させてみたいと思います。

※前回記事:【WordPress アイキャッチ画像の追加方法

画像の上にカテゴリ名1

スポンサーリンク

画像の上に文字を重ねて表示する方法

画像の上に文字を重ねて表示するには、
CSSのpositionプロパティのrelativeとabsoluteを使います。
順を追って説明します。

【step1】 アイキャッチ画像の下に出力させたい文字を書く

アイキャッチ画像は、前回のブログ(WordPress アイキャッチ画像の追加方法)で説明したように、the_post_thumbnail()で出力します。
したがって、まずは、the_post_thmbnail()の下に出力させたい文字を書きます。
この段階では、まだ画像の上に文字は出力されません。
画像の上にカテゴリ名2

【step2】 画像と文字をposition:relativeで指定

次に、画像と文字(p要素)を纏めてdiv要素で囲み、クラスを指定します。
CSSファイルで、このクラスのpositionプロパティをrelativeに指定します。
この時点では、まだ表示に変化はありません。
画像の上にカテゴリ名3

【step3】 文字をposition:absoluteで指定

次に、文字(p要素)にクラス名をつけ、CSSファイルで、positionプロパティをabsoluteに指定します。
これで、画像の上に文字が重ねて表示されました。
文字の配置を調整するには、top, left, right, bottomで調整していきます。
画像の上にカテゴリ名4

カテゴリ名の取得方法

さて、ここまでくれば、あとは、カテゴリ名を取得できれば、
画像の上にカテゴリ名が表示できます。
カテゴリ名を取得するには、get_the_category()を使用します。
以下のソースを出力させたい文字の部分に貼り付けてください。

画像の上にカテゴリ名5

これで、カテゴリ名がアイキャッチ画像の上に表示されました。

補足説明:
get_the_category()関数では、カテゴリ名以外にも色々な情報が取得できます。
以下のサイトを参考にすれば良いと思います。
WordPress公式オンラインマニュアル

まとめ

画像を重なるには
・画像と文字をdivで囲み、position:relativeで指定する。
・重ねたい文字をposition:absoluteで指定する。
カテゴリ名を取得するには
・get_the_category()を使用する。

以上、アイキャッチ画像の上にカテゴリ名を表示する方法でした。
参考になれば幸いです。

以下記事では、今回表示させたカテゴリー名を色分けする方法も紹介しています。
↓↓よろしければ続けてどうぞ!!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン