- このトピックには7件の返信、3人の参加者があり、最後に
により1年、 8ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】バージョン: 19.1.6
【お使いの Snow Monkey Blocks のバージョン】バージョン 18.1.7
【お使いの Snow Monkey Editor のバージョン】バージョン 9.1.2
【お使いのブラウザ】chromeお世話になります。
あるカテゴリーの記事一覧ページで、アイキャッチ、タイトル、抜粋テキストが表示されており、
1画面に10記事が表示されています。
この各記事のなかの特定の記事の抜粋テキストの色を変更する方法を教えていただけないでしょうか？
よろしくお願いします。
いいねをした人: 居ませんあるカテゴリーの記事一覧ページ
bodyに固有のクラス名が付与されていると思いますので、それと.c-entry-summary__contentの組み合わせとしてCSSで色を指定する方法が簡単だと思います。例えばこんな感じです。
.category-スラッグor番号 .c-entry-summary__content { color: #ff0000; }いいねをした人:
ありがとうございます。
伝え方が悪く申し訳ありません。
＞＞この各記事のなかの特定の記事の抜粋テキストの色を変更する方法を教えていただけないでしょうか？
↓
これはカテゴリーページの記事一覧が表示されている画面になります。
記事を開いたときではありません。
各記事を開くとpost id-xxxみたいな固有の番号はありますが、
一覧ページになると、記事を開いたときの固有の番号のクラスが見当たらないんです。
順番を指定しようかと思ったのですが、新着記事が増えると順番がずれるため無理でした。
何度もお手数おかけして申し訳ありません。よろしくお願いします。
いいねをした人: 居ませんわぉ、勘違いです。失礼しました。
特定の記事
これは何を条件として【特定】とするんでしょうか？
いくつか方法はあると思いますが、パッと思いつくものだと・・・
- 投稿IDを振ってCSSで指定する（IDごとに指定が必要で現実的でないかも）
- 投稿のカスタムフィールドに固有の情報をもたせ、クラス名を付与してCSSで指定する
- 投稿のカスタムフィールドに色情報をもたせて投稿ごとに好きな色を指定する
【特定の記事】として定義づける方法、運営する人によってもやり方が異なると思いますので、もう少し詳しく教えてください。
いいねをした人: 居ませんありがとうございます。
特定の記事とは、記事一覧ページで表示されているタイトル下のテキストを赤文字にしたい記事です。
記事一覧の中で、その記事を目立たせたいと思っています。
極端な話、タイトル下のテキストを赤ではなく、何かラベルような物をつけるでも良いです。
とにかく、カテゴリーページの記事一覧の中で、
目立たせたい特定の記事だけを指定してデザインをいじれたらなという感じです。
その特定記事も3つくらいなので、投稿IDを振ってCSSで指定するでも問題ないのかなと思った次第です。
ただやり方が分からなかったので。
何度もお手数おかけしますが、よろしくお願いします。
いいねをした人: 居ません特定の記事とは、記事一覧ページで表示されているタイトル下のテキストを赤文字にしたい記事です。
管理者が任意で設定できる【特定の記事】というわけではなさそうですね。
ということであれば、記事一覧の該当箇所c-entries__itemに固有のクラス名を入れるのが良さそうですね。
c-entries__itemをc-entries__item post_1234みたいになるようにして、CSSで指定（以下のように）するのはいかがでしょうか。li.c-entries__item.post_1234 .c-entry-summary__content { color: #f00000; font-weight: bold; }いいねをした人: 居ませんあ、ここデフォルトだと ID 出力されてないですね…。デフォルトで入るようにしたほうが良い気がしてきました。
とりあえず現状は無いので、追加するコードを書いてみました。add_filter( 'snow_monkey_template_part_render_template-parts/loop/entry-summary', function( $html ) { $html = str_replace( 'class="c-entry-summary ', 'class="c-entry-summary post__' . esc_html( get_the_ID() ) . ' ', $html ); return $html; } );li.c-entries__itemのところには追加できなかったので、.c-entry-summaryに追加してみました。いいねをした人: 居ません
- このトピックに返信するにはログインが必要です。