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

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など エントリーカードに「NEW」のgif画像を入れたい

このトピックには16件の返信が含まれ、2人の参加者がいます。1 週、 1 日前 sakuyo さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #58664

    sakuyo

    いつもお世話になっております。

    エントリーカードの記事タイトルの末尾後に自作した「NEW !」のgif画像を挿入したいのですが・・・

    https://photos.google.com/photo/AF1QipOnyaXVgS-agh96aO7eHCcVW95wUEyTHmjeldjR

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

    よろしくお願いいたします。

  • #58666

    かうたっく

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

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

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

  • #58670
    わいひら
    わいひら
    キーマスター

    https://photos.google.com/photo/AF1QipOnyaXVgS-agh96aO7eHCcVW95wUEyTHmjeldjR
    僕の環境からだと、上記URLは、404ページで表示されます。

  • #58723

    sakuyo
  • #58727

    かうたっく

    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

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

  • #58741

    sakuyo

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

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

  • #58748

    かうたっく

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

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

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

  • #58785

    sakuyo

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

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

  • #58792

    かうたっく

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

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

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

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

  • #58793

    かうたっく

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

  • #58803
    わいひら
    わいひら
    キーマスター

    CSSだけでは、日付まで指定するのは無理かもしれません。
    最低限JavaScriptは使用する必要があるような気がします。

  • #58819

    Akira

    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;の指定追加が必要です。

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

  • #58821

    Akira

    ごめんなさい。 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>';
    }
    ?>
  • #58845

    sakuyo

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

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

    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>’;
    }

    という意味でしょうか?

  • #58846

    かうたっく

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

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

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

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

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

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

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

  • #58851

    Akira

    私が提案したカスタマイズは、以下の 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;
    }
  • #58858

    sakuyo

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

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

トピック「エントリーカードに「NEW」のgif画像を入れたい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)