凍結
0 匿名 Chrome
ググって色々やってみたのですが、どうしても反映されず…どうかお力をお貸しください(汗)

どうしてもテンプレートがPCだと画面左に寄ります。
width、margin、pathing試してみましたが、効果がありませんでした。
また、これらの数値を動かしているにも関わらず、テンプレートに変わった様子(反映されてない?)が全くありませんでした。
どうしたら画面中央(文字は左揃え)に来るでしょうか?

知識をお持ちの方、ご協力お願いいたします…!


<style type="text/css">

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Tillana&display=swap');
<style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">


body {
font-family: 'Tillana', 'メイリオ', sans-serif;
width: 750px;
text-align: left;
margin : auto;;
font-size: 12px;
letter-spacing: 2.4px;
line-height:1.8;
pathing:25px;
}


img{
max-width:100%;
height:auto;
}

#all{
width:100%;
background:#fff;
}

#wrp{
margin: 0 0 0;
max-width: 400px;
}

#cnt,#bun{
margin:0 auto;
padding: 0px 30px;
text-align: left;
}

#bun{
font-size:13px;
}

#ttl{
font-family: しっぽり明朝;
font-size: 20px;
color:#fff;
text-shadow: 0px 0px 10px rgba(0,0,50,0.4);
font-weight: normal;
}

#txt{
font-size:11px;
color:#fff;
margin:0 auto;
padding:10px 0 0;
width:85%;
text-align: center;
text-shadow: 0px 0px 10px rgba(255,255,255,1);
}

#txt2{
font-size:8px;
color:#555;
margin:0 auto;
padding:10px 0 0;
width:85%;
text-shadow: 0px 0px 10px rgba(255,255,255,1);
}

h1,h2 {
font-family: "Homemade Apple", 'メイリオ', sans-serif;
font-size: 20px;
line-height: 100%;
letter-spacing: 0;
padding: 0;
font-weight:200;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}

h1{
color: #fff;
margin: -90px 0 0 20px;
position: absolute;
}

h2 {
margin: 0 15px 50px;
}

h3{
font-family: 'Sacramento', cursive;
font-size: 18px;
padding: 11px 0 0px;
border-bottom: double;
display: block;
background: url(##IMAGE_DATA_40_URL##) no-repeat;
background-size: 27px;
}


a{
text-decoration:none;
}

figure{
display: table;
margin: 0 auto;
position: relative;
}

figcaption{
position: absolute;
top: 25px;
width: 100%;
text-align:center;
}

input[type],textarea{
height:50px;
width:80%;
font-family:"Arsenal","HGSゴシックM", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#eee;
color:#333;
border:solid 1px #eee;
margin:5px 10px;
padding:2px 5px;
-webkit-appearance: none;
box-shadow:none;
border-radius:5px;}

input[type=text]{
margin:5px;
height:24px;
width:60px;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:none;
background:#367AD3;
color:#fff;
font-weight:normal;
}
09/14 17:48
返信
コメント投稿 検索
9 Anonymous iPhone
>>0
こんにちは。CSSを編集したけど、反映されないということかと思いました。
それの場合、Aliceが原因ではなく、CSSの仕様になります(CSS 更新されない とかでググってみると出てくるかと思います)

私がやっている対策ですが、トップheadと共通headに以下のタグを入れています。

<pc><link rel="stylesheet" type="text/css" href="https://alicex.jp/data/自サイトのid/pc_css.css?20230819"></pc>
<sp><link rel="stylesheet" type="text/css" href="https://alicex.jp/data/自サイトのid/sp_css.css?20230819"></sp>

やっていることの説明です。
こういったタグを書かなくても、Aliceでは自動でcss参照タグを書いてくれます。
ただ、外部CSSの特徴として、更新しても反映されないという困った特徴があります。
そのため、cssのURLの後ろに「?任意の文字」を付けてあげることで、更新時に再読み込みをするよう命令しています。
二つ書いているのは、pc用とスマホ用で別のCSSを設定しているからです。

「?任意の文字」は、私は日付にしています(?20230819の部分です)
CSSを更新したら、headに書いているこの任意の文字も書き換えます。そうすると、CSSが再読み込みされます。


上記以外の方法としては、ブラウザの履歴・キャッシュを全部削除する方法がありますが、個人ごとにやる必要がある上、これをすると全部のログイン情報などがリセットされて不便なので、私はやっていません。
09/15 10:40
返信