テーマRaindrops、ページ上部にそのままソースが表示されてしまいます

追記

rd-pc や rd-mobileは、DOMソース（chrome等右クリックメニューで「検証」をクリックしたソース）で確認してください。

良かったですね。解決済みですが、

@media only screen andが上手く効かず

@media は、主に　responsiveness.css に書いているので、style.cssだと効きにくいです。チャイルドテーマを作っているなら、親テーマのresponsiveness.cssをチャイルドテーマにコピーして、追加記述すると反映します。

チャイルドテーマを使っていない場合は、カスタマイザーの高度な設定に、サイト全体のCSS（Site-Wide　CSS）という項目があるので、そこにセットすると、responsiveness.cssより優先して適用されます。

何か不具合があった場合は、遠慮なく、このフォーラムに書き込んでください。

テーマを使ってくれて、ありがとう

• この返信は7年、 10ヶ月前にnobitaが編集しました。

まず、スタイルルールの記述の方法ですが

@media only screen and (min-width: 641px) {
                         .content background :none; }
!important

@mediaを使う場合は、記述方法が特殊で上の記述では動作しません。

@media only screen and (min-width: 641px) {

    .content{ 
        background :none!important; /* noneデモOKですが、transparent　の方がより正しいです */
    }
}

ただ、.contentというクラスは、Raindropsテーマでは使っていませんので、どこの部分の背景を適用させたくないのか教えていただけますか？

Raindropsテーマを使って、いろいろなスタイルの適用例を試しているページが、

http://tenman.info/labo/css/

ここでは、Raindropsのチャイルドテーマで、各投稿の「この投稿のカスタムCSS」にスタイルを記述したものです。

style.cssに記述した場合は、詳細度「調べてください：）」を上げないと適用されないかもしれませんが、スタイルの適用方法などを確認する場合の参考にしてください。

ソースを提供していただきありがとうございます。

なぜ、CSSが適用されないのか、理解が出来ました。

「この投稿のカスタムCSS」は、その投稿専用のスタイルを指定するためにあるのですが、
ここに指定できるスタイルは、基本的には投稿の　article要素以下のスタイルを指定するために準備されたものです。

テンプレートのbody要素直下に記述された　htmlブロックには、適用されないようになっています。これは、各投稿で全体のCSSを変更できるようにした場合　アーカイブやインデックスページで、それぞれの投稿に書かれたスタイルが干渉して、意図しない表示を避けるためです。

「この投稿のカスタムCSS」へのスタイルの記述の方法は、編集ページの右上のhelpタブをクリックすると、使い方の例が記述されています。

では、このようにテンプレートに記述されたブロックにどのようにスタイルを記述すればいいのか

style.css等でも指定できますが、わざわざstyle.cssを開かなくてもいいように準備されているのが、カスタマイズ/高度な設定の中にある　「サイト全体のCSS」です。

テンプレートは、そのままで　以下のCSSをサイト全体のCSSに貼り付けてみてください。

.content {
    width:960px;
    height: 306px;
    background: url(http://utairui.com/wp/wp-content/uploads/Boovo_backimg_live.png) ;
    background-position: center center;
    background-repeat: no-repeat;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
    background-size: cover;
}
/* 追加スタイル */
.content{
    margin:auto;
}
.content ul{
    display:flex;
    
}

「サイト全体のCSS」で保存する場合と、style.cssに保存される場合の違いは、スタイルルールの位置関係から、同じスタイルを記述した場合「サイト全体のCSS」の方が優先します。

貼り付けたスタイルが、うまくセットできないときは、スタイルを貼り付けた後、テキストエリアの外側を一度クリックしてから保存すると、確実に保存されると思います。

もう少し、細かなオプションなどもありますが、まずは上記の方法をお試しください。

• この返信は7年、 10ヶ月前にnobitaが編集しました。