MENU

記事一覧にNEWマークを表示してみた!

当サイトでは記事一覧に画像と文章をカード型で表示していいます。   このようなタイプの記事一覧に「最新記事」を目立たせるため、下記の様な「NEW」の画 ・・・

記事一覧にNEWマークを表示してみた!

当サイトでは記事一覧に画像と文章をカード型で表示していいます。

 
このようなタイプの記事一覧に「最新記事」を目立たせるため、下記の様な「NEW」の画像を表示させたいと思います。

 

 
 

表示させる画像を用意する

表示させる画像は透過画像で作成します。

 
当サイトでは、目立つように真っ赤な画像(PNG)を作成してみました。
(当例では、NEW画像をテーマのimgフォルダにアップロードして利用します。)

 

 

公開して3日間だけ記事一覧にNEWマークを表示

前項で画像が用意できましたので、テーマに表示部分を追加します。

 

記事一覧に表示部分を追加する。

なるべく簡単なコードで表示させることにしました。


<?php if( time() - get_the_time('U') < 259200 ): ?>   
  <div class="new-mark"></div>   
<?php endif; ?>

 
time()は現在時刻を Unixエポックからの通算秒として返すので、get_the_time(‘U’)もUnixタイムスタンプを取得させています。
 
なお、「259200」は3日間の秒数(60x60x24x3)です。

 

CSSで表示させる

前述の表示用コードで、「new-mark」というクラスを指定しましたので。このクラスに「NEW画像」を表示させるCSSを追加します。


/* 記事のブロック表示(一部抜粋) */
.post-list article {
  position: relative;
  z-index: 10;
}

/* newマークの表示 */
.new-mark {
  position: absolute;
  left: 0; top: 0;
  width: 50px; height: 50px;
  background: url('img/new.png');
  z-index: 100;
}

 
CSSは自サイト用に書きかえて利用して下さい。

 
下図は当サイトの記事に表示させるようにした例です。

 

 
 

HOME


関連コンテンツ



コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA