凍結
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
返信
コメント投稿 検索
14 匿名 Chrome
【解決済み】

みなさまのおかげで無事に解決することができました。ありがとうございます。
こちら編集パスがわからず、凍結できないため…申し訳ありませんがこのまま投稿可能状態のままになります。
皆さまありがとうございました…!
09/15 14:44
返信
13 匿名 Chrome
>>11 
しち様、大変ご丁寧に記載していただきありがとうございました…!
お陰様で解決いたしました。全てHARD間編集の方に記載しており、記載ミスの修正とご提示して下さった場所の書き換えで希望のとおりになりました。ありがとうございます…!

また、本当にご丁寧にご説明いただき感謝いたします。
HTMLがどこを示すのか(全体レイアウトのものなのか、表紙のものなのか…など)不明であったため、とても助かりました。また、ご助力くださった皆さまにご迷惑をお掛けいたしまして申し訳ありません…!
以後教えていただいたことを胸に、今後お助けをお借りするときはそちらも記載させていただこうと思います。

本当に詳しくご丁寧にありがとうございました…!
09/15 14:42
返信
12 匿名 Chrome
>>10
ご丁寧にご説明をありがとうございました。
今回はとりあえず皆様のご助力のおかげで解決いたしましたが、次回お尋ねする際はHTM(すみません、これがどこのページを示すのかあまり理解しておりませんでした…)Lも一緒に記載させていただこうと思います。
貴重なお時間とアドバイスをありがとうございました…!
09/15 14:35
返信
11 しち SOG03
割り込むような形ですみません。
>>0のCSS類はそもそも文法エラー等があるので、まずはそれを修正してみてください。

表紙画面とのことですので、小説機能でしょうか?
コンテンツブロックを中央揃えにしたい(ブロック要素内のテキスト類は左揃えで)ということですね。
いくつか問題点や不明点があるので、以下を順にご確認ください。


>1️⃣ >>0のCSS類は、どこに記載していますか?
🅰️【CSSファイル編集】、または🅱️【HEAD編集】、どちらに書いていますか?
もし>>0の全文をどちらか一方にこの通り書いてるなら、書き方に誤りがあります。
(以下🅰️🅱️、当てはまらないほうは読み飛ばしてOKです)

*⚠️『【CSSファイル編集】にはCSSだけ、【HEAD編集】には<link>と<style>だけ書いている。それぞれからコピペしただけ』という場合でもスペルミス・開始タグの重複・閉じタグが無いというミスがあります。
もしこの場合ならどこ(【CSSファイル編集】【HEAD編集】)に何を書いているか改めて教えてください。次のレスで修正箇所を書き込みますので……。

>>🅰️ 全文【CSSファイル編集】に書いているなら
CSSファイルに書いてはいけないタグがあるので、それらは消したり、または【HEAD編集】へ移動してください。
そしてCSSファイルは〔スマホ用〕〔PC用〕と別々に編集欄が設けられているので、両方に同じCSSを記入してください。

あと画像タグ『##IMAGE_DATA_40_URL##』なのですが、これは【CSSファイル編集】内だと機能しないため、画像が表示できないはずです。
質問内容にないので一旦その説明は省きますが、画像を表示したい場合は改めてお尋ねください。
まずは重大な問題点を解消します↓

🔵以下を【HEAD編集】の〔□HEAD間編集〕へ移動する
━━━━━

<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">

━━━━━

🔵【CSSファイル編集】に書いてはいけない<style>タグを消す
🔵bodyのスタイル指定にスペルミスがあるので、
 『pathing』→『padding』に修正
━━━━━

@charset "UTF-8";

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

body{
……
padding:25px;/* スペルミスを修正 */
}

・(後略)


━━━━━
修正が終わったら、ブラウザのキャッシュをクリアしてください。
古いCSSがキャッシュに残っていると、修正済みの新CSSをブラウザが読み込んでくれず、変更がサイト上に反映されないので。



>>🅱️ 全文【HEAD編集】の〔□HEAD間編集〕に書いているなら
🔹CSS部分を『<style>〜</style>』タグで挟んでください。
* @importの直前に開始タグの『<style>』を、
* CSSの最後に閉じタグの『</style>』を入れてください。
▼参考
styleタグを使用してCSSを記述してみる | CSS入門編 - ウェブプログラミングポータル

🔹ただし、『<link>』タグはこの<style>タグの間に書いてはいけません。なので一番上へ移動させてください。
🔹『@charset "UTF-8";』は不要なので消してください。
🔹bodyのスタイル指定にスペルミスがありますので、
『pathing』→『padding』に修正してください。

⚠️もしも〔□HEAD間編集〕欄以外に書いているなら、〔□HEAD間編集〕にすべて移動してください。

以上を踏まえて、
>>>『body{……}』より上は以下のように書き換えてください↓
━━━━━

<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">

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

━━━━━

>>>『body{……}』以下は、スペルを修正・ラストに閉じタグ『</style>』を挿入してください↓
━━━━━

body{
……
padding:25px;/* スペルミスを修正 */
}

・(中略)

input[type=submit]{
……
}
</style>

━━━━━
とりあえずこれで、問題点は解決します。
次に、中央揃えにするためのスタイル指定を試してみます。


>2️⃣ 試しにCSSを以下のように書き換えてみてください(2箇所)
━━━━━

body{
font-family: 'Tillana', 'メイリオ', sans-serif;
width: 750px;
text-align: center;/* コンテンツを中央揃えに */
margin : auto;
font-size: 12px;
letter-spacing: 2.4px;
line-height: 1.8;
padding:25px;
}

━━━━━

#wrp{
text-align: left;/* テキスト類は左揃えに */
margin: 0 auto;/* 余白:上下は0 左右はauto */
max-width: 400px;
}

━━━━━
一般的な構造ならこれでコンテンツブロックを中央揃えにできるはずです……が、CSSをパッと見た感じ、いまいち意図の読みとれないところがちょこちょこあって、HTML構造が類推できず……。
なのでこれで中央揃えにならないのでしたら、次の3️⃣をご確認ください。


>3️⃣ HTMLを教えてください
HTMLとは、小説機能でいえば【全体デザイン】【○○画面編集】などのことです。

●【全体デザイン】の内容
●【表紙画面編集】【目次画面編集】【文章画面編集】のうち、中央揃えにしたい画面の内容
を教えてください。

コンテンツブロックを中央揃えにするときは、
・bodyなどの親要素に『text-align:center;』を書いて、親要素内にある要素をすべて中央揃えにし、
・テキストなどを入れるブロック要素に、左右の余白をautoにするための『margin: 0 auto;』などを書く
……とするのですが、
CSSを見ただけではいまいちHTMLの構造が分からないため、この『中央揃えにする親要素』と『左右の余白をautoにすべきブロック要素』がどれか分からないのです。

(まさしく>>9さんのおっしゃるとおりです。これはHTMLが分からないと修正箇所を特定できない類の問題です……)
09/15 14:16
返信
10 Anonymous iPhone
>>9
9です。
追加で、CSSだけでなく、PC 用のhtmlの全体レイアウトあたりも記載いただかないと、みなさんどこを直せば良いか分からないかと思いました。
全体レイアウトに影響を与えているのがallなのかwrpなのかbody なのかは、htmlでどれがどこに使われているかに依存すると思います。
09/15 13:20
返信
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
返信
8 匿名 Chrome
>>7
ご提案をありがとうございます。
やってみましたが変わりありませんでした…。
CSSまでご提示いただき、ありがとうございました…!
09/14 20:06
返信
7 Anonymous Chrome
全てのCSSということらしいので一度前に

*{
box-sizing: border-box;
margin:0;
padding:0;
}

を入れてみたらいかがでしょうか。
09/14 19:26
返信
6 匿名 Chrome
>>5
ご返信ありがとうございます。
修正してみましたが、何も変わりありませんでした…。
ご提案いただきありがとうございます…!
09/14 19:15
返信
5 Anonymous Chrome
>>4
とりあえず「margin : auto;;」の;をひとつ消してみるとかはだめですか?
09/14 19:12
返信