>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

記事一覧のアイキャッチ画像にNEWマークを表示する

ルクセリタス・カスタマイズ
この記事は約14分で読めます。
     

当サイトにご質問があった以下の件についての記事になります。

アイキャッチ画像上部に「NEW」を表示したい。

 

参考にさせて頂いたサイト様は以下です。
アイキャッチ画像上に新着【NEW】表示

ルクセリタスでのカスタマイズ方法になります。お使いのテーマによってPHPコードの挿入箇所は異なります。

 

この記事の内容より少しシンプルにカスタマイズしたものは以下をご覧ください。

記事一覧のカードやタイルに設定した日数だけNEWやUPマークを表示する
トップページやアーカイブページでの記事一覧で、新着記事に「Newマーク」を表示します。 そもそもは、当サイトに 「あるサイトで紹介されている方法で、記事一覧のサムネイルに【NEW】を表示したい」 というご相談を頂き、そちらに対応した際に、も...
ayaito.net
2020.03.20

 


 

 上記サイトで紹介されている内容を実現する方法

手順

「ご質問は上記参考サイトの内容を実現したい」との事でしたので、以降、すべて上記サイトのコードを引用しています。

デザインが６パターンあるので、好みのデザインを選択し、以下を行う事で実現可能です。

  1. デザインを１つに決める
  2. 共通部分のCSSコードを記述する
  3. デザイン別のCSSコードを記述する
  4. デザイン別のHTMLコードを含むPHPコードを記述する

 

共通部分

CSS記述

ルクセリタスの場合は以下。

Luxeritas→子テーマの編集→style.css

参考サイトのままのコードです。

*, *:after, *:before {
-webkit-box-sizing:
border-box;
-moz-box-sizing:
border-box;
box-sizing:
border-box;
}
.new { 
font-size: 100%;
padding: 0;
margin: 0;
font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
img{
margin: 0;
padding: 0;
vertical-align:bottom;
}

アイキャッチにNEWを付けるCSS

 

 デザイン別コード

デザイン別CSSについて

CSSは上記同様、スタイルシートに記述します。

 

デザイン別HTMLについて

HTMLを含むPHPコードを記事一覧のスタイル（カード型orタイル型）に合ったPHPファイルを親テーマから子テーマ内にコピーし、記述します。

編集後のPHPファイルをサーバーにアップロードします。

ファイルをサーバーへアップロード、ダウンロードする為のFTP操作については以下を参考にして下さい。

FTPクライアントの使い方（FFFTP）とワードプレスのファイル構成
今回は、私が何十年も変わらず使っているソフト「FFFTP」でFTPクライアントの使い方と、ワードプレスでのファイル構成を紹介します。 既にワードプレスが稼働している方向けの説明になっています。 ワードプレスをこれからインストールされる方は以...
ayaito.net
2019.03.20

 

ダウンロードする場所（親テーマ）
/wp-content/themes/luxeritas

アップロードする場所（子テーマ）
/wp-content/themes/luxech

 

カード型の場合

list-excerpt-card.php

33行目（バージョンによる異なる場合もあります）の以下を探し、その下にコードを記述します。

	if( $post_thumbnail === true ) {	// サムネイル
		$thumb = $luxe['thumbnail_is_size_card'];
?>

アイキャッチにNEWを付ける：カード型

 

タイル型の場合

list-excerpt-tile.php

39行目（バージョンによる異なる場合もあります）の以下を探し、その下にコードを記述します。

	if( $post_thumbnail === true ) {	// サムネイル
		$thumb = $luxe['thumbnail_is_size_tile'];
?>

アイキャッチにNEWを付ける：タイル型

 

PHPファイルはエラーになるとワードプレスが動作しなくなる場合もあるので、必ずコピーして子テーマに入れたものに編集を行い、万一不具合が発生した場合は、子テーマ内にアップロードしたPHPファイルを削除して下さい。

 

パターン１

アイキャッチにNEWを付ける

CSS

.post_photo{
width: 370px;
margin: 100px auto;
padding: 0;
position: relative;
}
.post_photo img{
position: relative;
z-index: 1;
}
.post_photo .new_bg::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 80px 80px 0 0;
border-color: #007bff transparent transparent transparent;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.post_photo .new_bg .new{
position: absolute;
top: 15px;
left: 5px;
z-index: 3;
color: #fff;
transform: rotate(-45deg);
}

 

PHP

<?php
  $days = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<span class="post_photo"><span class="new_bg"><span class="new">New</span></span></span>';
  }
?>

 

パターン２

アイキャッチにNEWを付ける

CSS

.post_photo_se{
width: 370px;
margin: 100px auto;
padding: 0;
position: relative;
}
.post_photo_se img{
position: relative;
z-index: 1;
}
.post_photo_se .new_bg{
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.post_photo_se .new_bg::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 80px 80px 0 0;
border-color: #007bff transparent transparent transparent;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.post_photo_se .new_bg::after{
content: "";
position: absolute;
border: dashed 0px white;
box-shadow: 0px 0px 0px 10px #007bff;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.post_photo_se .new_bg .new{
position: absolute;
top: 15px;
left: 5px;
z-index: 3;
color: #fff;
transform: rotate(-45deg);
}

 

PHP

<?php
  $days = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<span class="post_photo_se"><span class="new_bg"><span class="new">New</span></span></span>';
  }
?>

 

パターン３

アイキャッチにNEWを付ける

CSS

.post_photo_th{
width: 370px;
margin: 100px auto;
padding: 0;
position: relative;
}
.post_photo_th img{
position: relative;
z-index: 1;
}
.post_photo_th .new_bg{
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.post_photo_th .new_bg .new{
position: absolute;
top: 30px;
left: 30px;
z-index: 5;
color: #fff;
 }
.post_photo_th .new_bg .new::before{
content: "";
position: absolute;
background: #007bff;
width: 60px;
height: 60px;
border-radius: 50%;
top: -18px;
left: -15px;
z-index: -1;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

 

PHP

<?php
  $days = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<span class="post_photo_th"><span class="new_bg"><span class="new">New</span></span></span>';
  }
?>

 

パターン４

アイキャッチにNEWを付ける

CSS

.post_photo_four {
display: block;
position: relative;
margin: 60px auto;
padding: 0;
width: 370px;
}
.new_fo {
display: inline-block;
position: absolute;
left: 0;
top: 5px;
box-sizing: border-box;
padding: 0 12px;
margin: 0;
height: 30px;
line-height: 30px;
font-size: 18px;
letter-spacing: 0.1em;
color: #fff;
background-color: rgba(20,124,237,0.8);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.new_fo:before {
position: absolute;
content: '';
top: 0;
left: -7px;
border: none;
height: 38px;
width: 7px;
background-color: rgba(20,124,237,0.8);
border-radius: 5px 0 0 5px;
}
.new_fo:after {
position: absolute;
content: '';
bottom: -7px;
left: -5px;
border: none;
height: 7px;
width: 5px;
background: #4d99ca;
border-radius: 5px 0 0 5px;
}

 

PHP

<?php
  $days = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<span class="post_photo_four"><span class="new_fo">NEW!</span></span>';
  }
?>

 

パターン５

アイキャッチにNEWを付ける

CSS

.ribbon_new{
display: block;
position: relative;
margin: 60px auto;
padding: 0;
width: 370px;
}
.new_area {
position: absolute;
top: 0;
right: 0;
width: 85px;
height: 85px;
overflow: hidden;
}
.new_fi {
display: inline-block;
position: absolute;
padding: 5px 0;
left: -24px;
top: 20px;
width: 160px;
text-align: center;
font-size: 18px;
line-height: 16px;
background-color: rgba(20,124,237,0.8);
color: #fff;
letter-spacing: 0.05em;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: 0 0 0 2px rgba(20,124,237,0.8);
border-top: dashed 1px rgba(255, 255, 255, 0.65);
border-bottom: dashed 1px rgba(255, 255, 255, 0.65);
}

 

PHP

<?php
  $days = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<span class="ribbon_new"><span class="new_area"><span class="new_fi">NEW</span></span></span>';
  }
?>

 

パターン６

アイキャッチにNEWを付ける

CSS

.ribbon_new_sec {
display: block;
position: relative;
margin: 60px auto;
padding: 0;
width: 370px;
}
.new_area_sec {
display: inline-block;
position: absolute;
top: -6px;
left: 10px;
margin: 0;
padding: 10px 0 7px;
z-index: 2;
width: 40px;
text-align: center;
color: white;
font-size: 13px;
background-color: rgba(20,124,237,0.8);
border-radius: 2px 0 0 0;
}
.new_area_sec:before{
position: absolute;
content: '';
top: 0;
right: -5px;
border: none;
border-bottom: solid 6px #4d99ca;
border-right: solid 5px transparent;
}
.new_area_sec:after{
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 10px solid rgba(20,124,237,0.8);
}

 

PHP

<?php
  $days = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<span class="ribbon_new_sec"><span class="new_area_sec">NEW</span></span>';
  }
?>

 

コメント

タイトルとURLをコピーしました