サポート » テーマ » 固定ページ別に背景設定

  • 解決済 ryuminashe

    (@ryuminashe)


    WP初心者です。
    固定ページの背景をページごとに変えようと思いいろいろ調べて、body_classを使えばいけることが分かったのですが、バックグラウンドをcssで呼び出してもテーマ背景の後ろに潜ってしまいます。
    どうやったら前に持ってくることができますか?

    body{
    }

    body.home {
    background:url(http://xn--zck8ci4084bojnbs1d.com/picture/sumaho.jpg) repeat;
    background-attachment: fixed:
    background-position: center top;
    text-rendering: optimizeLegibility;
    }
    .page-id-8 {
    background:url(http://xn--zck8ci4084bojnbs1d.com/wp-content/uploads/digipress/magjam/background/pr.jpg) repeat;
    background-attachment: scroll;
    background-position: center top;
    text-rendering: optimizeLegibility;

    のように記述しています。

    よろしくお願いします。

    使用テーマMAGJAM

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • スレッド開始 ryuminashe

    (@ryuminashe)

    記述ミスってました。
    body.home {
    background:url(http://xn--zck8ci4084bojnbs1d.com/picture/sumaho.jpg) repeat;
    background-attachment: fixed:
    background-position: center top;
    text-rendering: optimizeLegibility;
    }
    body.page-id-8 {
    background:url(http://xn--zck8ci4084bojnbs1d.com/wp-content/uploads/digipress/magjam/background/pr.jpg) repeat;
    background-attachment: scroll;
    background-position: center top;
    text-rendering: optimizeLegibility;

    천궁 메텔

    (@digitmaetel)

    テーマ次第にはなりますが、body だとサイト全体の背景画像、背景色になるので、固定ページのコンテンツの class を指定すると良いでしょう。
    大抵において、.container が多いかもしれません。

    テーマ「Twenty Sixteen」の仕組みが勉強になるかもしれません。
    テーマ「Twenty Sixteen」では .site-inner になっていました。

    スレッド開始 ryuminashe

    (@ryuminashe)

    맹조さん、回答ありがとうございます。

    早速.containerでやろうと思ったのですが、うまくいきません。

    よろしければ、サイトを見ていただけますでしょうか?
    http://xn--zck8ci4084bojnbs1d.com/

    画面の白紙の部分にページごと違う背景を指定したいです。
    要素を確認したところコンテナではないような気もしてきました。。

    どのように、記述すれば良いでしょうか。。
    20時間ほど解決策を探しましたが、なにぶん初心者なものでわからずじまいです。

    よろしくお願いしますm(_ _)m

    sysbird

    (@sysbird)

    もし custom-background を利用しているテーマでしたら、
    bodyの背景が上書きされる場合があります。

    천궁 메텔

    (@digitmaetel)

    要素の確認では .main-wrap のようですね。でも、visual-custom.css が関わっているみたいですね。
    テーマのオプションで変更される仕組みじゃないでしょうか。

    スレッド開始 ryuminashe

    (@ryuminashe)

    맹조さん、はいテーマのオプションで背景は変更できるのですが、全ページの背景1つのみなんです。
    .main-wrapでいろいろ指定してみたのですが、やはりうまくいきません。
    visual-custom.cssですか・・・調べてみます。

    sysbirdさん、はい読み込んで入るのですが上書きされているみたいです。

    スレッド開始 ryuminashe

    (@ryuminashe)

    visual-custom.cssを見ると

    .main-wrap:not(.mb-theme){color:#383838;background:#ffffff}.main-wrap a,.main-wrap a:visited,.loop-article a:hover {color:#383838;}.main-wrap a:hover {color:#29abe2;}

    このような記述になっていました。

    いろいろいじっていたら、指定した2番目以降の固定ページ背景が前に出てくるようにはなったんですが、1番目の背景がすべてのページに出てきてしまいます。その下に指定した背景が出る感じです。

    .main-wrap:not(.mb-theme){
    background:url .home( http://xn--zck8ci4084bojnbs1d.com/wp-content/uploads/digipress/magjam/background/背景1.jpg) repeat;
    background-attachment: fixed:
    background-position: center top;
    text-rendering: optimizeLegibility;
    background-repeat: no-repeat;!important;
    background-attachment: fixed:}

    このように記述しました。

    これを.home .pege-idごとに振り分けるにはどうしたらいいですか?

    それとも、そもそもの考え方が間違っていますか?

    よろしくお願いします。

    スレッド開始 ryuminashe

    (@ryuminashe)

    記述でたらめでした

    .main-wrap:not(.mb-theme){
    background:url( http://xn--zck8ci4084bojnbs1d.com/wp-content/uploads/digipress/magjam/background/背景1.jpg) repeat;
    background-attachment: fixed:
    background-position: center top;
    text-rendering: optimizeLegibility;
    background-repeat: no-repeat;!important;
    background-attachment: fixed:}

    sysbird

    (@sysbird)

    テーマのオプションで背景を変更しているのでしたら、それが優先されることが多いです。
    お使いのテーマが有償のようなので、開発元に問い合わせてみてはいかがでしょうか。

    천궁 메텔

    (@digitmaetel)

    .page-id-8 .main-wrap …
    .page-id-10 .main-wrap という感じでどうでしょう。
    デザインのパターンが固定しているものなら、固定ページそれぞれにテンプレートを振り分けるのもスマートでいいんじゃないでしょうか。

    スレッド開始 ryuminashe

    (@ryuminashe)

    sysbirdさん
    開発元のデジプレスにも質問したのですが、この手の質問には回答してくれないようです。

    맹조さん
    .page-id-8 .main-wrap
    このクラスを指定すると呼び出してくれないんです。。

    ですので맹조さんが言っていたvisual-custom.cssに記述されている
    .main-wrap:not(.mb-theme)
    このクラスを指定すると呼び出してくれます。
    ですが、

    .home.main-wrap:not(.mb-theme)
    .page-id-8.main-wrap:not(.mb-theme)
    のように指定すると呼び出してくれず真っ白になってしまいます。

    .home.main-wrap:not(.mb-theme){
    background:url(http://xn--zck8ci4084bojnbs1d.com/wp-content/uploads/digipress/magjam/background/スマホ部背景1.jpg) repeat;
    background-attachment: scroll;
    background-position: center top;
    text-rendering: optimizeLegibility;
    }

    .page-id-10.main-wrap:not(.mb-theme){
    background:url(http://xn--zck8ci4084bojnbs1d.com/wp-content/uploads/digipress/magjam/background/アプリ部背景1.jpg) repeat;
    background-attachment: scroll;
    background-position: center top;
    text-rendering: optimizeLegibility;
    }

    このように記述すればいけると思ったのですが真っ白になってしまいます。。

    これは、素人にはかなり難しいものでしょうか?

    スレッド開始 ryuminashe

    (@ryuminashe)

    スレッド開始 ryuminashe

    (@ryuminashe)

    >固定ページそれぞれにテンプレートを振り分ける
    はい、背景だけ変えたいのでそれ以外のデザインは全く同じでも問題ないです。

    page.phpを複製してpage-id-8.phpという固定ページファイルを作ってやってみたのですが、どこで背景を呼び出しているのかがわからず背景ファイルを変える記述をどこで書いていいのかがわかりません。。

    [モデレータによる編集: 長すぎるコードの引用がありましたので削除しました(コードの投稿)。長いコードを引用する場合にはコードそのものを直接引用することは避け、pastebin.com や Gist のようなペーストビンサービスを利用してください。]

    どこを変えれば良いでしょうか?

    よろしければ教えていただきたいです。
    長くてすみません。。

    sysbird

    (@sysbird)

    有料テーマの場合は、どこで背景を呼び出しているのかなどはテーマを買わないとわかりませんので、フォーラムでの回答は得られづらいでしょう。
    サポートのあるテーマか、公式ディレクトリのテーマを選んでみては。

    スレッド開始 ryuminashe

    (@ryuminashe)

    みなさん回答さりがとうございました。
    勉強します。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「固定ページ別に背景設定」には新たに返信することはできません。