エントリーカードに「NEW」のgif画像を入れたい

gif画像はサーバー内の/images/NEW.gifに格納しています。
作った画像の大きさは適当なので、上手く収まるようにサイズ指定できるとありがたいです。

こんにちは。
画像や画像の大きさなど不明なのと、NEW.gifはデフォルトで入ってないので、以下の通りでお願いします。

※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

https://lh3.googleusercontent.com/4uJkvB4dLOjkdvBb2Fc2O1E_HbBHi1HXuhfpLR1uO60Lzel9Pdxiqoq2q0ffzbtLfceCkbsN6-uYJ7_OmHn7PeE0JxBleTxpcLy67PIFtb55zROgFPzGi7v-McF_qA7q93Y_TSDphRff07HeJTW29OSDSKO9UsK6AeV6pisjXW_XDxezjXLxBZRd1mrEn3sl0ah_C1wCuaOgoCzQkUax2ztpoYiNEntWVctYfAbXPhd8f1dk2uiiJTF7m2pLz1xFDjquPMCp8TZM__44QO3fCmzHW0Nj7hnIUfrOTZ-p0TQOYiLbophI3wMz_xm2maOHFD3-23y8U4j3wplhG_CAoEqrl1WsE-0rzyvdfywdkqhdK6iZPglos5WpeQtl3oo0nhOLugQJ0UBp9yC06vWeePT0noG_xOC3lOOtWVlp2nEyXNTHfzwC9tWDR0fjjyhCDy5JjI-jwmuUMEgQrQuLRwuatvlw_4UZNSpBSo6VQ6hUywWibrNzkC74QCcVCpsFy-AYvWy-uoscEMhee6Ux6KXN1_dibvkcnhmL6_5j0TdDQL_BzNAeUKZuGD9VLT367zP_2v3yLbO24gvxAS_H5PIkWNvcRz0eqioqNQ=w550-h302-no

これでいかがでしょうか？

Googleのログイン画面になりますので、こちらのアドレスで合わせました。

https://wp-simplicity.com/category/news/

画像は以下の画像にしました。

https://wp-simplicity.com/wp-content/uploads/2018/02/pexels-photo-450597-150×150.jpg

.entry h2 a:after{
	content: "";
	background: url(https://wp-simplicity.com/wp-content/uploads/2018/02/pexels-photo-450597-150x150.jpg) no-repeat;
	padding-left: 1.2em;
	background-size: contain;
}

https://gyazo.com/9598ba75c3ddfa2d729f12914394ad28

以下はimages/no-image-320.pngで合わせたものです。

.entry h2 a:after{
	content: "";
	background: url(images/no-image-320.png) no-repeat;
	padding-left: 2.1em;
	background-size: contain;
}

https://gyazo.com/55b3e399c407691a82a71a14e95df507

画像サイズに合わせて調整してください

ご丁寧にありがとうございます！

ひとつ質問なのですが、こちらのコードは「追加CSS」に追加して利用できるようになるのでしょうか？

「追加CSS」は使ったことがないですが、子テーマstyle.cssでも大丈夫です。

バックアップや復元・自分でカスタマイズするなど考えたら、子テーマstyle.cssが（個人的に）便利だと思います。

追加CSSで様子見て、子テーマstyle.cssに追記しても良いかもしれません？使い勝手の良い方、好きな方を使えば良いかと思われます。

今やってみてうまく表示できたのですが、これって「更新から何日までのものにのみ表示」という指定ができないのでしょうか？
全てのカードに表示されてしまうのですが。。。

度々もうしわけありません。

あっ、完全に忘れてました笑

スタイルシートリファレンス:first-child擬似クラス

こちらを付けてチェックしてもらったら反映されるはずです。ちなみにこれは初めの要素だけです。

2つ目3つ目などは対応できるのは知ってますけど、何日・・・はどうなんでしょう…。やった事が無いので何ともわかりません。

:afterが付いてるので、試してみないと何とも言えなさそうです。他の方法がすぐに思いつかないので、思いついたら投稿しようかと、今思ってます

entry-card-content.php の <h2>タグの下の 14 行目から 20 行目に以下のコードを追加。

<?php
$post_time = get_the_time( 'U' );
$days = time() - ( 60 * 60 * 24 * 7 );
    if ( $post_time > $days ) {
echo '<i class="new-image"></i>';
}
?>

$days = time() - ( 60 * 60 * 24 * 7 );の最後の 7 が日数です。 7 にすると 1 週間、 3 にすると 3 日間表示されます。

あとは<i class="new-image">に CSS で背景画像を指定。指定方法は、かうたっくさんの CSS から要素名を変えるだけです。
ただ、.entry h2に対し、display: inline;の指定追加が必要です。

おそらく、これでご希望のカスタマイズはできると思います。

ごめんなさい。 entry-card-content.php に追加するコードは、下記のものがより良いです。

<?php
$post_time = get_the_time( 'U' );
$days = time() - ( 60 * 60 * 24 * 7 );
if ( ( $post_time > $days ) === true ) {
    echo '<i class="new-image"></i>';
}
?>

みなさんありがとうございます。

ただ素人の私には何を言っているのかさっぱりわかりません。

akiraさんの･･･
「あとは<i class=”new-image”>に CSS で背景画像を指定。指定方法は、かうたっくさんの CSS から要素名を変えるだけです。
ただ、.entry h2に対し、display: inline;の指定追加が必要です。」
が、具体的に何を記述すればいいのか正解のコードがわからないのですが。

CSSの記述も必要という意味でしょうか？

「i=class～」がどういう意味がわかりません。

<?php
$post_time = get_the_time( ‘U’ );
$days = time() – ( 60 * 60 * 24 * 1 );
if ( ( $post_time > $days ) === true ) {
echo ‘<i class=”http://～/～/～/NEW.gif”></i>&#8217;;
}

という意味でしょうか？

分かりにくい表現との指摘をいただきまして、勉強になります。

ただ。どうすればスレ主にとって良いようになるものか…と考えに考えて、お時間を割いてもらって回答されたことだと思いますよ。

ただ素人の私には何を言っているのかさっぱりわかりません。

逆にサッパリされた感じが個人的には好きですが、時間を割いて考えてくださったことに対して怖い返信で、ある意味おののいてるおります。

回答側は助けになるならばとおもってますが、終始こちらのお願いは全スルー・やりたいのはこう！こうではない！の一点張りでそう感じてしまっただけかもしれませんが＾＾；

いや…私生活も凄いかたなのかもしれませんが、回答側も助けになれば…との気持ちがあってやってることですので。またお互い私生活・仕事・ブログ作成をやっている中でのやりとりです

レスポンスを汚してスミマセンが。。表現は難しいですし、勉強になることでもあるな。と、だけのスレ汚しとなりますが、書き込み終了とさせていただきますね❦

私が提案したカスタマイズは、以下の 3 ステップで終わります。

ステップ 1 : entry-card-content.php を子テーマに設置

FTP ソフトやサーバーのファイルマネージャー機能を使い、親テーマにある entry-card-content.php を子テーマに設置します。
親テーマからコピペをし、設置してもいいです。また、 Simplicity 親テーマをダウンロードし、 entry-card-content.php を抜き出して、子テーマにアップロードしてもいいです。お好きな方をお選び下さい。

ステップ 2 : entry-card-content.php にコードを追加

子テーマに設置した entry-card-content.php から、 13 行目の下記のコードを探します。

<h2><a href="<?php the_permalink(); ?>" class="entry-title entry-title-link" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

上記のコードの下の 14 行目から 20 行目に、下記のコードを追加します。

<?php
$post_time = get_the_time( 'U' );
$days = time() - ( 60 * 60 * 24 * 7 );
if ( ( $post_time > $days ) === true ) {
    echo '<i class="new-image"></i>';
}
?>

ステップ 3 : CSSを指定

子テーマの style.css に下記の CSS を追加します。

.new-image {
  content: "";
  background: url(http://www.example.com/bck.png) no-repeat;
  padding-left: 1.2em;
  background-size: contain;
}

.entry h2 {
  display: inline;
}

ご丁寧な解説ありがとうございました！

お蔭様で、思い通りになりました。