Simplicityのアイキャッチ画像にカテゴリー名を重ねて表示

ようやく、Simplicity2でトップページにある記事一覧のアイキャッチ画像上にカテゴリー名を重ねる事が出来ました。

最近よく見掛けるので、いつもの事ですが出来るなら是非ともやってみたいと思いながら数カ月。と言っても、なんか難しそうで中々「よしっ!やろう!」とはいかず、検索だけで時間ばかりが過ぎ去ったって感じです。

有料テーマを購入すれば?って話ですが、それはそれ。

初心者ゆえに何かをやってみようと思ったら、まず検索。ワードプレスもカメラも、まず検索です。ただ、希望する様な記事を直ぐには見つけられない事もあります。

なんせ、基本的にコピペなんで、WordPressテーマなど同じ環境でないと難しんですよね。

Simplicity公式 Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ

スポンサーリンク
スポンサーリンク

コピペカスタマイズに希望の光が

検索を続けていると、「おっ?これは?」なんて思う事もありますが、なんか違うし、書いてある事も難しくて理解に苦しむ事が多いです。

そんな中、見つけた記事を見ていると、

外部リンク WordPress アイキャッチ画像の上にカテゴリ名を表示 | Inoma Create

 概要 
  1. ①アイキャッチ画像を出力するコードの下に②重ねたい文字となるコードを記述。
  2. ①と②を<div>タグで囲む。

なるほど!理屈は分かった気がした。(分ってるのか?)

今回はカテゴリー名をアイキャッチ画像の上に重ねたいので、アイキャッチ画像を出力するコードの下には、

とすれば、一先ず、カテゴリー名が取得される様です。それまで使っていた、

をそのまま使えるのかな?上のコードは何を書いているのか難し過ぎる。

Simplicity2のファイルにコピペ

参考にして出来上がったのが、下の通りです。

Simplicity2のentry-card.phpに記述

ラインで強調している部分を追記しています。class名はなんとなく適当に決めました。

改行というか、書き出しの位置に意味はあるのだろうか?

Simplicity2のstyle.cssに記述

上のclass名をスタイルシートで分からないなりに調整した今回の最終形です。

relativeとabsoluteって、また勉強しないとアカンね。あと、pxやらemやら。

ここまでの仕上がりを確認

パソコンでトップページを確認してみると、当時はこんな感じ。

わぉー。こんなんでも嬉しい。今はまた変わってるかも知れません。

めっちゃ面白いやん。調子に乗って関連記事もやっちゃいました。