個人事業主、中小企業向けのホームページ制作、チラシ制作

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

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

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

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

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

アイキャッチ画像は、前回のブログで説明したように、
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 で

スポンサーリンク

コメントを残す

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

CAPTCHA


ページトップボタン