凍結
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
返信
コメント投稿 検索
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
返信