投稿記事一覧の各コンテンツ(記事:リッチメディア)の大きさをcssで調節したい。(my snow monkey使用中)

0
いいねをした人: 居ません
  • このトピックには4件の返信、2人の参加者があり、最後にsuisuiにより4年、 3ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #54958
    suisui
    閲覧者
    5

    投稿記事一覧の各コンテンツ(記事:リッチメディア)のサイズを調節したい。

    【お使いの Snow Monkey のバージョン】バージョン: 10.10.8
    【お使いのブラウザ】Googlechrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

    トップページに、snow monkey blocksを使って、投稿記事一覧を3つずつ横並びで出力することができました。my snow monkeyからCSSで、投稿記事のコンテンツ幅を1080pxに設定しています。

    各li要素の大きさを大きくすることが目的で、こちらのul:width:100% で指定し(コンテンツ幅と一致)、li要素の幅をwidth:33.333%;で検証しました(期待したことはli要素の大きさが1/3ずつの大きさになる)。しかし、各li要素の大きさに変化はありませんでした。

    cssにどのような記述が必要になりますでしょうか?

    アドバイス、よろしくお願いいたします。

     

    //下記がcssの記述(※追加CSSはありません。ページ設定は1カラム、snow monkey blocksから投稿記事一覧を選んだだけの状態。borderはただの目印です。)

    .smb-section__inner {
      width: 1080px;
      margin: 0 auto;
      border: 1px red solid;
    }
    
    .c-entries .c-entries--rich-media {
      width: 100%;
    }
    
    .c-entries__item {
      width: 33.333%;
      border: 1px red solid;
    }
    0
    いいねをした人: 居ません
    #54969
    アバター画像キタジマ タカシ
    参加者
    2421

    リッチメディアの段組みには flex を使っているので、max-widthflex-basis の組み合わせで幅を変更できます。

    .c-entries--rich-media .c-entries__item {
      max-width: 50%;
      flex-basis: 50%;
    }
    1
    いいねをした人: 居ません
    #55019
    suisui
    閲覧者
    5

    ご回答、ありがとうございます。

    li要素にflex-basis:33.33%、maw-width:33.33%を設定しましたが、ul要素の余白がどうやら邪魔をしているようで、li要素に変化はありませんでした。

    そこで、ulを囲んでいるdivを確認したところ、.u-slim-width{max-width:46rem!important}が設定されており、そちらを解除したところ、左右の余白がなくなり、1/3ずつの大きさにできました。

    下記のように上書きして解決できました。

    .u-slim-width {
    max-width: none !important;
    }

     

    0
    いいねをした人: 居ません
    #55020
    アバター画像キタジマ タカシ
    参加者
    2421

    最近の投稿ブロックを入れているセクションブロックの設定がスリム幅になっていないでしょうか?そのCSSを追加してしまうとすべてのスリム幅が無効化されてしまうので、スリム幅の設定を外すのがベストだと思います。

    0
    いいねをした人: 居ません
    #55026
    suisui
    閲覧者
    5

    スリム幅で設定しておりました。ありがとうございました。

    1
    いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「投稿記事一覧の各コンテンツ(記事:リッチメディア)の大きさをcssで調節したい。(my snow monkey使用中)」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。