[HiROE]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】v5.6.1
【お使いのブラウザ】chome,safari,firefox
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

以前に下記のトピックで質問した内容ですが、
最近の投稿ブロックにidが指定できるようになったので、
ウィジットからブロックに切り替えたいと思っています。

「Snow Monkey: 最近の投稿」ウィジットをタグ指定で表示して使いたい

このトピックには3件の返信、2人の参加者があり、最後にキタジマ タカシにより2年、 4ヶ月前に更新されました。…

snow-monkey.2inc.org

この中のカスタマイズで、
function.phpに下記のコードを書き、ID部分をブロックでHTMLアンカーに指定した文字列に変更しました。

// ID 番号が 12345 のウィジェットが表示する記事の条件を変更する
// pickup タグ + ランダム + 4件
add_filter( 'snow_monkey_recent_posts_widget_args_12345', function( $query_args ) {
    $query_args['tag'] = 'pickup';
    $query_args['posts_per_page'] = 4;
    $query_args['orderby'] = 'rand';
    return $query_args;
} );

そして、CSSにてIDセレクタを使って下記のように書きました。（xxxはHTMLアンカーで指定した文字列）

/* PC では最後の1個を消す */
/* 下記の例だと Snow Monkey: 最近の投稿ウィジェット全部に反映されるので、特定のウィジェットにだけ適用したいなら  id セレクタで指定したほうが良いかも */
@media (min-width: 64em) {
  .snow_monkey_blocks_recent_posts-xxx .c-entries__item:last-child {
    display: none;
  }
}

この場合に、fanction.phpの記述はきちんと反映されるのですが、
CSSの記述が反映されないようで、「PCでは最後の１つを消す
」ができません。

キャッシュを消すなどを試してみましたが、うまくいきませんでした。
うまく反映できる書き方がわかれば教えていただきたいです。

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

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

CSS の問題は実際の画面をみるのがはやいのですが、URL を教えてもらうことは可能でしょうか？

♥ 0

いいねをした人: 居ません

[HiROE]

すいません、うまくいかなかったので一旦ウィジットにもどしてしまいました・・・。

実際書いたコードは下記ですが、書き方は合ってそうでしょうか？

【function.php】

// ID 番号（HTMLアンカー）が pickup の最近の投稿ブロックが表示する記事の条件を変更する
// pickup タグ + ランダム + 4件
// PCでは最後の１件を非表示にして　、PCでは３件表示、スマホ等では4件表示してレイアウトを調整するようにCSSで指定する
add_filter( 'snow_monkey_recent_posts_widget_args_pickup', function( $query_args ) {
    $query_args['tag'] = 'pickup';
    $query_args['posts_per_page'] = 4;
    $query_args['orderby'] = 'rand';
    return $query_args;
} );

【CSS】

/**SNOWMONKEY最新の投稿ブロックのID（HTMLアンカー）がpickupの場合（今回はPICKUP部分） */
/* PC では最後の1個を消す */
/* 特定IDのウィジェットにだけ適用するため  id セレクタ（#snow_monkey_blocks_recent_posts-pickup）を指定した */
@media (min-width: 64em) {
  #snow_monkey_blocks_recent_posts-pickup .snow-monkey-recent-posts .c-entries__item:last-child {
    display: none;
  }
}

♥ 0

いいねをした人: 居ません

[HiROE]

本番環境を崩れた状態にしておきたくないので、仮でテスト用に固定ページを作りました。

https://plusdesign.jp/pick-up-test

先に書いたコードの状態です。
よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

テストページありがとうございます！

CSS を下記のように変更してみてください。#snow_monkey_blocks_recent_posts-pickup の後の .snow-monkey-recent-posts が不要でした。

@media (min-width: 64em) {
  #snow_monkey_blocks_recent_posts-pickup .c-entries__item:last-child {
    display: none;
  }
}

♥ 0

いいねをした人: 居ません

[HiROE]

できましたー！ありがとうございます！！

クロームの検証で見つけた関連してそうなクラス名を足してみたりはしたのですが、消すという発想がなかったです・・・

最近の投稿ブロックにID指定ができるようになったはすごく便利です。
セクションの中に入れることで背景色を簡単に変えられるので、配置の自由度が増しました！

今回もサポートありがとうございました！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

解決できてよかったです^^
閉じます！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿