投稿記事のオフセットとアイキャッチ画像について
- 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
プルダウンにありませんでしたので、こちらに記載します。- PHP 8.3.x
- Xserver
- GoogleChrome
- Windows11