追記です。
例えばsingle.phpに直接書いたcssはPC、スマホ共に反映されています。
style.cssに書いたものだけ反映されていません。
CG
(@du-bist-der-lenz)
single.php に、ではなく、親テーマのスタイルシートに書いたことは反映するということでしょうか。
そこで、「PC上でスマホ表示にする」というのが、理解が難しいのですが。AMPとレスポンシブルを混同はしてませんよね。
ごめんなさい、わかりにくく申し訳ありません。
子テーマのstyle.cssに書いた内容が、画面の横幅を狭くすると全く反映されません。
PC＝一定の横幅があるときには反映されています。
single.○○.phpに直接書いたカスタム投稿の装飾用cssは画面の横幅を狭くしても反映されています。
〉そこで、「PC上でスマホ表示にする」というのが、理解が難しいのですが。AMPとレスポンシブルを混同はしてませんよね。
表現が適切でなかったです。。
PCでカスタマイズ画面の下にあるスマホのアイコンをクリックして幅を狭めると、今まで適用されていた子テーマのstyle.cssが何一つ反映されなくなります。
以前、sydneyを使ってサイトを作った際には特に何も設定せずともどのような画面幅でも子テーマのstyle.cssは反映されていたのですが、このような場合、どうしたら良いのでしょうか。
こんにちは、
どんなスタイルを書いたのか、具体的に書いていただくと回答がつきやすいかもしれません。
なぜ、具体的なカスタムスタイルがあると、回答がつきやすいのか？
例えば、チャイルドテーマの style.cssに
h1 {
font-size:100px;
color:red;
}
と記述すると、個別投稿では、投稿タイトルは赤色になりますが、フォントサイズは変更になりません。
トップページで表示すると、投稿タイトルは、色も、サイズも変わりません。（投稿タイトルにh1が使われないので）
また、大抵のテーマは、メディアクエリ―と言ってブラウザのサイズによってスタイルを切り替える機能を使っているので、（19.0 Media Queries の項目部分のスタイル）それによって、一定のサイズの範囲では、特定のプロパティでは、スタイルが効かないという事もあり、
といった、ややこしい事があるので、ざっくりと説明しにくいのです。
nobitaさま、ご回答ありがとうございます。
そうですよね、失礼いたしました。。
例えば以下のCSSでアーカイブの記事をひとつづつ枠で括っているのですが、一定の画面幅以下になると枠線が消えてしまいます。
/* グリッド表示用 */
#tile-list {
width: 100%;
overflow: hidden;
}
.tile-entry {
float: left;
margin: 0 1% 1em;/*余白（上、左右、下）*/
width: 48%;/*横2列表示*/
padding-bottom: 0;
background-color: #fff;/*各記事の背景色*/
border: 1px solid #eee;/*各記事の枠線*/
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);/*各記事の影*/
}
@media screen and (min-width: 30em) {
.tile-entry {
width: 31.33%; /*横3列表示*/
}
}
@media screen and (min-width: 48em) {
.tile-entry {
width: 48%;/*横2列表示*/
}
}
@media screen and (min-width: 60em) {
.tile-entry {
width: 31.33%; /*横3列表示*/
}
}
#tile-list .entry-title {
font-size: 13px;/*タイトル文字サイズ*/
font-size: 0.75rem;/*タイトル文字サイズ*/
}
#tile-list .entry-header {
padding: 0.5em 8% 0.5em;/*投稿日とタイトルの周辺余白*/
border-top: 1px solid black;/*アイキャッチと文字の間の線*/
}
.post-thumbnail {
margin-bottom: 0em;
font-size: 0px;
}
ツイッターボタンも同様です。
.fl_tw {
text-decoration: none;
display: inline-block;
text-align: center;
color: #1da1f3;
font-size: 25px;
text-decoration: none;
}
.fl_tw:hover {
color:#88daff;
transition: .5s;
}
.fl_tw .twicon{
border-radius: 10px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 35px;
line-height: 50px;
vertical-align: middle;
color: #FFF;
background: #1da1f3;
}
.fl_tw .twicon .fa {
line-height: 50px;
}
大変恐れ入ります。
何卒よろしくお願い申し上げます。
