解決済み
Question

投稿記事のオフセットとアイキャッチ画像について

  • K K. Mori
  • まず最初にJINRで
    ①投稿記事のオフセット
    (最新記事を1カラムでウィジェット表示し、その下に最新以外の3記事表示したい)
    ②アイキャッチ画像のカスタマイズ
    (ぼかしを加える)
    をCSSを使わずにカスタマイズ可能でしょうか?
    可能であればそれがありがたいのですが、その機能が無い場合はCSSがなぜ反映されないのか原因を確認いただいてもよろしいでしょうか。

    現在、CSSにて設定を行ってみましたが、上手く反映されません。

    ①投稿記事のオフセットについては、固定ページにHomeを作成し、4カラムの「新着記事」のリストを作成し、1つ目の記事と重複するものを隠すCSSを入れたのですが、反映されません。

    ブロックの追加CSSに下記のCSSを入れています↓↓↓
    /* 1つ目の最新記事(現在地と重複するもの)を隠す */
    selector .post-list-item:first-child {
    display: none !important;
    }

    /* 残りの3件を小さく、上品な淡いグレーに整える */
    selector .post-list-title {
    font-size: 14px !important; /* 文字を小さく */
    font-weight: 300 !important; /* 繊細な細字 */
    color: #a9a39a !important; /* 動画の霧に溶ける淡いグレー */
    letter-spacing: 0.15em !important; /* 文字間隔を広げて余韻を作る */
    line-height: 1.8 !important;
    }

    /* サムネイルを動画と同じ16:9の比率に固定 */
    selector .post-list-anchor::before {
    padding-top: 56.25% !important;
    }


    ②アイキャッチ画像のカスタマイズは「ホームページ設定」下の「追加CSS」に入れております。

    アイキャッチを「柔らかく」整えるCSSは下記のように設定しております↓↓↓
    アイキャッチ画像の角を丸めるのは、サイトデザイン設定で出来ました。
    /* アイキャッチ画像の縁を、霧のように背景へ溶け込ませる */
    .post-list-anchor img {
    /* 縁をふわっとぼかす(中心から外にかけて透明にする) */
    mask-image: radial-gradient(circle, black 85%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 85%, transparent 100%);

    /* 境界線のパキッとした印象を消す */
    filter: blur(0.5px);
    }


    WordPressのバージョン:6.9.4
    JINRのバージョン: 1.4.6
    PHP バージョン: 8.3.21
    プルダウンにありませんでしたので、こちらに記載します。

    問題となるページ : https://life-journey.site/
    • PHP 8.3.x
    • Xserver
    • GoogleChrome
    • Windows11
    2026/05/08 16:35
  • tsu_

    お世話になっております。

    ご質問いただきありがとうございます。カスタマイズに関するご質問はサポートの対象外となっておりますため、最後まで解決のサポートができかねますことをあらかじめご了承いただけますと幸いです。

    その上で、参考になりそうな情報をご共有いたします。なお、以下のセレクタはあくまで目安となります。実際のHTML構造と一致しているかどうかは、ブラウザの開発者ツール(F12)でご確認ください。

    ・「1つ目の最新記事を隠す」について
    CSSで要素を非表示にする方法はDOM構造を変えるものではないため、レイアウト崩れが発生する可能性があります。この点については独自カスタマイズの領域となりますため、大変恐れ入りますが、K. Mori様ご自身でご対応いただくか、有識者の方へのご依頼をご検討いただけますと幸いです。

    ・記事リストのタイトルテキストについて
    タイトルテキストにCSSを適用する場合、セレクタは以下が該当するかと思います。
    .home .d--one-column .d--postlist-square.d--postlist-column3 .a--post-title,
    .post-template-template-full-width .d--one-column .d--postlist-square.d--postlist-column3 .a--post-title,
    .page-template-template-full-width .d--one-column .d--postlist-square.d--postlist-column3 .a--post-title

    ・サムネイル(記事リスト上の画像)の比率について
    現状すでにほぼ16:9に近い表示となっておりますが、明示的に固定したい場合は以下のCSSが参考になるかと思います。
    .o--postlist-item .c--post-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    }

    ・記事内のアイキャッチ画像について
    ぼかしや縁のグラデーション処理を加えたい場合は、以下のCSSをご参考ください。
    #jinrPostThumb img {
    mask-image: radial-gradient(circle, black 85%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 85%, transparent 100%);
    filter: blur(0.5px);
    }

    細かな調整につきましては大変恐れ入りますが、K. Mori様ご自身でご対応をお願いできますと幸いです。ご確認のほどよろしくお願い申し上げます。

    2026/05/09 22:18
  • K
    K. Mori

    JIN:R サポートご担当者様

    先日はサポート対象外のカスタマイズに関する質問にもかかわらず、丁寧なご回答と具体的なセレクタのヒントをご提示いただき、誠にありがとうございました。

    教えていただいた情報をヒントに調整を行った結果、無事に希望通りの実装ができましたので、感謝と共にご報告申し上げます。

    ■ 1. サムネイル画像(記事リスト)のぼかし処理
    ご提示いただいた #jinrPostThumb img を参考に、トップページの記事リスト用として .o--postlist-item .c--post-image img に対して mask-image を適用することで、サムネイル画像の縁を綺麗に背景へ溶け込ませることができました。

    ■ 2. 記事のオフセット(1つ目の記事の非表示)
    ブロック専用CSSではDOM構造の関係で上手く適用できなかったため、対象のブロックの「高度な設定」から独自のCSSクラスを追加し、テーマカスタマイザーの「追加CSS」から .独自クラス名 .o--postlist-item:first-child 等で直接指定する形をとりました。
    ご懸念いただいていたレイアウト崩れも発生することなく、無事に「最新1件+過去3件(3カラム)」のレイアウトを実現できております。

    おかげさまで、思い描いていたイメージ通りのトップページを構築することができました。的確なアドバイスと温かいご対応に、心より感謝申し上げます。

    今後ともよろしくお願いいたします。

    2026/05/11 13:55
CLOSE