背景色をページごとに変えたい

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

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

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

    ===

    はじめまして。とても楽しくSnow Monkeyを使っています。

    ページごとに背景色を変えたいと考えています。
    テンプレートは同一のもの(1カラム)を使います。

    どのようにカスタマイズすれば可能か教えていただけないでしょうか。

    ただ、、、初心者には荷が重いカスタマイズであれば、もう少し覚えてから
    という選択肢も考えています。

    宜しくお願い致します。

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

    Snow Monkey 自体にはそのような機能はないので、CSS でカスタマイズすることになります。

    ブラウザーのデベロッパーツールかソースを表示する機能でそのページの HTML を確認してみてください。各ページごとに、<body>class が付与されているのが確認できると思います。例えば固定ページであれば page-id-xxxxx、投稿であれば postid-xxxxx のような感じです。

    class を確認できたら、カスタマイザー → 追加 CSS に下記の CSS を追加してみてください。
    例えば下記は classpage-id-11111 な固定ページの背景を pink にする CSS です。

    .page-id-11111 {
      background-color: pink;
    }

    このような CSS をページ分追加することになります。

    0
    いいねをした人: 居ません
    #51145
    takunaga
    参加者
    2

    回答ありがとうございました。

    僕のミスだと思うのですが、いただいた追加CSSをベースに書き換えてみたのですが、反映されませんでした。

     

    以下が、そのサイトアドレスです。

     

    ページのid番号は、以下のようにしました。

    page-id-583

    page-id-588

    page-id-654

    postid-678

     

    大変申し訳ありませんが、もう一度、アドバイスいただければと思います。

    お手数おかけしますが、宜しくお願い致します。

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

    いま、追加 CSS に

    .c-drawer {
      transition-duration: 1s;
    }
    
    .c-drawer[aria-hidden=false] {
      transition-duration: 1s;
    	
    .smb-section__title::after {
        display: none;
    }
    	
    @media (max-width: 639px) {
    	.hoge {
        font-size:1rem !important;
      }
    }
    
    .page-id-583 {
    	background-color: #FFCC99;
    }
    	
    .page-id-588 {
      background-color: #CCCC99;
    }
    
    .page-id-654 {
      background-color: #CC9966;
    }
    
    .postid-678 {
      background-color: #0099FF;
    }

    という CSS を入力されていると思いますが、.c-drawer[aria-hidden=false] の部分が閉じていないようです。

    .c-drawer[aria-hidden=false] {
      transition-duration: 1s;
    }

    となるように修正してみてください。

    0
    いいねをした人: 居ません
    #51154
    takunaga
    参加者
    2

    本当にありがとうございました。
    表示できました。

    もっと丁寧に作業します。

     

    とじます。

    1
    いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「背景色をページごとに変えたい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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