痛いところを突かれました。
AmebaのCSSは、PCにしか適用されません。
スマホの表示時には、無視されます。
設定・管理のフリースペース編集もスマホには反映しません。
つまりスタイルをスマホに適用させるためには、各要素に直接styleを書くか編集画面にstyleシートを記述するしかないのです。
一度書けば、記事の編集から複製していけばいいのですが、面倒だったので書いていませんでした。
とりあえず、Imageの背景色を付けるCSSを書いてみました。
猫ママとチャチャ
お孫ちゃん
CSS編集画面内に書いたCSS
ソース全文
<p>
<style type="text/css">@media screen and (max-width:480px) {
/*ミーの項目*/
.miko{
color : blue;
background-color : lavender;
overflow : auto;
padding-left : 10px;
font-size : small;
font-weight : normal;
border-radius : 10px;
padding : 5px;
text-align : center;
}
.mama{
width :100%;
height :200px;
background-image: url(https://stat.ameba.jp/user_images/20230204/09/ussr1917jp/37/9d/j/o1769118415238521286.jpg);
background-size: cover;
}
}
@media screen and (min-width: 480px) {
.mama{
display:none;
}
}
</style>
</p>
<p class="mama">
</p>
<p>痛いところを突かれました。</p>
<p>AmebaのCSSは、PCにしか適用されません。</p>
<p>スマホの表示時には、無視されます。</p>
<p>設定・管理のフリースペース編集もスマホには反映しません。</p>
<p>つまりスタイルをスマホに適用させるためには、各要素に直接sstyleを書くか編集画面にstyleシートを記述するしかないのです。</p>
<p>一度書けば、記事の編集から複製していけばいいのですが、面倒だったので書いていませんでした。</p>
<div class="miko">
<p>とりあえず、Imageの背景色を付けるCSSを書いてみました。</p>
<p><a href="https://stat.ameba.jp/user_images/20230204/10/ussr1917jp/4c/cf/j/o1769118415238550777.jpg"><img alt="" height="281" src="https://stat.ameba.jp/user_images/20230204/10/ussr1917jp/4c/cf/j/o1769118415238550777.jpg" width="420"></a></p>
<p>猫ママとチャチャ</p>
<p>
<a href="https://stat.ameba.jp/user_images/20230204/12/ussr1917jp/82/62/j/o1180099415238592100.jpg"><img src="https://stat.ameba.jp/user_images/20230204/12/ussr1917jp/82/62/j/o1180099415238592100.jpg" width="420" height="354" alt=""></a>
</p>
<p>お孫ちゃん</p></div>